Afficher une barre d'application

Les barres d'application sont des conteneurs situés en haut ou en bas de l'écran qui permettent aux utilisateurs d'accéder aux principales fonctionnalités et aux éléments de navigation:

Type	Apparence	Objectif
Barre d'application supérieure	en haut de l'écran.	Fournit un accès aux tâches et informations clés. Elle contient généralement un titre, des tâches principales et certains éléments de navigation.
Barre d'application inférieure	en bas de l'écran.	Comprend généralement les éléments de navigation principaux. Peut donner accès à d'autres actions, par exemple à l'aide d'un bouton d'action flottant.

Compatibilité des versions

Cette implémentation nécessite que la version minimale du SDK de votre projet soit définie sur le niveau d'API 21 ou supérieur.

Dépendances

Implémenter une barre d'application supérieure

Le code suivant présente les implémentations des quatre types de barres d'application supérieures, y compris des exemples variés de contrôle du comportement de défilement.

• Petite barre d'application supérieure
• Barre d'application supérieure centrée
• Barre d'application supérieure de taille moyenne
• Grande barre d'application supérieure

Petite barre d'application supérieure

Pour créer une petite barre d'application supérieure, utilisez le composable TopAppBar. Il s'agit de la barre d'application supérieure la plus simple possible. Dans cet exemple, elle ne contient qu'un titre.

L'exemple suivant ne transmet pas à TopAppBar une valeur pour scrollBehavior. Par conséquent, la barre d'application supérieure ne réagit pas au défilement du contenu interne.

Résultat

Barre d'application supérieure centrée

La barre d'application supérieure alignée au centre est identique à la petite barre d'application, à l'exception du titre, qui est centré dans le composant. Pour l'implémenter, utilisez le composable CenterAlignedTopAppBar dédié.

Cet exemple utilise enterAlwaysScrollBehavior() pour obtenir la valeur qu'il transmet pour scrollBehavior. La barre se réduit lorsque l'utilisateur fait défiler le contenu interne de l'échafaudage.

Résultat

Barre d'application supérieure de taille moyenne

La barre d'application supérieure de taille moyenne place le titre sous les icônes supplémentaires. Pour en créer un, utilisez le composable MediumTopAppBar.

Comme le code précédent, cet exemple utilise enterAlwaysScrollBehavior() pour obtenir la valeur qu'il transmet pour scrollBehavior.

Résultat

Grande barre d'application supérieure

Une grande barre d'application supérieure est semblable à la barre moyenne, mais la marge intérieure entre le titre et les icônes est plus importante et elle occupe plus d'espace à l'écran. Pour en créer un, utilisez le composable LargeTopAppBar.

Cet exemple utilise exitUntilCollapsedScrollBehavior() pour obtenir la valeur qu'il transmet pour scrollBehavior. La barre se réduit lorsque l'utilisateur fait défiler le contenu interne de l'échafaudage, mais se développe lorsque l'utilisateur fait défiler la fin du contenu interne.

Résultat

Implémenter une barre d'application inférieure

Pour créer une barre d'application inférieure, utilisez le composable BottomAppBar, qui est semblable au composable de la barre d'application supérieure.

Vous transmettez des composables pour les paramètres clés suivants:

• actions: série d'icônes qui s'affichent sur le côté gauche de la barre. Il s'agit généralement d'actions clés pour l'écran donné ou d'éléments de navigation.
• floatingActionButton: bouton d'action flottant qui s'affiche sur le côté droit de la barre.

Résultat

Points essentiels

• Vous transmettez généralement des barres d'application au composable Scaffold, qui dispose de paramètres spécifiques pour les recevoir.

• Les composables que vous utilisez pour implémenter les barres d'application supérieures partagent des paramètres clés:

  • title: texte qui s'affiche dans la barre d'application.
  • navigationIcon: icône principale de navigation, qui s'affiche à gauche de la barre d'application.
  • actions: icônes qui donnent à l'utilisateur accès aux actions clés, qui s'affichent à droite de la barre d'application.
  • scrollBehavior: détermine la façon dont la barre d'application supérieure réagit au défilement du contenu interne de l'échafaudage.
  • colors: détermine l'apparence de la barre d'application.

• Vous pouvez contrôler la façon dont la barre d'application réagit lorsque l'utilisateur fait défiler le contenu interne de l'échafaudage. Pour ce faire, créez une instance de TopAppBarScrollBehavior et transmettez-la à votre barre d'application supérieure pour le paramètre scrollBehavior. Il existe trois types d'TopAppBarScrollBehavior:

  • enterAlwaysScrollBehavior: lorsque l'utilisateur affiche le contenu interne de l'échafaudage, la barre d'application supérieure se réduit. La barre d'application se développe lorsque l'utilisateur fait glisser le contenu interne vers le bas.
  • exitUntilCollapsedScrollBehavior: semblable à enterAlwaysScrollBehavior, bien que la barre d'application se développe également lorsque l'utilisateur arrive à la fin du contenu interne de l'échafaudage.
  • pinnedScrollBehavior: la barre d'application reste en place et ne réagit pas au défilement.

Collections contenant ce guide

Ce guide fait partie de ces collections de guides rapides sélectionnées qui couvrent des objectifs de développement Android plus larges:

Vous avez des questions ou des commentaires ?

Consultez notre page des questions fréquentes et découvrez les guides rapides, ou contactez-nous pour nous faire part de vos commentaires.

Accéder aux questions fréquentes Envoyer des commentaires