Navigationsleiste

Navigationsleisten bieten Zugriff auf Ziele in Apps, die auf Geräten mit großen Bildschirmen ausgeführt werden. Navigationsleisten sollten für Folgendes verwendet werden:

  • Ziele auf oberster Ebene, die von überall in einer App aus zugänglich sein müssen
  • Drei bis sieben Hauptziele
  • Tablet- oder Desktop-Layouts
Eine vertikale Navigationsleiste auf der linken Seite eines Bildschirms mit vier Zielen („Alle Dateien“, „Zuletzt verwendet“, „Fotos“ und „Mediathek“), jeweils mit einem zugehörigen Symbol und einem unverankerten Aktionsbutton.
Abbildung 1. Eine Navigationsleiste mit vier Zielen und einem unverankerten Aktionsbutton.

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

API-Oberfläche

Verwenden Sie das Compose-Element NavigationRail mit NavigationRailItem, um eine Navigationsleiste in Ihrer Anwendung zu implementieren. NavigationRailItem steht für ein einzelnes Element in der Spalte.

NavigationRailItem enthält die folgenden Schlüsselparameter:

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

Beispiel: Schienenbasierte Navigation

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

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

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

Wichtige Fakten

  • NavigationRail zeigt eine vertikale Spalte mit Rail-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 Rail-Elements.
    • startDestination.ordinal ruft den numerischen Index (Position) des Enum-Eintrags Destination.SONGS ab.
  • Wenn auf ein Element in der Navigationsleiste geklickt wird, wird navController.navigate(route = destination.route) aufgerufen, um zum entsprechenden Bildschirm zu gelangen.
  • Der Lambda-Ausdruck onClick von NavigationRailItem aktualisiert den Status selectedDestination, um das angeklickte Element in der Navigationsleiste 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

Die folgende Abbildung zeigt das Ergebnis des vorherigen Snippets:

Eine vertikale Navigationsleiste mit drei Zielen und den zugehörigen Symbolen: „Songs“, „Album“ und „Playlist“. Symbole zeigen visuell den Zweck der einzelnen Navigationsschaltflächen in der Leiste an. 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