SplitArrangementViewStyle
An arrangement view style that places the primary and secondary views side by side along one or more axes.
Declaration
nonisolated struct SplitArrangementViewStyleOverview
A split arrangement view keeps its primary and secondary views in separate spaces: next to each other horizontally when someone is holding the device in landscape orientation, or stacked vertically when someone is holding the device in portrait orientation. Here’s how the split arrangement positions the primary and secondary views:
In landscape orientation, the arrangement view places the primary view in the leading position and the secondary view in the trailing position.
In portrait orientation, the arrangement view places the primary view in the top position and the secondary view in the bottom position.
When someone is holding a closed iPhone Duo in landscape orientation, the split arrangement only shows the primary view.
Create a split arrangement view by specifying a primary and secondary view, and add the arrangementViewStyle(_:) modifier with split, as the following example shows:
ArrangementView {
NowPlayingView()
} secondary: {
LyricsView()
}
.arrangementViewStyle(.split)Adjust layout sizing in a split arrangement
By default, a split arrangement view sizes the primary and secondary views equally when a display has one region. Set a fixed layout size or layout ratio to influence how the arrangement view computes the sizes for each view. In the following example, adding the splitArrangementLayoutRatio(_:) view modifier to PrimaryContent() sets a value for a ratio that the arrangement uses to calculate how much of the display’s available space to use for the primary view:
ArrangementView {
PrimaryContent()
.splitArrangementLayoutRatio(0.3)
} secondary: {
SecondaryContent()
}Use splitArrangementLayoutRatio(_:) or splitArrangementLayoutRatio(minHorizontal:idealHorizontal:maxHorizontal:minVertical:idealVertical:maxVertical:) to specify a ratio for a view, or use splitArrangementLayoutSize(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:) to specify a size for a view. Use the splitArrangementFixedLayoutSize(horizontal:vertical:) modifier to have the system calculate the preferred size for the view.
Limit a split arrangement by orientation
You can limit which axes your split arrangement view supports by specifying the axes for the arrangement view style. The following example shows an arrangement that only splits vertically:
ArrangementView {
PrimaryContent()
} secondary: {
SecondaryContent()
}
.arrangementViewStyle(.split.axes(.vertical))Use axes(_:) to set the axes for a split arrangement style. For axes that you don’t include, the arrangement view only displays the primary view.