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
enterAlwaysScrollBehavior.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
TopAppBarScrollBehavioret transmettez-la à votre barre d'application supérieure pour le paramètrescrollBehavior. 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:
Afficher des composants interactifs
