Tabs

Mit Tabs können Sie Gruppen verwandter Inhalte organisieren. Es gibt zwei Arten von Tabs:

  • Primäre Tabs: Sie befinden sich oben im Inhaltsbereich unter einer oberen App-Leiste. Sie zeigen die wichtigsten Inhaltsziele an und sollten verwendet werden, wenn nur ein Satz von Tabs erforderlich ist.
  • Sekundäre Tabs: Werden in einem Inhaltsbereich verwendet, um zusammengehörige Inhalte weiter zu trennen und eine Hierarchie zu schaffen. Sie sind erforderlich, wenn für einen Bildschirm mehr als eine Tab-Ebene benötigt wird.
Es werden drei Haupttabs mit den zugehörigen Symbolen angezeigt: „Flüge“, „Reisen“ und „Entdecken“. Es werden zwei untergeordnete Tabs („Übersicht“, „Spezifikationen“) ohne zugehörige Symbole angezeigt.
Abbildung 1: Primäre Tabs (1) und sekundäre Tabs (2).

Auf dieser Seite wird beschrieben, wie Sie primäre Tabs in Ihrer App mit zugehörigen Bildschirmen und grundlegender Navigation anzeigen.

API-Oberfläche

Verwenden Sie die Composables Tab, PrimaryTabRow und SecondaryTabRow, um Tabs zu implementieren. Die zusammensetzbare Funktion Tab stellt einen einzelnen Tab in der Zeile dar und wird in der Regel in einem PrimaryTabRow (für Tabs mit primären Indikatoren) oder SecondaryTabRow (für Tabs mit sekundären Indikatoren) verwendet.

Tab umfasst die folgenden wichtigen Parameter:

  • selected: Gibt an, ob der aktuelle Tab visuell hervorgehoben wird.
  • onClick(): Eine erforderliche Lambda-Funktion, die die Aktion definiert, die ausgeführt werden soll, wenn der Nutzer auf den Tab klickt. Hier werden in der Regel Navigationsereignisse verarbeitet, der Status des ausgewählten Tabs aktualisiert oder entsprechende Inhalte geladen.
  • text: Zeigt Text auf dem Tab an. Optional.
  • icon zeigt ein Symbol auf dem Tab an. Optional.
  • enabled: Steuert, ob der Tab aktiviert ist und mit ihm interagiert werden kann. Wenn der Wert auf „false“ gesetzt ist, wird der Tab deaktiviert angezeigt und reagiert nicht auf Klicks.

Beispiel: Tab-basierte Navigation

Im folgenden Snippet wird eine obere Navigationsleiste mit Tabs zum Navigieren zwischen verschiedenen Bildschirmen in einer App implementiert:

@Composable
fun NavigationTabExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(modifier = modifier) { contentPadding ->
        PrimaryTabRow(selectedTabIndex = selectedDestination, modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                Tab(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    text = {
                        Text(
                            text = destination.label,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis
                        )
                    }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}
Navigation.kt

Wichtige Fakten

  • PrimaryTabRow zeigt eine horizontale Reihe von Tabs an, wobei jeder Tab einem Destination entspricht.
  • val navController = rememberNavController() erstellt und speichert eine Instanz von NavHostController, die die Navigation in einem NavHost verwaltet.
  • var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } verwaltet den Status des ausgewählten Tabs.
    • startDestination.ordinal ruft den numerischen Index (die Position) des Destination.SONGS-Enum-Eintrags ab.
  • Wenn Sie auf einen Tab klicken, werden die onClick-Lambda-AufrufenavController.navigate(route = destination.route) ausgeführt, um zum entsprechenden Bildschirm zu wechseln.
  • Das onClick-Lambda der Tab aktualisiert den selectedDestination-Status, um den angeklickten Tab visuell hervorzuheben.
  • Dazu wird die kombinierbare Funktion AppNavHost aufgerufen und navController und startDestination übergeben, um den tatsächlichen Inhalt des ausgewählten Bildschirms anzuzeigen.

Ergebnis

Das folgende Bild zeigt das Ergebnis des vorherigen Snippets:

Drei Tabs, die horizontal oben auf dem App-Bildschirm angeordnet sind. Die Tabs sind „Songs“, „Album“ und „Playlist“. Der Tab „Songs“ ist ausgewählt und unterstrichen.
Abbildung 2: Drei horizontal angeordnete Tabs: „Songs“, „Album“ und „Playlist“.

Zusätzliche Ressourcen