Pasek nawigacyjny

Pasek nawigacyjny umożliwia użytkownikom przełączanie się między miejscami docelowymi w aplikacji. Pasków nawigacyjnych należy używać w tych przypadkach:

  • 3–5 miejsc docelowych o równym znaczeniu
  • kompaktowe rozmiary okien
  • spójne miejsca docelowe na ekranach aplikacji
Pasek nawigacyjny z 4 miejscami docelowymi. Każde miejsce docelowe ma nazwę zastępczą „Etykieta”. Wybrane miejsce docelowe jest oznaczone ikoną koła, a pozostałe miejsca docelowe – trójkątami.
Rysunek 1. Pasek nawigacyjny z 4 miejscami docelowymi.

Na tej stronie dowiesz się, jak wyświetlić pasek nawigacyjny w aplikacji z powiązanymi ekranami i podstawową nawigacją.

Powierzchnia interfejsu API

Aby zaimplementować logikę przełączania miejsc docelowych, użyj komponentów NavigationBar i NavigationBarItem. Każdy komponent NavigationBarItem reprezentuje pojedyncze miejsce docelowe.

NavigationBarItem zawiera te kluczowe parametry:

  • selected – określa, czy bieżący element jest wizualnie wyróżniony.
  • onClick()– określa działanie, które ma zostać wykonane, gdy użytkownik kliknie element. Tutaj należy umieścić logikę obsługi zdarzeń nawigacji, aktualizowania stanu wybranego elementu lub wczytywania odpowiedniej treści.
  • label – wyświetla tekst w elemencie. Opcjonalnie.
  • icon – wyświetla ikonę w elemencie. Opcjonalnie.

Przykład: dolny pasek nawigacyjny

Ten fragment kodu implementuje dolny pasek nawigacyjny z elementami, dzięki którym użytkownicy mogą przechodzić między różnymi ekranami w aplikacji:

@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

Najważniejsze punkty

  • NavigationBar wyświetla zbiór elementów, z których każdy odpowiada Destination.
  • val navController = rememberNavController() tworzy i zapamiętuje instancję NavHostController, która zarządza nawigacją w NavHost.
  • var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } zarządza stanem wybranego elementu.
    • startDestination.ordinal pobiera indeks liczbowy (pozycję) wpisu wyliczenia Destination.SONGS.
  • Gdy klikniesz element, wywoływana jest funkcja navController.navigate(route = destination.route), która umożliwia przejście do odpowiedniego ekranu.
  • Lambda onClick komponentu NavigationBarItem aktualizuje stan selectedDestination, aby wizualnie wyróżnić kliknięty element.
  • Logika nawigacji wywołuje funkcję kompozycyjną AppNavHost, przekazując navController i startDestination, aby wyświetlić rzeczywistą zawartość wybranego ekranu.

Wynik

Ten obraz przedstawia pasek nawigacyjny utworzony na podstawie poprzedniego fragmentu kodu:

Ekran aplikacji z 3 miejscami docelowymi wymienionymi poziomo na dolnym pasku nawigacyjnym: Utwory, Album i Playlista. Każde miejsce docelowe ma powiązaną z nim odpowiednią ikonę (np. nutę w przypadku „Utworów”).
Rysunek 2. Pasek nawigacyjny, który zawiera 3 miejsca docelowe z powiązanymi ikonami: Utwory, Album i Playlista.

Dodatkowe materiały