Barre de navigation

La barre de navigation permet aux utilisateurs de passer d'une destination à l'autre dans une application. Vous devez utiliser des barres de navigation pour :

• trois à cinq destinations d'importance égale ;
• des tailles de fenêtre compactes ;
• des destinations cohérentes sur tous les écrans de l'application.

Cette page explique comment afficher une barre de navigation dans votre application avec des écrans associés et une navigation de base.

Surface d'API

Utilisez les NavigationBar et NavigationBarItem composables pour implémenter la logique de changement de destination. Chaque NavigationBarItem représente une destination unique.

NavigationBarItem inclut les paramètres clés suivants :

• selected : détermine si l'élément actuel est visuellement mis en surbrillance.
• onClick(): définit l'action à effectuer lorsque l'utilisateur clique sur l'élément. La logique de gestion des événements de navigation, de mise à jour de l'état de l'élément sélectionné ou de chargement du contenu correspondant se trouve ici.
• label : affiche du texte dans l'élément. Facultatif.
• icon : affiche une icône dans l'élément. Facultatif.

Exemple : Barre de navigation inférieure

L'extrait de code suivant implémente une barre de navigation inférieure avec des éléments permettant aux utilisateurs de naviguer entre différents écrans d'une application :

@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

Points essentiels

• NavigationBar affiche une collection d'éléments, chacun correspondant à une Destination.
• val navController = rememberNavController() crée et mémorise une instance de NavHostController, qui gère la navigation dans un NavHost.
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } gère l'état de l' élément sélectionné.
  • startDestination.ordinal obtient l'index numérique (position) de l'entrée d'énumération Destination.SONGS.
• Lorsqu'un utilisateur clique sur un élément, navController.navigate(route = destination.route) est appelé pour accéder à l'écran correspondant.
• Le lambda onClick de NavigationBarItem met à jour l'état selectedDestination pour mettre en surbrillance visuellement l'élément sur lequel l'utilisateur a cliqué.
• La logique de navigation appelle le composable AppNavHost, en transmettant navController et startDestination, pour afficher le contenu réel de l'écran sélectionné.

Résultat

L'image suivante montre la barre de navigation résultant de l'extrait de code précédent :

Ressources supplémentaires

• Material 3 – Barre de navigation
• Navigation avec Compose