Contents

ArrangementView

A view that arranges primary and secondary content using an adaptive layout that responds to the environment.

Declaration

nonisolated struct ArrangementView<Primary, Secondary> where Primary : View, Secondary : View

Overview

You create an arrangement view with a primary and secondary view. The arrangement view computes a layout for its content based on the context it is presented in, including the available size, size class, and hardware features.

Use the arrangementViewStyle(_:) modifier to choose how the arrangement view lays out its content. The default style is AutomaticArrangementViewStyle, which resolves to a split arrangement. The other built-in styles are OverlayArrangementViewStyle and SplitArrangementViewStyle.

Overlay arrangements

An overlay arrangement layers the primary view on top of the secondary view in z-order. This layout is well-suited for full screen experiences like media players, where playback controls overlay a video surface:

ArrangementView {
    PlayerControls()
} secondary: {
    VideoPlayer()
}
.arrangementViewStyle(.overlay)

When the environment changes, such as when a foldable device is folded, the overlay arrangement can transition its views from a layered layout into a side-by-side layout. Use axes(_:) to control which axes are supported.

Split arrangements

A split arrangement places the primary and secondary views side by side along one or more axes. Use this layout for experiences that display two distinct pieces of content simultaneously, such as a music player alongside its lyrics:

ArrangementView {
    NowPlayingView()
} secondary: {
    LyricsView()
}
.arrangementViewStyle(.split)

The split arrangement adapts its axis based on the available size and size class. You can constrain which axes the split supports using axes(_:).

Topics

Creating an arrangement view

Configuring an arrangement view

See Also

Dynamically arranging a primary and secondary view