Les barres d'application sont des conteneurs qui fournissent à l'utilisateur l'accès aux fonctionnalités clés et aux éléments de navigation. Il existe deux types de barres d'application : les barres d'application supérieures et les barres d'application inférieures. Leur apparence et leur fonction respectives sont les suivantes:
Type |
Apparence |
Finalité |
---|---|---|
Barre d'application supérieure |
En haut de l'écran. |
Fournit l'accès aux tâches et aux informations clés. héberge généralement un titre, les principales tâches et certains éléments de navigation. |
Barre d'application inférieure |
En bas de l'écran. |
Ils incluent généralement des éléments de navigation de base. Peut également donner accès à d'autres actions clés, par exemple via un bouton d'action flottant contenu. |
Pour implémenter une barre d'application supérieure et une barre d'application inférieure, utilisez respectivement les composables TopAppBar
et BottomAppBar
. Ils vous permettent de créer des interfaces cohérentes qui encapsulent les commandes de navigation et d'action, et qui sont conformes aux principes de Material Design.
Barres d'application principales
Le tableau suivant présente les quatre types de barres d'application supérieures:
Type |
Exemple |
---|---|
Petit: pour les écrans qui nécessitent peu de navigation ou d'actions. |
|
Aligné au centre: pour les écrans qui n'ont qu'une seule action principale. |
|
Moyen: pour les écrans qui nécessitent une navigation et des actions moyennes. |
|
Grand: pour les écrans qui nécessitent beaucoup de navigation et d'actions. |
Surface d'API
Les différents composables qui vous permettent d'implémenter les quatre différentes barres d'application supérieures sont assez similaires. Elles partagent plusieurs paramètres clés:
title
: texte affiché dans la barre d'application.navigationIcon
: icône principale de navigation. Il apparaît à gauche de la barre d'application.actions
: icônes permettant à l'utilisateur d'accéder aux actions clés. Elles apparaissent à droite de la barre d'application.scrollBehavior
: détermine la manière 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.
Comportement de défilement
Vous pouvez contrôler la manière dont la barre d'application répond lorsque l'utilisateur fait défiler le contenu interne de l'échafaudage en question. 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 de TopAppBarScrollBehavior
. Elles sont les suivantes:
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 tire ensuite le contenu interne.exitUntilCollapsedScrollBehavior
: semblable àenterAlwaysScrollBehavior
, même si la barre d'application se développe également lorsque l'utilisateur atteint la fin du contenu interne de l'échafaudage.pinnedScrollBehavior
: la barre d'application reste en place et ne réagit pas au défilement.
Les exemples suivants mettent en œuvre plusieurs de ces options.
Exemples
Les sections suivantes fournissent des implémentations pour les quatre différents types de barres d'application supérieures, y compris des exemples différents de la façon dont vous pouvez contrôler le comportement de défilement.
Petit
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 de valeur à TopAppBar
pour scrollBehavior
et ne réagit donc pas au défilement du contenu interne.
@Composable fun SmallTopAppBarExample() { Scaffold( topBar = { TopAppBar( colors = TopAppBarDefaults.topAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text("Small Top App Bar") } ) }, ) { innerPadding -> ScrollContent(innerPadding) } }
Cette implémentation est la suivante :
Aligné au centre
La barre d'application supérieure alignée au centre est essentiellement la même que la petite barre d'application, bien que le titre soit centré dans le composant. Pour l'implémenter, utilisez le composable CenterAlignedTopAppBar
prévu à cet effet.
Cet exemple utilise enterAlwaysScrollBehavior()
pour obtenir la valeur qu'il transmet à scrollBehavior
. Ainsi, la barre se réduit lorsque l'utilisateur fait défiler le contenu interne de l'échafaudage.
@Composable fun CenterAlignedTopAppBarExample() { val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState()) Scaffold( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { CenterAlignedTopAppBar( colors = TopAppBarDefaults.topAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text( "Centered Top App Bar", maxLines = 1, overflow = TextOverflow.Ellipsis ) }, navigationIcon = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.Filled.ArrowBack, contentDescription = "Localized description" ) } }, actions = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.Filled.Menu, contentDescription = "Localized description" ) } }, scrollBehavior = scrollBehavior, ) }, ) { innerPadding -> ScrollContent(innerPadding) } }
Cette implémentation est la suivante :
Medium
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 dans l'extrait précédent, cet exemple utilise enterAlwaysScrollBehavior()
pour obtenir la valeur qu'il transmet pour scrollBehavior
.
@Composable fun MediumTopAppBarExample() { val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState()) Scaffold( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { MediumTopAppBar( colors = TopAppBarDefaults.topAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text( "Medium Top App Bar", maxLines = 1, overflow = TextOverflow.Ellipsis ) }, navigationIcon = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.Filled.ArrowBack, contentDescription = "Localized description" ) } }, actions = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.Filled.Menu, contentDescription = "Localized description" ) } }, scrollBehavior = scrollBehavior ) }, ) { innerPadding -> ScrollContent(innerPadding) } }
Cette implémentation se présente comme suit, avec une démonstration du comportement de défilement de enterAlwaysScrollBehavior()
:
Grand
Une grande barre d'application supérieure est semblable à la taille moyenne, bien que la marge intérieure entre le titre et les icônes soit plus importante et qu'elle occupe globalement plus d'espace à l'écran. Pour en créer un, utilisez le composable LargeTopAppBar
.
Contrairement aux extraits de code précédents, cet exemple utilise exitUntilCollapsedScrollBehavior()
pour obtenir la valeur qu'il transmet pour scrollBehavior
. Ainsi, la barre se réduit lorsque l'utilisateur fait défiler le contenu interne de l'échafaudage, puis se développe lorsqu'il fait défiler la page jusqu'à la fin du contenu interne.
@Composable fun LargeTopAppBarExample() { val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState()) Scaffold( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { LargeTopAppBar( colors = TopAppBarDefaults.topAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text( "Large Top App Bar", maxLines = 1, overflow = TextOverflow.Ellipsis ) }, navigationIcon = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.Filled.ArrowBack, contentDescription = "Localized description" ) } }, actions = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.Filled.Menu, contentDescription = "Localized description" ) } }, scrollBehavior = scrollBehavior ) }, ) { innerPadding -> ScrollContent(innerPadding) } }
Cette implémentation est la suivante :
Barre d'application inférieure
Pour créer une barre d'application inférieure, utilisez le composable BottomAppBar
. L'utilisation de ce composable est assez semblable aux composables de la barre d'application supérieure décrits dans les sections précédentes de cette page. Vous transmettez des composables pour les paramètres de clé 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 apparaît à droite de la barre.
@Composable fun BottomAppBarExample() { Scaffold( bottomBar = { BottomAppBar( actions = { IconButton(onClick = { /* do something */ }) { Icon(Icons.Filled.Check, contentDescription = "Localized description") } IconButton(onClick = { /* do something */ }) { Icon( Icons.Filled.Edit, contentDescription = "Localized description", ) } IconButton(onClick = { /* do something */ }) { Icon( Icons.Filled.Mic, contentDescription = "Localized description", ) } IconButton(onClick = { /* do something */ }) { Icon( Icons.Filled.Image, contentDescription = "Localized description", ) } }, floatingActionButton = { FloatingActionButton( onClick = { /* do something */ }, containerColor = BottomAppBarDefaults.bottomAppBarFabColor, elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation() ) { Icon(Icons.Filled.Add, "Localized description") } } ) }, ) { innerPadding -> Text( modifier = Modifier.padding(innerPadding), text = "Example of a scaffold with a bottom app bar." ) } }
Cette implémentation est la suivante :
Ressources supplémentaires
- Documentation Material3 – Barre d'application supérieure
- Documentation Material3 – Barre d'application inférieure
- Scaffold