Barre de navigation

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

  • Trois à cinq destinations d'importance égale
  • Tailles de fenêtre compactes
  • Destinations cohérentes entre les écrans de l'application
Barre de navigation avec quatre destinations. Chaque destination est associée à un nom d'espace réservé appelé
Figure 1. Barre de navigation avec quatre destinations.

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 composables NavigationBar et NavigationBarItem pour implémenter la logique de commutation de destination. Chaque NavigationBarItem représente une destination unique.

NavigationBarItem inclut les principaux paramètres suivants:

  • selected: détermine si l'élément actuel est mis en surbrillance visuellement.
  • onClick(): fonction lambda obligatoire qui définit l'action à effectuer lorsque l'utilisateur clique sur l'élément. C'est là que vous gérez généralement les événements de navigation, mettez à jour l'état de l'élément sélectionné ou chargez le contenu correspondant.
  • 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 afin que les utilisateurs puissent naviguer entre les 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, chaque élément correspondant à un 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 actuellement sélectionné.
  • var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } gère l'état de l'élément actuellement 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é.
  • Il appelle le composable AppNavHost, en transmettant les 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 précédent:

Écran d'application avec trois destinations listées horizontalement dans une barre de navigation inférieure : "Chansons", "Album" et "Playlist". Chaque destination est associée à une icône appropriée (par exemple, une note de musique pour "Chansons").
Figure 2. Barre de navigation contenant trois destinations avec des icônes associées : "Titres", "Album" et "Playlist".

Ressources supplémentaires