Android Academy · Leçon

Navigation inférieure

Créez une navigation inférieure à onglets.

Navigation inférieure est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Android Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Android Academy comprend 4 leçons au total.

Barres de navigation inférieures

De nombreuses applications placent leurs sections principales dans une barre de navigation inférieure. Compose fournit NavigationBar et NavigationBarItem à cet effet.

NavigationBar

NavigationBar est le conteneur, généralement placé dans l’emplacement bottomBar d’un Scaffold. Il contient plusieurs éléments NavigationBarItem.

NavigationBar {
    // items go here
}

NavigationBarItem

Chaque onglet est un NavigationBarItem doté d’une icon, d’un label facultatif, d’un indicateur selected et d’un onClick.

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

Modéliser les onglets

Définissez vos onglets sous forme de données afin de pouvoir les parcourir. Une classe de données simple contenant une route, un libellé et une icône convient parfaitement.

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)
)

Suivre la route actuelle

Pour mettre en évidence l’onglet actif, vous devez connaître la route actuelle. Lisez-la depuis l’entrée actuelle de la pile de retour du contrôleur.

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

Marquer l’onglet sélectionné

Comparez la route de chaque onglet à currentRoute pour définir l’indicateur selected, afin que la barre mette en évidence le bon élément.

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

Éviter l’accumulation dans la pile de retour

Des appuis répétés sur les onglets ne doivent pas accumuler les destinations. Utilisez popUpTo vers la destination de départ, ainsi que launchSingleTop, lors de la navigation entre les onglets.

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

saveState / restoreState

saveState et restoreState préservent la position de défilement et l’état de chaque onglet lorsque vous passez à un autre onglet puis revenez, comme on l’attend d’onglets inférieurs.

Intégration à Scaffold

Placez le tout dans un Scaffold. Mettez la barre dans bottomBar et le NavHost dans le contenu, en utilisant le remplissage fourni pour que le contenu ne soit pas masqué derrière la barre.

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

Parcourir les éléments

Construisez la barre en parcourant votre liste d’onglets, ce qui permet de garder un code court et cohérent.

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) }
        )
    }
}

Mettre tout en place

Barre inférieure complète reliée à un contrôleur, avec mise en évidence de l’onglet actif.

@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) }
            )
        }
    }
}

Vérification rapide

Comment savoir quel NavigationBarItem marquer comme selected ?

Récapitulatif

Navigation inférieure :

NavigationBar contient les éléments NavigationBarItem.
Suivez l’onglet actif avec currentBackStackEntryAsState() et définissez selected.
Utilisez popUpTo + launchSingleTop + saveState/restoreState pour changer d’onglet proprement.
Hébergez-la dans le bottomBar d’un Scaffold.

Questions Fréquemment Posées

La leçon « Navigation inférieure » est-elle gratuite ?

Oui — le texte complet de « Navigation inférieure » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Android Academy, passe à CoddyKit PRO. Le cours Android Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Navigation inférieure » ?

Créez une navigation inférieure à onglets. Tu pratiques Android Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Android Academy ?

Aucune expérience préalable n'est requise. Android Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Navigation inférieure » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Android Academy ?

Oui. Chaque leçon Android Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Android Academy