Android Academy · Lekcja

Nawigacja dolna

Zbuduj dolną nawigację z kartami

Nawigacja dolna to bezpłatna lekcja Android Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Android Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Android Academy zawiera 4 lekcji w sumie.

Dolne paski nawigacji

Wiele aplikacji umieszcza sekcje najwyższego poziomu na dolnym pasku nawigacji. Compose udostępnia do tego celu elementy NavigationBar i NavigationBarItem.

NavigationBar

NavigationBar jest kontenerem, zwykle umieszczanym w gnieździe bottomBar elementu Scaffold. Zawiera kilka elementów NavigationBarItem.

NavigationBar {
    // items go here
}

NavigationBarItem

Każda karta jest elementem NavigationBarItem z właściwościami icon, opcjonalną label, flagą selected oraz funkcją onClick.

NavigationBarItem(
    selected = true,
    onClick = { },
    icon = { Icon(Icons.Default.Home, contentDescription = "Home") },
    label = { Text("Home") }
)

Modelowanie kart

Zdefiniuj karty jako dane, aby móc iterować po nich w pętli. Prosta klasa danych z trasą, etykietą i ikoną sprawdzi się bardzo dobrze.

data class Tab(val route: String, val label: String, val icon: ImageVector)

val tabs = listOf(
    Tab("home", "Home", Icons.Default.Home),
    Tab("profile", "Profile", Icons.Default.Person)
)

Śledzenie bieżącej trasy

Aby wyróżnić aktywną kartę, potrzebujesz bieżącej trasy. Odczytaj ją z bieżącego wpisu stosu powrotu kontrolera.

val backStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = backStackEntry?.destination?.route

Oznaczanie wybranej karty

Porównaj trasę każdej karty z currentRoute, aby ustawić flagę selected i wyróżnić właściwy element paska.

NavigationBarItem(
    selected = currentRoute == tab.route,
    onClick = { navController.navigate(tab.route) },
    icon = { Icon(tab.icon, contentDescription = tab.label) },
    label = { Text(tab.label) }
)

Unikanie rozrastania stosu powrotu

Wielokrotne wybieranie kart nie powinno dokładać kolejnych miejsc docelowych. Podczas nawigowania między kartami użyj popUpTo dla miejsca docelowego początkowego oraz launchSingleTop.

navController.navigate(tab.route) {
    popUpTo(navController.graph.startDestinationId) { saveState = true }
    launchSingleTop = true
    restoreState = true
}

saveState / restoreState

saveState i restoreState zachowują pozycję przewijania oraz stan każdej karty po przejściu do innej karty i powrocie — jest to oczekiwane zachowanie dolnych kart.

Integracja ze Scaffold

Umieść wszystko w elemencie Scaffold. Pasek włóż do bottomBar, a NavHost do obszaru treści, używając przekazanego wypełnienia, aby treść nie została ukryta za paskiem.

Scaffold(
    bottomBar = { BottomBar(navController) }
) { padding ->
    NavHost(
        navController,
        startDestination = "home",
        modifier = Modifier.padding(padding)
    ) { /* destinations */ }
}

Iterowanie po elementach

Zbuduj pasek, iterując po liście kart, dzięki czemu kod pozostanie krótki i spójny.

NavigationBar {
    tabs.forEach { tab ->
        NavigationBarItem(
            selected = currentRoute == tab.route,
            onClick = { navController.navigate(tab.route) },
            icon = { Icon(tab.icon, contentDescription = tab.label) },
            label = { Text(tab.label) }
        )
    }
}

Połączenie elementów

Kompletny dolny pasek podłączony do kontrolera i wyróżniający aktywną kartę.

@Composable
fun BottomBar(navController: NavController) {
    val entry by navController.currentBackStackEntryAsState()
    val current = entry?.destination?.route
    NavigationBar {
        tabs.forEach { tab ->
            NavigationBarItem(
                selected = current == tab.route,
                onClick = { navController.navigate(tab.route) },
                icon = { Icon(tab.icon, contentDescription = tab.label) },
                label = { Text(tab.label) }
            )
        }
    }
}

Szybkie sprawdzenie

Skąd wiadomo, który element NavigationBarItem oznaczyć jako selected?

Podsumowanie

Dolna nawigacja:

NavigationBar zawiera elementy NavigationBarItem.
Śledź aktywną kartę za pomocą currentBackStackEntryAsState() i ustawiaj selected.
Użyj popUpTo + launchSingleTop + saveState/restoreState, aby sprawnie przełączać karty.
Umieść pasek w gnieździe bottomBar elementu Scaffold.

Często zadawane pytania

Czy lekcja „Nawigacja dolna” jest bezpłatna?

Tak — pełny tekst „Nawigacja dolna” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Android Academy, przejdź na CoddyKit PRO. Kurs Android Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Nawigacja dolna”?

Zbuduj dolną nawigację z kartami Ćwiczysz Android Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Android Academy?

Nie wymagamy żadnego doświadczenia. Android Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Nawigacja dolna”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Android Academy?

Tak. Każda lekcja Android Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Android Academy