iPhone Duo vertikale Toolbar: So wandern Bars an den Rand

Bauen Sie Ihre App mit dem iOS 27.1 SDK neu, starten Sie sie auf dem iPhone Duo, und Navigationsleiste und Toolbar befinden sich nicht mehr oben und unten. Sie sitzen jetzt in einer Spalte entlang einer Seite des Bildschirms. Diese vertikale Toolbar auf dem iPhone Duo, von Apple „vertical bar“ genannt, ist die größte sichtbare Veränderung, die die meisten Apps auf dem neuen Gerät erfahren, und das meiste davon passiert automatisch.

Automatisch heißt nicht kostenlos. Eine vertikale Bar ist schmal, hat eine feste Breite und teilt sich ihre Kante mit System-UI. Dieser Leitfaden behandelt, wann Bars vertikal werden, wie Sie Ihre Elemente vorbereiten, wie Sie Überlauf und Reihenfolge steuern und wann Sie die Funktion deaktivieren sollten. Er basiert auf Apples Tech Talk Raise the bar with iPhone Duo, Apples Dokumentation und Beiträgen des iOS-Entwicklers @sarunw. Diese APIs sind neu in iOS 27.0 und 27.1, und Details können sich zwischen Releases ändern.

Was ist die vertikale Bar auf dem iPhone Duo?

Die vertikale Bar ist ein einzelner Streifen entlang einer Seitenkante, der alles enthält, was früher auf oben und unten am Bildschirm verteilt war. Wie @sarunw es formuliert, vereint sie Live Activities, Statusinformationen sowie Navigations- und Toolbar-Elemente, die sich alle den Platz entlang einer Kante teilen.

Apple beschreibt sie als Bereich, in dem sich Navigations-, Toolbar- und Tab-Bar-Steuerelemente eine Region teilen, die um 90 Grad zu einem vertikalen Stapel gedreht ist. Die Statusleiste wechselt passend dazu die Achse, und Blake Crosleys Notizen zu Apples Design-Talk beschreiben, wie sich die Dynamic Island vertikal ausdehnt, wenn Live Activities hinzukommen. Laut Apples Dokumentation fließt der Inhalt neu, wenn die Bar erscheint oder verschwindet, und ein führender oder nachfolgender Safe Area Inset für die Bar wird hinzugefügt oder entfernt. Deshalb sind horizontale Safe Area Insets und Content Margins auf diesem Gerät so wichtig.

Sie aktivieren das, indem Sie mit dem neuesten SDK bauen. Apples Talk Prepare your app for iPhone Duo sagt, dass mit dem iOS 27.1 SDK die Standard-Navigations- und Toolbar-Buttons vertikal unter der Statusleiste angeordnet werden.

Wann wird eine Toolbar auf dem iPhone Duo vertikal?

Ob Sie eine vertikale Bar sehen, hängt vom Display, von der Ausrichtung und davon ab, wo Ihr Container sitzt.

Die Regel hinter den Split-View-Zeilen ist einfach: Eine Bar wird nur vertikal, wenn ihr Container an der Displaykante liegt. Wie @sarunw anmerkt, erhält die Detail-Spalte der Split View eine, und andere Spalten bleiben horizontal. Apples Tech Talk ergänzt, dass Sheets, die mit preferredPlacement platziert werden, auf der rechten Seite eine vertikale Bar erhalten, auf der linken aber nicht. Das innere Display meldet im Hoch- und Querformat dieselben Size Classes, daher ist die Bar eines der wenigen Dinge, die sich beim Drehen ändern. Unser Leitfaden zu Size Classes auf dem iPhone Duo behandelt den Rest.

Welche Container zählen? In SwiftUI kombiniert Apple den Modifier toolbar mit NavigationStack oder NavigationSplitView. In UIKit bevorzugen Sie UINavigationController und UITabBarController, die ihre eigenen Bars verwalten.

NavigationStack {
    ContentView()
        .toolbar {
            ToolbarItem(placement: .bottomBar) {
                Button("Share", systemImage: "square.and.arrow.up") { share() }
            }
        }
}

Nichts in diesem Beispiel ist spezifisch für das iPhone Duo. Mit dem iOS 27.1 SDK gebaut, wandert das Element der unteren Leiste in die vertikale Bar, wo der Kontext es zulässt.

Warum bevorzugt die vertikale Bar Symbole statt Titel?

Eine horizontale Bar hat eine feste Höhe und kann so breit werden, wie ihre Beschriftungen es erfordern. Eine vertikale Bar dreht das um: Apple beschreibt eine feste Breite und eine flexible Elementhöhe. Ein langer Titel hat keinen Platz, also bevorzugt die Bar reine Symbol-Elemente.

Sie wählen nicht für jedes Layout eine eigene Darstellung. Sie geben jedem Element ein Icon und einen Titel, und das System entscheidet. Laut Apples Tech Talk werden Elemente mit Icon vertikal, reine Text-Elemente bleiben horizontal, während Überlaufmenüs sowohl Titel als auch Icon zeigen. Deshalb funktioniert die Abkürzung von @sarunw: Geben Sie Toolbar-Elementen sowohl Icon als auch Titel, dann sind Sie wahrscheinlich bereit für das iPhone Duo. Geben Sie den Titel immer an, auch für ein reines Symbol-Element, denn das System nutzt ihn in Überlaufmenüs und erweiterten Darstellungen.

Eigene Views brauchen mehr Sorgfalt. @sarunw weist darauf hin, dass ein eigenes Panel mit Icon und Titel horizontal funktioniert, auf einer vertikalen Bar die Titel aber ausgeblendet werden müssen, sonst wird das Panel in die feste Breite gequetscht. Apples Environment-Wert toolbarVerticalEdge teilt einer eigenen View mit, wann sie sich in diesem Kontext befindet:

struct FilterPanel: View {
    @Environment(\.toolbarVerticalEdge) private var toolbarVerticalEdge

    var body: some View {
        if toolbarVerticalEdge == nil {
            Label("Filters", systemImage: "line.3.horizontal.decrease")
        } else {
            Image(systemName: "line.3.horizontal.decrease")
                .accessibilityLabel("Filters")
        }
    }
}

Der Wert ist ein HorizontalEdge? und neu in iOS 27.1. Apple dokumentiert ihn als die bevorzugte Kante des Systems für die vertikale Bar, unabhängig davon, ob gerade eine vertikale Bar sichtbar ist, und als nil dort, wo nie eine vertikale Bar verwendet wird. In UIKit lesen Sie traitCollection.verticalBarEdge aus, das in diesen Kontexten einen nicht spezifizierten Wert zurückgibt.

Manche Elemente sollten nie vertikal werden. Ein Warenkorb-Button, der einen Preis anzeigt, transportiert Information in seinem Text. Apples Tech Talk zeigt dafür einen Modifier axisBehavior mit .horizontalOnly und .verticalPreferred als den auf dem Bildschirm genannten Werten.

Wie steuere ich den Überlauf mit visibilityPriority?

Der vertikalen Bar geht der Platz früher aus als einer horizontalen, besonders auf dem äußeren Display im Querformat oder wenn Tastatur oder Bild-in-Bild um Platz konkurrieren. Dann wandern Elemente in ein Überlaufmenü. Standardmäßig, so Apple, laufen Elemente von unten nach oben über.

Um ein wichtiges Element sichtbar zu halten, erhöhen Sie seine Priorität mit .visibilityPriority, das Apple für iOS 27.0 dokumentiert. Elemente mit niedrigerer Priorität wandern zuerst in den Überlauf.

.toolbar {
    ToolbarItem(placement: .bottomBar) {
        Button("Archive", systemImage: "archivebox") { archive() }
    }
    ToolbarItem(placement: .bottomBar) {
        Button("Compose", systemImage: "square.and.pencil") { compose() }
    }
    .visibilityPriority(.high)
}

In diesem Beispiel wandert Archive vor Compose in den Überlauf. UIKit nutzt laut Tech Talk dieselbe Idee mit item.visibilityPriority = .high. Apple empfiehlt, Prioritäten zuerst für Gruppen und dann für Elemente innerhalb der Gruppen festzulegen. Außerdem sollten häufige Aktionen wie Compose sowie Elemente mit Badge oder Status am längsten sichtbar bleiben.

Wenn Sie ein eigenes „Mehr“-Menü haben, integrieren Sie es in das des Systems. Apple zeigt ToolbarOverflowMenu in SwiftUI und navigationItem.additionalOverflowItems in UIKit und bittet darum, das Ellipsen-Symbol für den Überlauf zu reservieren. Wenn eine Tab Bar und eine Toolbar konkurrieren, entscheiden toolbarVerticalCompressionBehavior(_:) in SwiftUI und verticalBarCompressionBehavior in UIKit, welche zuerst komprimiert wird. Standardmäßig ist es die Toolbar.

Wie hefte ich Done an und ordne Elemente mit topBarPinnedTrailing?

Die Reihenfolge ist in einer vertikalen Bar wichtig, weil man oben am leichtesten etwas findet. Apples Empfehlung lautet, den oberen Bereich für die primäre Navigation wie Zurück oder Schließen zu reservieren, gefolgt von prominenten Aktionen wie Done. Navigation Controller fügen Zurück automatisch hinzu. Für einen eigenen Schließen-Button in SwiftUI verwendet Apple ToolbarItem(placement: .cancellationAction).

Für die prominente Aktion verwenden Sie .topBarPinnedTrailing. Apple dokumentiert es als verfügbar ab iOS 27.0, und @sarunw merkt an, dass es das Element nahe am oberen Ende der vertikalen Bar hält.

.toolbar {
    ToolbarItem(placement: .cancellationAction) {
        Button("Cancel", systemImage: "xmark") { dismiss() }
    }
    ToolbarItem(placement: .topBarPinnedTrailing) {
        Button("Done", systemImage: "checkmark") { save() }
    }
}

Angeheftete Elemente bleiben hartnäckig an ihrem Platz: Laut Apples Dokumentation wandern sie nur dann ins Überlaufmenü, wenn die Suche aktiv ist und nicht genug Platz vorhanden ist. Das UIKit-Gegenstück aus dem Tech Talk ist navigationItem.pinnedTrailingGroup, gesetzt auf eine UIBarButtonItemGroup.

Wie deaktiviere ich die vertikale Bar auf dem iPhone Duo?

Nicht jede App braucht eine vertikale Bar. Apples Beispiel ist der Taschenrechner, ein einseitiges, nach unten gewichtetes Layout, in dem horizontaler Platz wertvoll ist. Die Dokumentation nennt außerdem einen Videoplayer im Vollbild mit Toolbar-Steuerelementen. Für solche Fälle fällt SwiftUIs toolbarVerticalBehavior(_:), neu in iOS 27.1, auf die üblichen horizontalen Bars oben und unten zurück.

NavigationStack {
    CalculatorView()
        .toolbarVerticalBehavior(.disabled)
}

final class CalculatorViewController: UIViewController {
    override var preferredVerticalBarBehavior: UIVerticalBarBehavior {
        .disabled
    }
}

Das erste Beispiel ist SwiftUI, das zweite UIKit. Beide stammen aus Apples Tech Talk und Dokumentation, und bei beiden ist der Standard automatisch. In SwiftUI wird das Verhalten vom Container aufgelöst: Ein NavigationStack verwendet seine oberste View, eine TabView den ausgewählten Tab und eine NavigationSplitView die am weitesten nachfolgende Spalte.

Apple bittet darum, dies als stabile Entscheidung zu behandeln. Schalten Sie es nicht um, während Nutzer navigieren oder sich der Zustand einer einzelnen View ändert. Wenn Sie Bars nur auf einem Screen ausblenden möchten, verwenden Sie stattdessen toolbarVisibility(_:for:). Beachten Sie außerdem einen Entwicklerbericht in Apples Forums, wonach ein Element trotz .disabled beim Schließen einer Vollbild-Präsentation kurz in der vertikalen Bar erschien, testen Sie also Übergänge.

Warum verschieben eigene Toolbars oder RTL-Layouts die Bar nicht?

Zwei Verhaltensweisen überraschen Entwickler. Erstens bleiben eigene Bars, wo sie sind. @sarunw merkt an, dass das iPhone Duo die Elemente nicht verschiebt, wenn Sie Ihre eigene UIToolbar, UINavigationBar oder UITabBar bauen: Das System verschiebt nur Bars, die ihm gehören. Apples Tech Talk sagt dasselbe und empfiehlt vom System verwaltete Container. Wenn Sie eine eigene Bar behalten, positionieren Sie sie selbst anhand von verticalBarEdge oder toolbarVerticalEdge plus Safe Area Insets.

Zweitens drehen Rechts-nach-links-Sprachen die Bar nicht um. Die vertikale Bar folgt der Hardware, nicht der Leserichtung, und bleibt bei RTL auf derselben Seite des Geräts; Ihr Inhalt passt sich um sie herum an. Spiegeln Sie eigene UI nicht allein anhand der Layoutrichtung. Lesen Sie die Kante aus, die das System meldet.

Einige kleinere Details aus Apples Talk: Vertikale Bars haben standardmäßig keinen Scroll-Edge-Effekt, sie erhalten einen Hintergrund, wenn „Transparenz reduzieren“ aktiviert ist, und flexible Spacer schrumpfen auf der vertikalen Achse auf null. Fügen Sie für keine der beiden Ausrichtungen zusätzlichen Abstand hinzu.

Die wichtigsten Punkte

• Bauen Sie mit dem iOS 27.1 SDK neu, und System-Bars werden auf dem äußeren Display und im Querformat des inneren Displays vertikal. Im Hochformat des inneren Displays bleiben sie horizontal.
• Nur Bars an der Displaykante werden vertikal: Die Detail-Spalte der Split View erhält eine, andere Spalten nicht.
• Geben Sie jedem Element ein Icon und einen Titel, da die feste Breite der Bar Symbole bevorzugt.
• Verwenden Sie .visibilityPriority(.high) für Aktionen, die den Überlauf überstehen müssen, und .topBarPinnedTrailing für Done.
• Deaktivieren Sie die Bar mit .toolbarVerticalBehavior(.disabled) oder preferredVerticalBarBehavior nur für Layouts wie einen Taschenrechner oder Videoplayer.
• Eigene UIToolbar- und UINavigationBar-Instanzen bewegen sich nicht, und die Bar ignoriert RTL; lesen Sie stattdessen toolbarVerticalEdge oder verticalBarEdge aus.

Sobald Ihre Bars in Ordnung sind, richten Sie den Inhalt an der neuen Kante aus, mit unserem Leitfaden zu Safe Areas und Content Margins auf dem iPhone Duo, und arbeiten Sie dann die vollständige Checkliste zur iPhone Duo Vorbereitung durch. Apps, die das Gerät bereits optimal nutzen, finden Sie unter Built for the fold.