adaptive-layout

Adaptive Layout — iPhone & iPad

Core Principle

Let SwiftUI adapt automatically. Never check UIDevice.current.userInterfaceIdiom or UIScreen.main.bounds for layout decisions. Use size classes and adaptive containers instead.

Navigation

NavigationSplitView (primary pattern for list-detail)

Use NavigationSplitView for ANY list-detail flow. It collapses to NavigationStack on iPhone and shows sidebar+detail on iPad — zero conditional code.

@State private var selectedItem: Item?

NavigationSplitView {
    List(items, selection: $selectedItem) { item in
        NavigationLink(value: item) { ItemRow(item: item) }
    }
    .navigationTitle("Items")
} detail: {
    if let selectedItem {
        ItemDetailView(item: selectedItem)
    } else {
        ContentUnavailableView("Select an Item", systemImage: "doc")
    }
}

Three-column pattern (sidebar categories → list → detail):

NavigationSplitView {
    List(categories, selection: $selectedCategory) { ... }
} content: {
    List(filteredItems, selection: $selectedItem) { ... }
} detail: {
    if let selectedItem { DetailView(item: selectedItem) }
    else { ContentUnavailableView(...) }
}

Use NavigationStack ONLY for purely linear flows (onboarding, checkout).

Size Classes

@Environment(\.horizontalSizeClass) private var horizontalSizeClass

Context	horizontalSizeClass
iPhone portrait	.compact
iPhone landscape	.compact
iPad full-screen	.regular
iPad Split View (narrow)	.compact
iPad Split View (wide)	.regular

Critical: iPad in Split View multitasking can report .compact. This is why UIDevice.current is wrong — always use size classes.

Switching layout axis:

@Environment(\.horizontalSizeClass) private var sizeClass

var body: some View {
    let layout = sizeClass == .compact
        ? AnyLayout(VStackLayout(spacing: 16))
        : AnyLayout(HStackLayout(spacing: 24))
    layout {
        ContentBlockA()
        ContentBlockB()
    }
}