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 le contenu associé et établir une hiérarchie. Ils sont nécessaires lorsqu'un écran nécessite plus d'un niveau d'onglets.
Trois onglets principaux sont affichés avec les icônes associées (Vols, Voyages et Explorer). Deux onglets secondaires (Aperçu et Spécifications) sont affichés sans icônes associées.
Figure 1. Onglets principaux (1) et onglets secondaires (2).

Cette page explique comment afficher les onglets principaux dans votre application avec des écrans associés et une 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 un SecondaryTabRow (pour les onglets d'indicateur secondaire).

Tab inclut les paramètres clés suivants :

  • selected : détermine si l'onglet actuel est visuellement mis en surbrillance.
  • 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 peut être utilisé. Si la valeur est définie sur "false", l'onglet apparaît 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 pour naviguer entre 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 à 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' 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 surbrillance visuellement l'onglet sur lequel vous avez cliqué.
  • Il appelle le composable AppNavHost, en transmettant le navController et le startDestination, pour afficher le contenu réel de l'écran sélectionné.

Résultat

L'image suivante montre le résultat de l'extrait précédent :

Trois onglets sont disposés horizontalement en haut de l'écran de l'application. Les onglets "Titres", "Album" et "Playlist" sont affichés. L'onglet "Titres" est sélectionné et souligné.
Figure 2. Trois onglets (Songs, Album et Playlist) disposés horizontalement.

Ressources supplémentaires