Navigationsleiste

Über die Navigationsleiste können Nutzer zwischen Zielen in einer App wechseln. Navigationsleisten sollten für Folgendes verwendet werden:

  • Drei bis fünf gleich wichtige Ziele
  • Kompakte Fenstergrößen
  • Konsistente Ziele auf allen App-Bildschirmen
Eine Navigationsleiste mit vier Zielen. Jedes Ziel hat einen Platzhalternamen namens „Label“. Das ausgewählte Ziel wird mit einem Kreissymbol und die anderen Ziele mit Dreiecken angezeigt.
Abbildung 1. Eine Navigationsleiste mit vier Zielen.

Auf dieser Seite erfahren Sie, wie Sie in Ihrer App eine Navigationsleiste mit zugehörigen Bildschirmen und grundlegender Navigation anzeigen.

API-Oberfläche

Verwenden Sie die kombinierbaren Funktionen NavigationBar und NavigationBarItem, um die Logik für das Wechseln des Ziels zu implementieren. Jedes NavigationBarItem steht für ein einzelnes Ziel.

NavigationBarItem enthält die folgenden Schlüsselparameter:

  • selected gibt an, ob das aktuelle Element visuell hervorgehoben wird.
  • onClick(): Definiert die Aktion, die ausgeführt werden soll, wenn der Nutzer auf das Element klickt. Hier gehört die Logik für die Verarbeitung von Navigationsereignissen, die Aktualisierung des Status des ausgewählten Elements oder das Laden entsprechender Inhalte hin.
  • label zeigt Text innerhalb des Elements an. Optional.
  • icon zeigt ein Symbol im Element an. Optional.

Beispiel: Untere Navigationsleiste

Im folgenden Snippet wird eine untere Navigationsleiste mit Elementen implementiert, damit Nutzer zwischen verschiedenen Bildschirmen in einer App wechseln können:

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

    Scaffold(
        modifier = modifier,
        bottomBar = {
            NavigationBar(windowInsets = NavigationBarDefaults.windowInsets) {
                Destination.entries.forEachIndexed { index, destination ->
                    NavigationBarItem(
                        selected = selectedDestination == index,
                        onClick = {
                            navController.navigate(route = destination.route)
                            selectedDestination = index
                        },
                        icon = {
                            Icon(
                                destination.icon,
                                contentDescription = destination.contentDescription
                            )
                        },
                        label = { Text(destination.label) }
                    )
                }
            }
        }
    ) { contentPadding ->
        AppNavHost(navController, startDestination, modifier = Modifier.padding(contentPadding))
    }
}

Wichtige Fakten

  • NavigationBar zeigt eine Sammlung von Elementen an, wobei jedes Element einem Destination entspricht.
  • val navController = rememberNavController() erstellt eine Instanz von NavHostController und speichert sie. Diese Instanz verwaltet die Navigation innerhalb eines NavHost.
  • var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } verwaltet den Status des ausgewählten Elements.
    • startDestination.ordinal ruft den numerischen Index (Position) des Enum-Eintrags Destination.SONGS ab.
  • Wenn auf ein Element geklickt wird, wird navController.navigate(route = destination.route) aufgerufen, um zum entsprechenden Bildschirm zu gelangen.
  • Die Lambda-Funktion onClick von NavigationBarItem aktualisiert den Status selectedDestination, um das angeklickte Element visuell hervorzuheben.
  • Die Navigationslogik ruft die kombinierbare Funktion AppNavHost auf und übergibt navController und startDestination, um den tatsächlichen Inhalt des ausgewählten Bildschirms anzuzeigen.

Ergebnis

Die folgende Abbildung zeigt die Navigationsleiste, die sich aus dem vorherigen Snippet ergibt:

Ein App-Bildschirm mit drei horizontal in einer Navigationsleiste am unteren Bildschirmrand aufgeführten Zielen: „Songs“, „Album“ und „Playlist“. Jedes Ziel hat ein entsprechendes Symbol (z.B. eine Musiknote für „Songs“).
Abbildung 2: Eine Navigationsleiste mit drei Zielen und den zugehörigen Symbolen: „Songs“, „Album“ und „Playlist“.

Zusätzliche Ressourcen