OverlayArrangementViewStyle
A style that layers the primary view over the secondary view, or places the views side by side on a folded display.
Declaration
nonisolated struct OverlayArrangementViewStyleOverview
An overlay arrangement view places a primary view and a secondary view in a stacked arrangement when the device has a flat display, or next to each other horizontally when someone is holding a folded device in landscape orientation or above and below each other when someone is holding a folded device in portrait orientation. Here’s how the overlay arrangement positions the primary and secondary views:
In a stacked overlay arrangement, the arrangement view places the primary view above the secondary view in the z-axis.
When someone holds a folded iPhone Duo in landscape orientation, the arrangement view places the secondary view in the leading position and the primary view in the trailing position.
When someone holds a folded iPhone Duo in portrait orientation, the arrangement view places the secondary view in the top position and the primary view in the bottom position.
Create an overlay arrangement view by specifying a primary and secondary view, and add the arrangementViewStyle(_:) modifier with overlay, as the following example shows:
ArrangementView {
PlayerControls()
} secondary: {
VideoPlayer()
}
.arrangementViewStyle(.overlay) Limit an overlay arrangement by orientation
You can limit which axes your overlay arrangement view supports by specifying the axes for the arrangement view style. The following example shows an arrangement that only functions vertically:
ArrangementView {
PrimaryContent()
} secondary: {
SecondaryContent()
}
.arrangementViewStyle(.overlay.axes(.vertical))Use axes(_:) to set the axes for an overlay arrangement style. For axes that you don’t include, the arrangement view only displays the primary view.
Customize a folded layout
Add the horizontal overlayArrangementEdge(_:) or vertical overlayArrangementEdge(_:) view modifier to adjust how the overlay arrangement positions the primary and secondary views on a folded iPhone Duo. The following example shows a modifier that causes the primary view to appear in the leading position instead of the trailing position when someone holds a folded iPhone Duo in landscape orientation:
ArrangementView {
PlayerControls()
.overlayArrangementEdge(.leading)
} secondary: {
VideoPlayer()
}
.arrangementViewStyle(.overlay)