iPhone Duo Tab Bar: Leitfaden zu TabView und NavigationSplitView

Starten Sie eine App mit TabView oder UITabBarController auf dem iPhone Duo, und die Tab Bar auf dem iPhone Duo ist keine Reihe mehr am unteren Bildschirmrand. Sie wandert an die Seite, in dieselbe vertikale Bar, die Ihre Navigations- und Toolbar-Elemente enthält. Auch Split Views ändern sich: In einer NavigationSplitView erhält nur eine Spalte diese vertikale Bar, und ein erweiterter Inspector erhält keine.

Dieser Leitfaden behandelt, was mit Tab Bars, Split-View-Spalten und Inspectors passiert, wie Sie entscheiden, welche Bar bei Platzmangel nachgibt, und wie Sie Inhalte neben Bars anordnen, die nicht mehr symmetrisch sind. Die allgemeinen Regeln der vertikalen Bar, etwa zu Symbolen, Überlauf und Opt-out, finden Sie in unserem Leitfaden zur vertikalen Toolbar auf dem iPhone Duo. Alle Angaben stammen aus Apples Tech Talk Raise the bar with iPhone Duo, Apples Dokumentation, einer DTS-Zusammenfassung in Apples Forums und Beiträgen von @sarunw. Die APIs sind neu in iOS 27.0 und 27.1, und Details können sich zwischen Releases ändern.

Wandert die Tab Bar auf dem iPhone Duo an die Seite?

Ja. Apples Talk Prepare your app for iPhone Duo sagt, dass sich TabView und UITabBarController an alle Haltungen anpassen und dass Tabs auf dem inneren und äußeren Display erscheinen und bei Bedarf vertikal angeordnet werden. Das betrifft dieselben Kontexte wie bei anderen Bars: das äußere Display und das innere Display im Querformat. Im Hochformat des inneren Displays bleiben Bars horizontal.

Apple beschreibt, wie sich Navigations-, Toolbar- und Tab-Bar-Steuerelemente eine Region teilen, und schlägt vor, sich das Layout um 90 Grad zu einem vertikalen Stapel gedreht vorzustellen. Die Beispiele zeigen alle drei Kombinationen: Notizen verwendet eine Toolbar, Uhr eine Tab Bar und Fitness beides. Wie @sarunw es beschreibt, wird die horizontale Reihe der Tabs zu einem vertikalen Stapel im unteren Bereich der Bar. Toolbar-Elemente belegen den oberen Bereich, wo Apples Empfehlungen Zurück, Schließen und prominente Aktionen wie Done vorsehen.

Sie erhalten das, indem Sie mit dem iOS 27.1 SDK bauen und den System-Container verwenden. Die Zusammenfassung eines Apple DTS Engineers zum iPhone Duo Group Lab stellt klar, dass die Anpassung an die Container TabView und UITabBarController gebunden ist, nicht an einzelne Bars. Eine eigene Tab Bar oder eine UITabBar, die Sie selbst platzieren, bewegt sich nicht. Wenn Sie eine behalten müssen, positionieren Sie sie mit dem Environment-Wert toolbarVerticalEdge oder dem Trait verticalBarEdge, wie im Leitfaden zur vertikalen Toolbar erklärt.

Welche Bar-Elemente werden vertikal, und welche bleiben horizontal?

Tabs folgen denselben Regeln wie die übrigen Elemente der Bar. Apples Tech Talk formuliert es so: Elemente mit Icon, etwa die Zurück- und Teilen-Buttons, wechseln auf die vertikale Achse, während reine Text-Elemente wie der Bearbeiten-Button auf der horizontalen Achse bleiben. Die Zusammenfassung von @sarunw lautet genauso: Icon-Elemente wie Zurück und Teilen wandern in die vertikale Bar, reine Text-Elemente wie Edit bleiben horizontal.

.toolbar {
    ToolbarItem(placement: .primaryAction) {
        Button("Share", systemImage: "square.and.arrow.up") { share() }
    }
    ToolbarItem(placement: .secondaryAction) {
        Button("Edit") { isEditing.toggle() }
    }
}

In diesem Beispiel hat Share ein Symbol und kann vertikal werden. Edit hat nur einen Titel und bleibt daher horizontal. Wenn Edit in die vertikale Bar soll, geben Sie ihm ebenfalls ein Symbol; laut DTS-Zusammenfassung stellt das System ein reines Titel-Element nicht vertikal dar. Behalten Sie den Titel bei jedem Element, denn das System zeigt ihn in Überlaufmenüs.

Für Tabs gilt derselbe Rat für jeden Tab: Geben Sie ihm einen Titel und ein systemImage, etwa Tab("Recents", systemImage: "clock"). Badges sind eine gute Möglichkeit, Information ohne zusätzlichen Text zu behalten. Apples Talk wandelt ein Element mit Text und Symbol in ein Symbol mit .badge(7) in SwiftUI oder item.badge = .count(7) in UIKit um.

Wie lege ich fest, ob Tab Bar oder Toolbar zuerst komprimiert wird?

Wenn sich Tab Bar und Toolbar die vertikale Bar teilen, geht einer von beiden zuerst der Platz aus, besonders auf dem äußeren Display im Querformat. Apples Talk beschreibt zwei Standards für zwei Arten von Apps. In einer navigationsorientierten Ansicht wie Podcasts wird zuerst die Toolbar komprimiert, damit die primären Ziele erreichbar bleiben. Das ist der Standard. In einer aufgabenorientierten Ansicht wie der Games-App wird zuerst die Tab Bar komprimiert, damit häufige Aktionen sichtbar bleiben. Die unterlegene Bar klappt in einen Überlauf-Button zusammen.

SwiftUIs toolbarVerticalCompressionBehavior(_:), neu in iOS 27.1, legt die Präferenz pro View fest. In UIKit setzen Sie verticalBarCompressionBehavior am Navigation Item des View Controllers, ebenfalls neu in iOS 27.1.

TabView {
    Tab("Recents", systemImage: "clock") {
        NavigationStack {
            RecentsView()
                .toolbar {
                    Button("Up", systemImage: "chevron.up") { moveUp() }
                    Button("Down", systemImage: "chevron.down") { moveDown() }
                }
                .toolbarVerticalCompressionBehavior(.prefersToolbarItems)
        }
    }
}

navigationItem.verticalBarCompressionBehavior = .prefersBarItems

Das erste Beispiel folgt Apples Dokumentation, die eine Produktivitäts-App wie Dateien als Beispiel für den Vorrang von Toolbar-Elementen nennt. Das zweite ist die UIKit-Form aus dem Tech Talk. Die Werte unterscheiden sich leicht zwischen den Frameworks:

Innerhalb der Toolbar selbst zählt weiterhin die Priorität. Wie @sarunw anmerkt, sollten Sie wichtigen Elementen .visibilityPriority(.high) geben, damit sie bei wenig Platz sichtbar bleiben. Der Leitfaden zur vertikalen Toolbar behandelt Reihenfolge und Überlauf im Detail.

Kann ich auf dem inneren Display eine Sidebar statt einer Tab Bar zeigen?

Ja. Auf dem iPhone zeigt iOS eine Tab Bar, statt sich wie iPadOS in eine Sidebar zu verwandeln. Auf dem inneren Display des iPhone Duo können Sie sich für eine Sidebar mit reichhaltigerer Navigation entscheiden. Verwenden Sie in SwiftUI defaultTabBarPlacement(_:) mit dem Stil sidebarAdaptable. Setzen Sie in UIKit preferredPlacement der Sidebar. Beides ist ab iOS 27.0 verfügbar.

TabView {
    Tab("Home", systemImage: "house") { HomeView() }
    Tab("Favorites", systemImage: "star") { FavoritesView() }
}
.tabViewStyle(.sidebarAdaptable)
.defaultTabBarPlacement(.sidebar)

tabBarController.sidebar.preferredPlacement = .sidebar

Laut Apples Dokumentation gilt defaultTabBarPlacement(_:) dort, wo der Stil entweder zu einer Sidebar oder zu einer Tab Bar aufgelöst wird, etwa auf dem iPhone, und hat unter iPadOS keine Wirkung, wo sich die Bar verwandeln kann. In UIKit wird die automatische Platzierung unter iOS zu einer Tab Bar aufgelöst.

Noch ein Detail zur TabView: Wenn Sie die vertikale Bar mit toolbarVerticalBehavior(.disabled) deaktivieren, löst eine TabView das Verhalten laut Apples Dokumentation über den ausgewählten Tab auf. Halten Sie die Entscheidung über alle Tabs hinweg stabil, damit das Layout beim Wechseln nicht springt.

Welche NavigationSplitView-Spalte erhält auf dem iPhone Duo eine vertikale Bar?

Nur die Detail-Spalte. Apples Regel lautet, dass Toolbar-Elemente nur dann vertikal werden können, wenn ihr Container an der Displaykante liegt. In Split Views nimmt daher nur die Detail-Spalte teil, und Elemente aus anderen Spalten bleiben horizontal. @sarunw fasst es zusammen: Eine Bar wird nur vertikal, wenn ihr Container an der Displaykante sitzt.

Die DTS-Zusammenfassung beschreibt das innere Display genau: Das System stellt Bars für die Sidebar- oder Content-Spalte horizontal dar und für die Detail-Spalte vertikal an der nachfolgenden Kante. Ist das iPhone Duo geschlossen, klappen NavigationSplitView und UISplitViewController zu einer einfachen Stack-Navigation zusammen; geöffnet ordnen sie ihre Spalten nebeneinander oder überlagernd an.

Die Zeile zum äußeren Display gibt Apples Verhalten beim Zusammenklappen und die Inspector-Dokumentation wieder; der Stack folgt dann den Regeln der vertikalen Bar auf dem äußeren Display. Weil die am weitesten nachfolgende Spalte auch toolbarVerticalBehavior für eine Split View bestimmt, setzen Sie ein Opt-out an der View der Detail-Spalte.

NavigationSplitView {
    SidebarList(selection: $selection)
} detail: {
    DetailView(item: selection)
        .toolbar {
            Button("Share", systemImage: "square.and.arrow.up") { share() }
        }
        .inspector(isPresented: $showsInspector) {
            InspectorView(item: selection)
        }
}

Hier befindet sich der Share-Button in der Detail-Spalte, er ist also das Element, das vertikal werden kann. Toolbar-Elemente, die Sie an die Sidebar-Liste hängen, bleiben horizontal.

Warum behält ein erweiterter Inspector seine Elemente horizontal?

Apples Tech Talk sagt, dass Inspectors im erweiterten Zustand keine eigene vertikale Bar erhalten, weil Detail-Spalten bereits eine haben, um Verwirrung zu vermeiden. Die Version von @sarunw: Die Detail-Spalte hat bereits eine vertikale Bar, und eine zweite würde mit ihr konkurrieren.

Die DTS-Zusammenfassung ergänzt, wie das zusammenpasst. Auf dem inneren Display können Sidebar und Inspector nebeneinander bestehen, wenn Sie mit NavigationSplitView bauen und inspector(isPresented:content:) auf die Detail-View anwenden. Der Inspector stimmt sich mit dem nachfolgenden Layout der Detail-Spalte ab, statt eine Bar hinzuzufügen. Laut Apples Inspector-Dokumentation erscheint er in einer horizontal regulären Size Class als nachfolgende Spalte und wird in einer kompakten zu einem Sheet; die DTS-Antworten sagen, dass er auf dem äußeren Display oder bei zusammengeklappter Split View als Sheet erscheint.

Gestalten Sie Inspector-Steuerelemente in der Praxis für eine horizontale Bar, mit Titeln, wo sie helfen. Verlassen Sie sich für Aktionen, die es nur im Inspector gibt, nicht auf die vertikale Bar.

Welche Size Class meldet jede NavigationSplitView-Spalte?

Die Size Classes des Fensters auf dem iPhone Duo sind gut dokumentiert: kompakte Breite auf dem äußeren Display, reguläre Breite und Höhe auf dem inneren Display, unabhängig von der Ausrichtung. Unser Leitfaden zu den Size Classes des iPhone Duo enthält die vollständige Tabelle. Spalten sind eine andere Frage. @sarunw hat eine Übersicht der Size Classes jeder Spalte einer NavigationSplitView auf dem iPhone Duo veröffentlicht, und die wichtigste Erkenntnis daraus ist, dass eine Spalte nicht die Werte des Fensters melden muss.

Lesen Sie Size Classes daher in der Spalte aus, die das Layout übernimmt, nicht auf Fenster- oder Root-Ebene:

struct DetailView: View {
    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
    let item: Item?

    var body: some View {
        if horizontalSizeClass == .regular {
            WideDetailLayout(item: item)
        } else {
            CompactDetailLayout(item: item)
        }
    }
}

Weil der Environment-Wert innerhalb von DetailView gelesen wird, spiegelt er die Traits der Spalte selbst wider. Apples Talk Strike a pose ergänzt ein verwandtes Detail zum inneren Display: In einer Split-View-App wie Erinnerungen hält das System beide Spalten sichtbar, indem es ihre Breite auf eine gleichmäßige Aufteilung von 50/50 anpasst. Wenn Sie Bereiche selbst statt als Spalten bauen, gibt ArrangementView jedem Bereich auf ähnliche Weise eigene Size Classes.

Wie ordne ich Inhalte neben der vertikalen Bar an, ohne Abstände anzunehmen?

Hat die Detail-Spalte auf einer Seite eine vertikale Bar und auf der anderen die Sidebar, sind ihre Ränder an beiden Kanten nicht gleich. Der Rat von @sarunw ist kurz: Gehen Sie nicht von festen Abständen aus, da sie über Geräte und Ausrichtungen hinweg nicht symmetrisch sein müssen; verwenden Sie layoutMarginsGuide. Apples Tech Talk sagt, dass Layout Margins auf dem iPhone Duo wie Safe Areas asymmetrisch sind, sodass Vordergrundinhalte näher an die vertikalen Buttons rücken können, während der gegenüberliegende Rand erhalten bleibt.

NSLayoutConstraint.activate([
    headerView.leadingAnchor.constraint(equalTo: view.layoutMarginsGuide.leadingAnchor),
    headerView.trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor),
    headerView.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor)
])

Wer an layoutMarginsGuide ausrichtet, übernimmt den Rand jeder Kante einzeln, sodass nichts fest auf 16 oder 20 Punkte codiert werden muss. Bars werden außerdem außerhalb der Safe Area angeordnet, und Apple weist darauf hin, dass vertikale Bars führende und nachfolgende Insets liefern statt obere und untere. Das SwiftUI-Gegenstück und alle Regeln zu Insets finden Sie unter Safe Areas und Content Margins auf dem iPhone Duo.

Das Wichtigste in Kürze

• Verwenden Sie TabView oder UITabBarController. Ihre Tabs wandern als Stapel im unteren Bereich in die vertikale Bar; eigene Tab Bars bewegen sich nicht.
• Geben Sie jedem Tab und jedem Toolbar-Element ein Symbol und einen Titel. Icon-Elemente werden vertikal, reine Text-Elemente bleiben horizontal.
• Legen Sie mit toolbarVerticalCompressionBehavior oder verticalBarCompressionBehavior fest, welche Bar zuerst komprimiert wird. Standardmäßig ist es die Toolbar.
• In einer NavigationSplitView erhält nur die Detail-Spalte eine vertikale Bar, und ein erweiterter Inspector behält seine Elemente horizontal.
• Lesen Sie Size Classes innerhalb jeder Spalte aus, und richten Sie Inhalte an layoutMarginsGuide aus, statt gleiche Abstände anzunehmen.

Arbeiten Sie als Nächstes die übrigen Regeln der vertikalen Bar in unserem Leitfaden zur vertikalen Toolbar durch, und sehen Sie dann unter Built for the fold, wie andere Apps und Spiele das Gerät nutzen.