Onglets

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Les onglets vous permettent d'organiser des groupes de contenus associés. Il existe deux types d'onglets:

• Onglets principaux: placés en haut du volet de contenu sous une barre d'application supérieure. Ils affichent les principales destinations de contenu et ne doivent être utilisés que lorsqu'un seul ensemble d'onglets est nécessaire.
• Onglets secondaires: utilisés dans une zone de contenu pour séparer davantage le contenu associé et établir une hiérarchie. Ils sont nécessaires lorsqu'un écran nécessite plusieurs niveaux d'onglets.

Cette page explique comment afficher les onglets principaux de votre application avec les écrans associés et la navigation de base.

Surface d'API

Utilisez les composables Tab, PrimaryTabRow et SecondaryTabRow pour implémenter des onglets. Le composable Tab représente un onglet individuel dans la ligne et est généralement utilisé dans un PrimaryTabRow (pour les onglets d'indicateur principal) ou SecondaryTabRow (pour les onglets d'indicateur secondaire).

Tab inclut les principaux paramètres suivants:

• selected: détermine si l'onglet actuel est mis en surbrillance visuellement.
• onClick(): fonction lambda obligatoire qui définit l'action à effectuer lorsque l'utilisateur clique sur l'onglet. C'est là que vous gérez généralement les événements de navigation, mettez à jour l'état de l'onglet sélectionné ou chargez le contenu correspondant.
• text: affiche le texte dans l'onglet. Facultatif.
• icon: affiche une icône dans l'onglet. Facultatif.
• enabled: indique si l'onglet est activé et si vous pouvez interagir avec lui. Si elle est définie sur "false", l'onglet s'affiche dans un état désactivé et ne répond pas aux clics.

Exemple: Navigation par onglets

L'extrait suivant implémente une barre de navigation supérieure avec des onglets permettant de naviguer entre les différents écrans d'une application:

@Composable
fun NavigationTabExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(modifier = modifier) { contentPadding ->
        PrimaryTabRow(selectedTabIndex = selectedDestination, modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                Tab(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    text = {
                        Text(
                            text = destination.label,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis
                        )
                    }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}
Navigation.kt

Points essentiels

• PrimaryTabRow affiche une ligne horizontale d'onglets, chaque onglet 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'onglet actuellement sélectionné.
  • startDestination.ordinal obtient l'index numérique (position) de l'entrée d'énumération Destination.SONGS.
• Lorsqu'un onglet est cliqué, navController.navigate(route = destination.route) est appelé pour accéder à l'écran correspondant.
• Le lambda onClick de Tab met à jour l'état selectedDestination pour mettre en évidence visuellement l'onglet 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 le résultat de l'extrait de code précédent:

Ressources supplémentaires

• Material 3 – Onglets
• Navigation avec Compose