Onglets

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 doivent être utilisés lorsqu'un seul ensemble d'onglets est nécessaire.
• Onglets secondaires : utilisés dans une zone de contenu pour séparer davantage les contenus associés et établir une hiérarchie. Ils sont nécessaires lorsqu'un écran nécessite plusieurs niveaux d'onglets.

Figure 1. Onglets principaux (1) et secondaires (2).

Cette page explique comment afficher les onglets principaux dans 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. Il est généralement utilisé dans un PrimaryTabRow (pour les onglets d'indicateur principal) ou un SecondaryTabRow (pour les onglets d'indicateur secondaire).

Tab inclut les paramètres clés 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 du texte dans l'onglet. Facultatif.
• icon : affiche une icône dans l'onglet. Facultatif.
• enabled : contrôle si l'onglet est activé et s'il est possible d'interagir avec lui. Si la valeur est "false", l'onglet s'affiche à l'état désactivé et ne répond pas aux clics.

Exemple : Navigation par onglets

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

Remarque : Le code source complet inclut le code qui établit la structure de navigation de base pour l'exemple suivant.

@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, chacun 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 sélectionné.
  • startDestination.ordinal obtient l'index numérique (position) de l'entrée d'énumération Destination.SONGS.
• Lorsque vous cliquez sur un onglet, le lambda onClick appelle navController.navigate(route = destination.route) pour accéder à l'écran correspondant.
• Le lambda onClick de Tab met à jour l'état selectedDestination pour mettre en évidence l'onglet sélectionné.
• Il 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 le résultat de l'extrait de code précédent :

Figure 2. Trois onglets (Titres, Album et Playlist) disposés horizontalement.

Ressources supplémentaires

• Material 3 – Onglets
• Navigation avec Compose