Créez une barre d'application supérieure pour aider les utilisateurs à naviguer et à accéder aux fonctions de votre application à l'aide du composable TopAppBar
.
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
Créer un composable pour la barre d'application supérieure
Créez une barre d'application supérieure à l'aide du composable MediumTopAppBar
qui se réduit lorsque l'utilisateur fait défiler la zone de contenu vers le bas et se développe lorsque l'utilisateur revient en haut du contenu:
Points clés concernant le code
Scaffold
externe avec unTopBar
défini.- Titre constitué d'un seul élément
Text
. - Barre supérieure avec une seule action définie.
- Une action
IconButton
avec un lambdaonClick
pour l'effectuer. IconButton
contenant unIcon
avec une image d'icône et un texte de description du contenu.- Le comportement de défilement du contenu interne de Scaffold est défini comme
enterAlwaysScrollBehavior()
. La barre d'application se réduit lorsque l'utilisateur fait remonter le contenu interne et se développe lorsque l'utilisateur fait descendre le contenu interne. - En plus de
MediumTopBar
, qui contient le titre, vous pouvez également utiliser :TopAppBar
: à utiliser pour les écrans qui ne nécessitent pas beaucoup de navigation ni d'actions.CenterAlignedTopAppBar
: à utiliser pour les écrans comportant une seule action principale.Le titre est centré dans le composant.MediumTopAppBar
: à utiliser pour les écrans qui nécessitent une quantité modérée de navigation et d'actions.LargeTopAppBar
: à utiliser pour les écrans qui nécessitent beaucoup de navigation et d'actions. Utilise plus de marge intérieure queMediumTopAppBar
et place le titre sous les icônes supplémentaires.
Résultats
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:
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=fr)
Créer un échafaudage d'écran d'accueil
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=fr)