SwiftUI Toolbar in iOS 26: Liquid-Glass-Gruppen, Spacer und Titel

Kompilieren Sie eine App mit dem iOS 26 SDK neu, und die Toolbar sieht anders aus, bevor Sie eine Zeile ändern. Buttons schweben auf Liquid Glass, Nachbarn teilen sich eine Kapsel, das Suchfeld rutscht an den unteren Bildschirmrand, und der Inline-Titel bleibt nicht immer zentriert. Dieser Leitfaden erklärt, wie die SwiftUI-Toolbar in iOS 26 entscheidet, was zusammengehört, und mit welchen APIs Sie die Kontrolle übernehmen.

Er basiert auf Apples WWDC25-Sessions Build a SwiftUI app with the new design und What's new in SwiftUI, Apples Dokumentation und Beiträgen des iOS-Entwicklers @sarunw. Die APIs hier sind neu in iOS 26.0, sofern nicht anders angegeben, und manches Verhalten hat sich zwischen Point-Releases verschoben, prüfen Sie es also auf den Versionen, die Sie unterstützen. Der letzte Abschnitt behandelt, was mit diesen Toolbars auf dem iPhone Duo passiert.

Wie gruppiert iOS 26 Toolbar-Elemente in Liquid Glass?

In iOS 26 sitzen Toolbar-Elemente auf einer Liquid-Glass-Fläche, die über Ihrem Inhalt schwebt und sich an das anpasst, was darunter liegt. Apples Session formuliert die zentrale Regel klar: Toolbar-Elemente werden automatisch gruppiert. Benachbarte Elemente mit derselben Platzierung teilen sich eine Kapsel, während der Zurück-Button des Systems seine eigene behält.

Gruppierung ist meist erwünscht, weil sie die Bar ruhig hält. Problematisch wird es, wenn nicht zusammengehörige Aktionen in derselben Kapsel landen. Ein Entwickler in Apples Forums stellte fest, dass zwei führende Elemente immer verschmolzen, selbst mit unterschiedlichen Platzierungen, bis ein Spacer sie trennte.

Apple hat auch das Aussehen dessen geändert, was im Glas sitzt. Toolbar-Icons sind an mehr Stellen monochrom, was laut Apple visuelles Rauschen reduziert. Sie können weiterhin einfärben, doch Apples Rat lautet, das zu nutzen, um Bedeutung zu vermitteln, etwa einen Call to Action oder nächsten Schritt, nicht bloß als visuellen Effekt. Die Session bittet außerdem darum, eigene Hintergründe oder Abdunklungen hinter Bar-Elementen zu entfernen, da sie den neuen Scroll Edge Effect stören. Dieser Effekt ändert sich in iOS 27 erneut, was unser Leitfaden zum Scroll Edge Effect in SwiftUI behandelt.

Warum erhält ein hervorgehobener Button eine eigene Kapsel?

Eine primäre Aktion wie Done oder Save sollte sich von den Buttons um sie herum abheben. In iOS 26 erreichen Sie das mit den neuen Glas-Button-Stilen. Apples Session stellt sie als Stile vor, die Liquid Glass auf jeden Button Ihrer App bringen: .glass für einen Standard-Button und .glassProminent für einen hervorgehobenen.

In einer Toolbar ändert ein hervorgehobener Button auch die Gruppierung. Wie @sarunw es formuliert, teilt ein hervorgehobener Button in einer iOS-26-Toolbar nie eine Glaskapsel. Fügen Sie .buttonStyle(.glassProminent) hinzu, und der Button wandert aus seiner Gruppe in einen eigenen eingefärbten Kreis.

.toolbar {
    ToolbarItemGroup(placement: .topBarTrailing) {
        Button("Share", systemImage: "square.and.arrow.up") { share() }
        Button("Done", systemImage: "checkmark") { save() }
            .buttonStyle(.glassProminent)
    }
}

In diesem Beispiel behält Share einen normalen Glashintergrund, und Done steht abgesetzt in einer eigenen eingefärbten Form. Fügen Sie .tint(_:) hinzu, um die Farbe zu wählen. Apples Session What's new in SwiftUI zeigt dieselbe Idee mit .buttonStyle(.borderedProminent) und .tint(.pink) an einer primären Aktion.

Verwenden Sie das für eine Aktion pro Bar. Wenn alles hervorgehoben ist, ist nichts hervorgehoben. Beachten Sie außerdem einen Forenbericht, wonach .glassProminent-Toolbar-Buttons im Release Candidate von iOS 26.1 nach einer Navigation etwa eine Sekunde lang ohne Tönung erschienen. Ein Apple-Ingenieur schrieb, das klinge nach einem Bug, prüfen Sie also die Releases, die Sie unterstützen.

Wie trenne ich Toolbar-Gruppen mit ToolbarSpacer?

Wenn die automatische Gruppierung die falschen Elemente zusammenfasst, verwenden Sie ToolbarSpacer. Apple beschreibt ihn als Element, das visuelle Unterbrechungen zwischen Elementen in der Toolbar erzeugt. Sein Initializer ist init(_ sizing: SpacerSizing = .flexible, placement: ToolbarItemPlacement = .automatic), verfügbar ab iOS 26.0.

Apples Beispiel-App Landmarks verwendet feste Spacer, um ihre Detail-Toolbar in drei Abschnitte zu teilen: Teilen, dann Favorit und Sammlungen, dann den Inspector-Schalter.

.toolbar {
    ToolbarItem {
        ShareLink(item: landmark, preview: landmark.sharePreview)
    }
    ToolbarSpacer(.fixed)
    ToolbarItemGroup {
        LandmarkFavoriteButton(landmark: landmark)
        LandmarkCollectionsMenu(landmark: landmark)
    }
    ToolbarSpacer(.fixed)
    ToolbarItem {
        Button("Info", systemImage: "info") { showInspector() }
    }
}

Dieses Beispiel ist eine gekürzte Fassung von Apples Code. Die beiden zusammengehörigen Buttons teilen sich eine Kapsel, während Share und Info jeweils eine eigene erhalten. Geben Sie dem Spacer dieselbe Platzierung wie den Elementen um ihn herum, zum Beispiel ToolbarSpacer(.fixed, placement: .topBarLeading). Ohne Angabe verwendet der Spacer die Platzierung .automatic und landet womöglich nicht zwischen den gemeinten Elementen, und genau das wurde dem Entwickler im Forum zum Verhängnis.

Für ein einzelnes Element, das gar nicht auf Glas sitzen soll, etwa ein Profilbild, zeigt Apples Session .sharedBackgroundVisibility(.hidden) am ToolbarItem. Das trennt das Element in eine eigene Gruppe ohne Hintergrund.

Wie gebe ich dem Suchfeld in der unteren Leiste eine eigene Kapsel?

Auf dem iPhone verlegt iOS 26 die Suche an den unteren Bildschirmrand. Apples Session sagt, dass die Suche in der Toolbar das Feld unten auf dem Bildschirm platziert, in bequemer Reichweite. Um festzulegen, wo das Feld zwischen Ihren eigenen Elementen der unteren Leiste sitzt, platzieren Sie ein DefaultToolbarItem vom Typ Suche.

Der Haken: Auch das Suchfeld ist ein Toolbar-Element. Wie @sarunw anmerkt, verschmilzt es in iOS 26 mit den Buttons daneben. Seine Lösung ist ein fester ToolbarSpacer auf jeder Seite, damit es eine eigene Kapsel erhält:

NavigationStack {
    NoteList()
        .toolbar {
            ToolbarItem(placement: .bottomBar) {
                Button("Filter", systemImage: "line.3.horizontal.decrease") { }
            }
            ToolbarSpacer(.fixed, placement: .bottomBar)
            DefaultToolbarItem(kind: .search, placement: .bottomBar)
            ToolbarSpacer(.fixed, placement: .bottomBar)
            ToolbarItem(placement: .bottomBar) {
                Button("New Note", systemImage: "square.and.pencil") { }
            }
        }
}
.searchable(text: $searchText)

Filter, Suche und New Note sitzen jetzt in drei getrennten Kapseln. Apples Beispiel im Stil von Mail in derselben Session verwendet stattdessen einen flexiblen Spacer vor der Suche, der den Filter an die führende Kante schiebt, und einen festen Spacer zwischen Suche und Verfassen. Wählen Sie die Variante, die dazu passt, wie eng die Elemente zusammengehören.

Je nach Gerätegröße und Anzahl der Buttons kann das System das Feld zu einem Button minimieren. Wenn die Suche in Ihrer App keine zentrale Rolle spielt, aktivieren Sie das mit .searchToolbarBehavior(.minimize). Natalia Panferovas Artikel zur Suche in iOS 26 verpackt diese Aufrufe in if #available(iOS 26.0, *), damit derselbe Code auch für ältere Targets baut.

Warum ist mein Inline-Navigationstitel an die führende Kante gewandert?

Eine weitere Überraschung in iOS 26 ist der Inline-Titel. Unter iOS 18 saß er in der Mitte der Navigationsleiste. In iOS 26 bleibt ein Inline-Titel, wie @sarunw zeigt, nur zentriert, wenn er passt. Fügen Sie ein weiteres Toolbar-Element hinzu, und der Titel wandert an die führende Kante.

Entwickler sind aus beiden Richtungen darauf gestoßen. Ein UIKit-Entwickler in Apples Forums sah ein Segmented Control in der Title View zentriert, solange es keine Bar Button Items gab, und linksbündig, sobald ein einziges nachfolgendes Element erschien. Apples Antwort bat nur um einen Bug-Report, eine offizielle Aussage zur genauen Regel gibt es also nicht.

Der praktische Rat lautet, für beide Positionen zu gestalten:

• Halten Sie Titel kurz, damit sie öfter in die Mitte passen.
• Richten Sie Inhalt nicht an einem zentrierten Titel aus. Er bleibt womöglich nicht dort.
• Zählen Sie Ihre Elemente. Eine selten genutzte Aktion in ein Menu zu verschieben, schafft Platz in der Bar.

Was hat sich in iOS 26 bei Segmented Pickern und Slidern geändert?

Toolbars sind nicht die einzigen Steuerelemente, die sich geändert haben. Apples Session sagt, dass Toggles, Segmented Picker und Slider sich während der Interaktion in Liquid Glass verwandeln. Zwei Details lohnen sich zu kennen, weil sie ohne Codeänderung kommen.

Segmented Picker. @sarunw beschreibt den Segmented Picker von SwiftUI in iOS 26 als aufgeräumter, mit einem runderen ausgewählten Segment, ohne Trennlinien und mit demselben Code. Ein Standard-Picker wie in Apples Beispiel übernimmt den neuen Look von selbst:

Picker("View", selection: $selection) {
    Text("Map").tag(ViewMode.map)
    Text("List").tag(ViewMode.list)
}
.pickerStyle(.segmented)

Slider mit Schritten. Slider unterstützen jetzt Markierungen, und laut Apple erscheinen sie automatisch, wenn ein Slider mit einem step-Parameter initialisiert wird. Das Beispiel von @sarunw: step: 1 fügt für jeden Wert eine Markierung hinzu.

Slider(value: $rating, in: 1...5, step: 1) {
    Text("Rating")
}

Slider(value: $speed, in: 0.5...2, step: 0.25, neutralValue: 1) {
    Text("Playback speed")
}

Der erste Slider zeigt fünf Markierungen. Der zweite verwendet neutralValue, das Apple in iOS 26 ergänzt, damit die Füllung der Spur bei einem mittleren Wert beginnt, etwa der normalen Wiedergabegeschwindigkeit. Derselbe Initializer nimmt außerdem enabledBounds entgegen, um den wählbaren Bereich zu begrenzen, und eine tick-Closure, die einen SliderTick zurückgibt, um Markierungen selbst zu platzieren. Hat ein Slider viele Schritte, sind es womöglich mehr Markierungen als gewünscht, sehen Sie ihn sich also vor dem Release an.

Wie verhalten sich iOS-26-Toolbars in der vertikalen Bar des iPhone Duo?

Auf dem iPhone Duo erhalten Apps, die mit dem iOS 27.1 SDK gebaut sind, auf dem äußeren Display und auf dem inneren Display im Querformat eine vertikale Bar: Navigations- und Toolbar-Elemente wandern in eine Spalte entlang einer Seite. Unser Leitfaden zur vertikalen Toolbar auf dem iPhone Duo behandelt das ausführlich. So übertragen sich die Toolbar-APIs aus iOS 26, basierend auf Apples Tech Talk Raise the bar with iPhone Duo.

• Spacer. Laut Apple haben flexible Spacer auf der vertikalen Achse standardmäßig keine Größe, feste Spacer behalten aber ihre Mindestgröße. Ein flexibler Spacer, der Gruppen horizontal auseinanderschiebt, bewirkt vertikal nichts, während ein fester Spacer Gruppen weiterhin trennt.
• Gruppierung. Wenn obere und untere Bar zu einer vertikalen Bar werden, behalten die verbleibenden Elemente laut Apple ihre ursprüngliche Gruppierung, wobei ein Spacer trennt, was von oben und was von unten kam.
• Kein zusätzlicher Abstand. Apples Rat lautet, dass Ihre App keinen zusätzlichen Abstand erzeugen sollte, egal ob eine Bar horizontal oder vertikal ist. Fügen Sie keinen Innenabstand in Elemente ein, um eine Lücke vorzutäuschen; verwenden Sie ToolbarSpacer.
• Icons und Titel. Wie @sarunw anmerkt, wandern Elemente mit Icon in die vertikale Bar, während reine Text-Elemente horizontal bleiben. Geben Sie Ihrem hervorgehobenen Done-Button neben einem Titel auch ein systemImage.
• Wohin Done gehört. Apple bittet darum, prominente Aktionen wie Done mit ToolbarItem(placement: .topBarPinnedTrailing), neu in iOS 27.0, nahe am oberen Ende zu platzieren. Laut Apples Dokumentation wandern angeheftete Elemente nur dann ins Überlaufmenü, wenn die Suche aktiv ist und nicht genug Platz vorhanden ist.

Der Tech Talk behandelt nicht, wie .glassProminent oder das Suchfeld der unteren Leiste in einer vertikalen Bar aussehen, prüfen Sie das also im iPhone-Duo-Simulator. Auch Tab Bars wandern an die Seite, was unser Leitfaden zu Tab Bars und NavigationSplitView auf dem iPhone Duo erklärt.

Die wichtigsten Punkte

• iOS 26 fasst benachbarte Toolbar-Elemente automatisch in gemeinsamen Liquid-Glass-Kapseln zusammen.
• .buttonStyle(.glassProminent) holt einen Button aus seiner Gruppe in eine eigene eingefärbte Form. Verwenden Sie das für eine primäre Aktion.
• ToolbarSpacer(.fixed) trennt Gruppen, und ToolbarSpacer(.flexible) schiebt sie auseinander. Geben Sie Spacern dieselbe Platzierung wie ihren Nachbarn.
• Umgeben Sie DefaultToolbarItem(kind: .search, placement: .bottomBar) mit festen Spacern, damit die Suche eine eigene Kapsel erhält.
• Inline-Titel bleiben nur zentriert, wenn sie passen, gestalten Sie also auch für einen Titel an der führenden Kante.
• In der vertikalen Bar des iPhone Duo schrumpfen flexible Spacer auf null, feste Spacer bleiben, und Gruppen bleiben erhalten.

Sehen Sie als Nächstes in unserem Leitfaden zur vertikalen Toolbar auf dem iPhone Duo, wie diese Bars auf dem neuen Gerät an die Seite wandern, und arbeiten Sie dann die Checkliste zur iPhone Duo Vorbereitung durch. Apps, die mit dem Scharnier etwas Echtes anstellen, finden Sie unter Built for the fold.