Afficher une barre d'application supérieure

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 un TopBar défini.
  • Titre constitué d'un seul élément Text.
  • Barre supérieure avec une seule action définie.
  • Une action IconButton avec un lambda onClick pour l'effectuer.
  • IconButton contenant un Icon 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 que MediumTopAppBar et place le titre sous les icônes supplémentaires.

Résultats

Figure 1 Barre d'application supérieure de taille moyenne.

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:

Découvrez comment utiliser une plate-forme standardisée pour créer des interfaces utilisateur complexes. La structure en échafaudage maintient les différentes parties de l'interface utilisateur, ce qui donne aux applications une apparence cohérente.
Collection de guides rapides
Découvrez comment les fonctions composables peuvent vous permettre de créer facilement de beaux composants d'interface utilisateur basés sur le système de conception Material Design.
Collection de guides rapides

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