Tabs

Das Problem: Mehrere gleichwertige Bereiche

Viele Apps haben mehrere gleichwertige Bereiche, zwischen denen der Nutzer ständig wechselt. Die Musik-App hat „Home“, „Neu“, „Radio“, „Mediathek“ und „Suche“. Die Uhr-App hat „Weltuhr“, „Wecker“, „Stoppuhr“ und „Timer“.

Diese Bereiche hängen nicht hierarchisch voneinander ab. Der Wecker ist keine Unterseite der Weltuhr. Mit einem NavigationStack lassen sie sich deshalb nicht sinnvoll abbilden. Dafür gibt es die Tab-Leiste am unteren Bildschirmrand: Jeder Bereich ist immer genau einen Tipp entfernt.

Eine einfache Tab-Leiste

struct ContentView: View {
    var body: some View {
        TabView {
            Tab("Start", systemImage: "house") {
                Text("Startseite")
            }

            Tab("Favoriten", systemImage: "star") {
                Text("Deine Favoriten")
            }

            Tab("Einstellungen", systemImage: "gear") {
                Text("Einstellungen")
            }
        }
    }
}

• TabView ist der Container für alle Tabs.
• Jeder Tab bekommt einen Titel, ein SF Symbol und seinen Inhalt.
• SwiftUI kümmert sich um alles andere: die Leiste, das Hervorheben, das Umschalten.

Apple empfiehlt drei bis fünf Tabs auf dem iPhone. Bei mehr wird es eng.

Jeder Tab mit eigenem NavigationStack

In echten Apps hat jeder Tab seine eigene Navigation. Wichtig ist dabei die Reihenfolge: Der NavigationStack gehört in den Tab, nicht um die TabView.

TabView {
    Tab("Rezepte", systemImage: "fork.knife") {
        NavigationStack {
            RecipeListView()
        }
    }

    Tab("Favoriten", systemImage: "heart") {
        NavigationStack {
            FavoritesView()
        }
    }
}

So hat jeder Tab seinen eigenen Verlauf. Navigierst du im Rezepte-Tab drei Ebenen tief, wechselst zu den Favoriten und wieder zurück, bist du immer noch auf der dritten Ebene. Genau so verhalten sich Apples Apps.

NavigationStack {
    TabView { ... }   // ⚠️
}

Den Tab per Code wechseln

Manchmal soll der Code den Tab wechseln: Nach dem Hinzufügen eines Favoriten springt die App zum Favoriten-Tab. Oder ein Deep Link öffnet einen bestimmten Tab (Lektion 3.22).

Dafür bekommt jeder Tab einen Wert, und die TabView eine Auswahl:

enum AppTab: Hashable {
    case recipes, favorites, settings
}

struct ContentView: View {
    @State private var selection: AppTab = .recipes

    var body: some View {
        TabView(selection: $selection) {
            Tab("Rezepte", systemImage: "fork.knife", value: AppTab.recipes) {
                NavigationStack {
                    RecipeListView()
                }
            }

            Tab("Favoriten", systemImage: "heart", value: AppTab.favorites) {
                NavigationStack {
                    FavoritesView()
                }
            }

            Tab("Einstellungen", systemImage: "gear", value: AppTab.settings) {
                SettingsView(onReset: {
                    selection = .recipes
                })
            }
        }
    }
}

• value: gibt jedem Tab eine Kennung, hier aus einem Enum.
• TabView(selection: $selection) verbindet die Auswahl mit einem State.
• selection = .recipes wechselt den Tab.

Das ist dasselbe Prinzip wie beim Picker (Lektion 2.13) und beim Navigationspfad (Lektion 3.20): Der Zustand bestimmt, was angezeigt wird.

Badges

Eine kleine rote Zahl am Tab zeigt, dass es dort etwas Neues gibt:

Tab("Favoriten", systemImage: "heart", value: AppTab.favorites) {
    NavigationStack {
        FavoritesView()
    }
}
.badge(favorites.count)

.badge am Tab zeigt eine Zahl. Bei 0 verschwindet das Badge automatisch. Auch Text ist möglich: .badge("Neu").

Die Suche als eigener Tab

Viele Apps haben einen eigenen Such-Tab, oft ganz rechts und optisch etwas abgesetzt. Dafür gibt es eine besondere Rolle:

TabView {
    Tab("Rezepte", systemImage: "fork.knife") {
        NavigationStack { RecipeListView() }
    }

    Tab("Favoriten", systemImage: "heart") {
        NavigationStack { FavoritesView() }
    }

    Tab(role: .search) {
        NavigationStack {
            SearchView()
        }
    }
}

Tab(role: .search) braucht weder Titel noch Symbol: SwiftUI verwendet die Lupe und den passenden Titel automatisch. In aktuellen iOS-Versionen wird der Such-Tab außerdem vom Rest der Leiste abgesetzt dargestellt. Innerhalb der SearchView verwendest du wie gewohnt .searchable (Lektion 3.12).

Tabs auf dem iPad: Seitenleiste

Auf dem iPad kann eine Tab-Leiste zur Seitenleiste werden, mit Platz für viel mehr Einträge und Gruppen. Das schaltest du mit einem Stil ein:

TabView {
    Tab("Start", systemImage: "house") { HomeView() }

    TabSection("Sammlungen") {
        Tab("Favoriten", systemImage: "heart") { FavoritesView() }
        Tab("Zuletzt gekocht", systemImage: "clock") { RecentView() }
    }
}
.tabViewStyle(.sidebarAdaptable)

• .tabViewStyle(.sidebarAdaptable): Auf dem iPad kann der Nutzer zwischen Tab-Leiste oben und Seitenleiste umschalten. Auf dem iPhone bleibt es eine normale Tab-Leiste.
• TabSection gruppiert Tabs unter einer Überschrift in der Seitenleiste.

Weil der Kurs auf das iPhone ausgerichtet ist, reicht es, wenn du weißt, dass es das gibt. Deine App sieht dann auf dem iPad ohne viel Mehraufwand gut aus.

Seitenweises Blättern mit TabView

TabView hat noch eine ganz andere Verwendung: Mit dem Stil .page wird es zu einem Blätter-Container, wie bei einer Einführung beim ersten Start einer App:

TabView {
    OnboardingPage(title: "Willkommen", image: "hand.wave")
    OnboardingPage(title: "Rezepte entdecken", image: "magnifyingglass")
    OnboardingPage(title: "Favoriten speichern", image: "heart")
}
.tabViewStyle(.page)
.indexViewStyle(.page(backgroundDisplayMode: .always))

Der Nutzer wischt seitwärts durch die Seiten, und unten erscheinen Punkte. Mit .indexViewStyle(.page(backgroundDisplayMode: .always)) bekommen die Punkte einen Hintergrund, damit sie auch auf hellem Grund sichtbar sind. Dafür brauchst du keine Tabs, sondern einfach Views.

Typische Fehler

Tab-Leiste verschwindet beim Navigieren

Der NavigationStack liegt um die TabView statt in jedem Tab. Pack einen eigenen NavigationStack in jeden Tab.

Auswahl wechselt nicht

Die Werte der Tabs und der Typ der Auswahl passen nicht zusammen, etwa value: "recipes" bei einer Auswahl vom Typ AppTab. Nimm überall denselben Typ, am besten ein Enum.

Zu viele Tabs

Bei mehr als fünf Tabs zeigt iOS einen Tab „Mehr“, hinter dem der Rest versteckt ist. Das ist selten eine gute Nutzererfahrung. Überleg, ob sich Bereiche zusammenlegen lassen.

Zustand geht beim Tab-Wechsel verloren

Jeder Tab behält seinen Zustand, solange er in der TabView steht. Erzeugst du aber Tabs bedingt mit if, verschwindet ihr Zustand beim Ausblenden. Halte wichtige Daten in einem Objekt außerhalb der Tabs.

FAQ

Übungen

enum HomeTab: Hashable { case today, history, profile }

struct HomeTabs: View {
    @State private var selection: HomeTab = .today
    @State private var done = 0

    var body: some View {
        TabView(selection: $selection) {
            Tab("Heute", systemImage: "sun.max", value: HomeTab.today) {
                NavigationStack {
                    VStack(spacing: 16) {
                        Button("Aufgabe erledigt") { done += 1 }
                            .buttonStyle(.borderedProminent)
                        Button("Verlauf ansehen") { selection = .history }
                    }
                    .navigationTitle("Heute")
                }
            }

            Tab("Verlauf", systemImage: "clock", value: HomeTab.history) {
                NavigationStack {
                    Text("\(done) erledigt")
                        .navigationTitle("Verlauf")
                }
            }
            .badge(done)

            Tab("Profil", systemImage: "person", value: HomeTab.profile) {
                NavigationStack {
                    Text("Profil").navigationTitle("Profil")
                }
            }
        }
    }
}

Zusammenfassung

• TabView mit Tab baut eine Tab-Leiste für gleichwertige Bereiche, ideal drei bis fünf.
• Jeder Tab bekommt seinen eigenen NavigationStack, nicht umgekehrt.
• TabView(selection:) und Tab(value:) machen den aktiven Tab zum Zustand, den Code ändern kann.
• .badge zeigt Zahlen oder Text am Tab.
• Tab(role: .search) für einen eigenen Such-Tab.
• .tabViewStyle(.sidebarAdaptable) und TabSection für eine Seitenleiste auf dem iPad.
• .tabViewStyle(.page) macht aus der TabView einen Blätter-Container für Onboardings.

Spickzettel

enum AppTab: Hashable { case home, favorites }
@State private var selection: AppTab = .home

TabView(selection: $selection) {
    Tab("Start", systemImage: "house", value: AppTab.home) {
        NavigationStack { HomeView() }
    }
    Tab("Favoriten", systemImage: "heart", value: AppTab.favorites) {
        NavigationStack { FavoritesView() }
    }
    .badge(count)

    Tab(role: .search) {
        NavigationStack { SearchView() }
    }
}

selection = .favorites        // Tab per Code wechseln

TabView { PageA(); PageB() }
    .tabViewStyle(.page)      // Blättern