Strike a Pose: Adaptive Layouts for iPhone Duo

Source: Strike a pose with adaptive layouts on iPhone Duo (Apple Developer) · 18 min

By Maria (HID) and Harry (UI Frameworks).

Every layout guide says moves things around. This session gives you the tools to do it well — two new mechanisms from Apple: displacement patterns (the design thinking) and Arrangements (the API to build split/overlay layouts). Plus the new Reserved Regions API that makes custom displacement practical.

Design thinking: displaced, not destroyed

"Great design for iPhone Duo hinges on knowing when to adapt." When the device folds, content shouldn't break — it should displace: move, resize, or reorganize into the region that best supports its purpose.

Rules of thumb:

• Move single elements independently; move related elements together to preserve their relationship.
• Don't scatter things — moving an element far from its source weakens the connection (e.g. a photo's context menu should stay near the photo, not jump to the trailing region alone).
• Continuous scrolling content (feeds, articles, lists) doesn't displace — it already adapts via scrolling, and relocating it breaks continuity.
• Let purpose decide the destination. Folded like a book: alerts go to the trailing side (where the experience continues when the device closes). Propped on a table: top region = content visible at a distance, bottom region = tappable controls on a stable surface. Contextual content (like search over its target) should stay contextual.
• Position and size are the common changes, but other visual properties adapt too — the goal is keeping contextual components (action sheets, alerts, menus, popovers) fully visible.

New API #1 — Reserved Regions

Reserved regions are areas your layout must respect (like window controls on iPadOS): the hinge/fold and the cameras (outer camera + the under-display inner FaceTime camera).

• SwiftUI: query from a GeometryProxy (GeometryReader or onGeometryChange) via the new reservedRegion method.
• UIKit: reservedRegion on UIView — read the frame to incorporate it into your layout.
• Two kinds:
• Division regions — divide the area (the fold). Only active when folded; when flat it's inactive with zero width.
• Occlusion regions — smaller frames that occlude (the FaceTime camera). Active only while the camera is on.
• Regions can be active or inactive, returned by default only when active; query inactive ones with includeInactive. Use inactive regions for high-level decisions — e.g. prefer even column counts in a grid whenever a division region exists.

System containers (NavigationStack/SplitView, TabView, List, ScrollView) already handle reserved regions for you — use them and you get a lot free.

New API #2 — Arrangements

Between navigation containers and content views sits a new layout container: the ArrangementView (SwiftUI) / UIArrangementViewController (UIKit). It arranges a primary and secondary view according to rules — effectively logic-driven layouts that adapt across devices, and it's the exact engine Podcasts' Now Playing uses.

Config:

• arrangementViewStyle / preferred arrangement — the split style (default) splits its bounds between primary and secondary; choose the axis with axes method (e.g. always horizontal).
• The overlay arrangement stacks views above/below (good for foreground/background relationships).
• Adapt dynamically: arrangementViewStyle collapses to a single view when it can't fit the axis; read the overlayArrangementZIndex environment (SwiftUI) / Z-index from placement state (UIKit) to switch between collapsed/expanded UIs as the device folds.

Choosing: split = main/detail relationship, like Podcasts' transcript (never obscure either view). Overlay = clear foreground/background relationship, like Accessibility Reader. Follow your existing patterns (HStack/VStack → split; ZStack → overlay).

When NOT to use: Arrangements don't provide navigation — don't nest NavigationSplitViews inside one. And don't put them inside scrollable containers (List/ScrollView).

Action plan for your app

1. Audit centered layouts — can they be two-column? What displacement makes sense?
2. Use system containers/presentations to get fold-avoidance and reserved-region handling free.
3. Replace custom horizontal-split or overlay layouts with ArrangementView.
4. For manually laid-out controls, adopt ReservedRegions to implement your own displacement.

→ Interactions (not layout) are covered in "Leverage multiple displays and scenes on iPhone Duo."