Tabs

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

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

Auf dieser Seite erfahren Sie, wie Sie Haupttabs in Ihrer App mit zugehörigen Bildschirmen und einfacher Navigation anzeigen.

API-Oberfläche

Verwenden Sie die Composeables Tab, PrimaryTabRow und SecondaryTabRow, um Tabs zu implementieren. Das Tab-Element stellt einen einzelnen Tab in der Zeile dar und wird in der Regel in einem PrimaryTabRow (für primäre Indikatoren) oder SecondaryTabRow (für sekundäre Indikatoren) verwendet.

Tab umfasst die folgenden wichtigen Parameter:

  • selected: Bestimmt, 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: Auf dem Tab wird ein Symbol angezeigt. Optional:
  • enabled: Hiermit wird festgelegt, ob der Tab aktiviert ist und mit ihm interagiert werden kann. Ist „false“ festgelegt, wird der Tab deaktiviert angezeigt und reagiert nicht auf Klicks.

Beispiel: Tab-basierte Navigation

Im folgenden Snippet wird eine obere Navigationsleiste mit Tabs implementiert, über die zwischen verschiedenen Bildschirmen in einer App gewechselt werden kann:

@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 Zeile mit Tabs an, wobei jeder Tab einem Destination entspricht.
  • val navController = rememberNavController() erstellt und speichert eine Instanz von NavHostController, die die Navigation innerhalb einer NavHost verwaltet.
  • var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } verwaltet den Status des aktuell ausgewählten Tabs.
    • startDestination.ordinal ruft den numerischen Index (die Position) des Destination.SONGS-Eintrags ab.
  • Wenn auf einen Tab geklickt wird, wird navController.navigate(route = destination.route) aufgerufen, um zum entsprechenden Bildschirm zu wechseln.
  • Das onClick-Lambda des Tab aktualisiert den selectedDestination-Status, um den angeklickten Tab visuell hervorzuheben.
  • Es ruft das AppNavHost-Komposit auf und übergibt navController und startDestination, um den tatsächlichen Inhalt des ausgewählten Bildschirms anzuzeigen.

Ergebnis

Das folgende Bild zeigt das Ergebnis des vorherigen Snippets:

Drei horizontal angeordnete Tabs oben auf dem App-Bildschirm. 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