Untere Navigation
Erstellen Sie eine untere Navigation mit Tabs.
Untere Navigation ist eine kostenlose Android Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Android Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.
Untere Navigationsleisten
Viele Apps platzieren ihre übergeordneten Bereiche in einer unteren Navigationsleiste. Compose stellt dafür NavigationBar und NavigationBarItem bereit.
NavigationBar
NavigationBar ist der Container und wird normalerweise im bottomBar-Slot eines Scaffold platziert. Er enthält mehrere NavigationBarItem-Elemente.
NavigationBar {
// items go here
}NavigationBarItem
Jeder Tab ist ein NavigationBarItem mit einem icon, einem optionalen label, einem selected-Flag und einem onClick.
NavigationBarItem(
selected = true,
onClick = { },
icon = { Icon(Icons.Default.Home, contentDescription = "Home") },
label = { Text("Home") }
)Tabs modellieren
Definieren Sie Ihre Tabs als Daten, damit Sie sie in einer Schleife durchlaufen können. Eine einfache Datenklasse mit Route, Bezeichnung und Symbol eignet sich dafür gut.
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)
)Die aktuelle Route verfolgen
Um den aktiven Tab hervorzuheben, benötigen Sie die aktuelle Route. Lesen Sie sie aus dem aktuellen Back-Stack-Eintrag des Controllers aus.
val backStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = backStackEntry?.destination?.routeAuswahl markieren
Vergleichen Sie die Route jedes Tabs mit currentRoute, um das selected-Flag zu setzen. So hebt die Leiste das richtige Element hervor.
NavigationBarItem(
selected = currentRoute == tab.route,
onClick = { navController.navigate(tab.route) },
icon = { Icon(tab.icon, contentDescription = tab.label) },
label = { Text(tab.label) }
)Aufbau des Back Stacks vermeiden
Wiederholtes Tippen auf Tabs sollte nicht immer mehr Ziele anhäufen. Verwenden Sie beim Wechsel zwischen Tabs popUpTo bis zum Startziel zusammen mit launchSingleTop.
navController.navigate(tab.route) {
popUpTo(navController.graph.startDestinationId) { saveState = true }
launchSingleTop = true
restoreState = true
}saveState / restoreState
saveState und restoreState bewahren die Scrollposition und den Zustand jedes Tabs, wenn Sie zu einem anderen Tab wechseln und wieder zurückkehren – genau das erwartete Verhalten bei unteren Tabs.
Scaffold-Integration
Umschließen Sie alles mit einem Scaffold. Platzieren Sie die Leiste in bottomBar und den NavHost im Inhalt. Verwenden Sie dabei das bereitgestellte Padding, damit der Inhalt nicht von der Leiste verdeckt wird.
Scaffold(
bottomBar = { BottomBar(navController) }
) { padding ->
NavHost(
navController,
startDestination = "home",
modifier = Modifier.padding(padding)
) { /* destinations */ }
}Die Elemente durchlaufen
Erstellen Sie die Leiste, indem Sie Ihre Tab-Liste durchlaufen. Dadurch bleibt der Code kurz und einheitlich.
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) }
)
}
}Alles zusammenführen
Eine vollständig mit einem Controller verbundene untere Leiste, die den aktiven Tab hervorhebt.
@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) }
)
}
}
}Kurze Überprüfung
Woran erkennen Sie, welches NavigationBarItem Sie als selected markieren müssen?
Zusammenfassung
Untere Navigation:
NavigationBarenthältNavigationBarItem-Elemente.- Verfolgen Sie den aktiven Tab über
currentBackStackEntryAsState()und setzen Sieselected. - Verwenden Sie
popUpTo+launchSingleTop+saveState/restoreStatefür saubere Tab-Wechsel. - Hosten Sie die Leiste im
bottomBareinesScaffold.
Häufig gestellte Fragen
Ist die Lektion „Untere Navigation“ kostenlos?
Ja — der vollständige Text von „Untere Navigation“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Android Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Untere Navigation“?
Erstellen Sie eine untere Navigation mit Tabs. Du übst Android Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Android Academy zu starten?
Keine Vorkenntnisse erforderlich. Android Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Untere Navigation“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Android Academy-Lektion Code schreiben und ausführen?
Ja. Jede Android Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.