Navigationsleiste

Über die Navigationsleiste können Nutzer in einer App zwischen Zielen wechseln. Navigationsleisten sollten Sie in folgenden Fällen verwenden:

  • Drei bis fünf Ziele mit gleicher Wichtigkeit
  • Kompaktfenster
  • Einheitliche Ziele auf allen App-Bildschirmen
Eine Navigationsleiste mit vier Zielen. Jedes Ziel hat einen Platzhalternamen namens
Abbildung 1: Eine Navigationsleiste mit vier Zielen.

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

API-Oberfläche

Verwende die Composeables NavigationBar und NavigationBarItem, um die Logik für die Zielweiterleitung zu implementieren. Jede NavigationBarItem steht für ein einzelnes Ziel.

NavigationBarItem umfasst die folgenden wichtigen Parameter:

  • selected: Bestimmt, ob das aktuelle Element visuell hervorgehoben wird.
  • onClick(): Eine erforderliche Lambda-Funktion, die die Aktion definiert, die ausgeführt werden soll, wenn der Nutzer auf das Element klickt. Hier werden in der Regel Navigationsereignisse verarbeitet, der Status des ausgewählten Artikels aktualisiert oder entsprechende Inhalte geladen.
  • label: Hier wird Text im Element angezeigt. Optional:
  • icon: Im Artikel wird ein Symbol angezeigt. Optional:

Beispiel: Untere Navigationsleiste

Im folgenden Snippet wird eine untere Navigationsleiste mit Elementen implementiert, über die 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))
    }
}
Navigation.kt

Wichtige Fakten

  • NavigationBar enthält eine Sammlung von Elementen, wobei jedes Element 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 Elements.
  • var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } verwaltet den Status des aktuell ausgewählten Elements.
    • startDestination.ordinal ruft den numerischen Index (die Position) des Destination.SONGS-Eintrags ab.
  • Wenn auf ein Element geklickt wird, wird navController.navigate(route = destination.route) aufgerufen, um zum entsprechenden Bildschirm zu gelangen.
  • Das onClick-Lambda des NavigationBarItem aktualisiert den selectedDestination-Status, um das angeklickte Element 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 die Navigationsleiste, die aus dem vorherigen Snippet resultiert:

Ein App-Bildschirm mit drei Zielen, die horizontal in einer unteren Navigationsleiste aufgeführt sind: „Songs“, „Album“ und „Playlist“. Jedem Ziel ist ein entsprechendes Symbol zugeordnet (z.B. eine Musiknote für „Songs“).
Abbildung 2. Eine Navigationsleiste mit drei Zielen mit zugehörigen Symbolen: „Songs“, „Album“ und „Playlist“.

Zusätzliche Ressourcen