Barres d'application

Les barres d'application sont des conteneurs qui permettent à l'utilisateur d'accéder 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. Voici leur apparence et leur objectif respectifs :

Type

Apparence

Objectif

Barre d'application supérieure

En haut de l'écran.

Permet d'accéder aux tâches et informations clés. Elle héberge généralement un titre, des éléments d'action principaux et certains éléments de navigation.

Barre d'application inférieure

En bas de l'écran.

Il inclut généralement les principaux éléments de navigation. Peut également donner accès à d'autres actions clés, par exemple via un bouton d'action flottant intégré.
Exemple de barre d'application supérieure et inférieure.
Figure 1. Barre d'application supérieure (à gauche) et barre d'application inférieure (à droite).

Pour implémenter une barre d'application supérieure et une barre d'application inférieure, utilisez respectivement les composables TopAppBar et BottomAppBar. Elles 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 supérieures

Le tableau suivant présente les quatre types de barres d'application supérieures :

Type

Exemple

Petite : pour les écrans qui ne nécessitent pas beaucoup de navigation ni d'actions.

 Petite barre d'application supérieure

Centré : pour les écrans qui n'ont qu'une seule action principale.

 Barre d'application supérieure centrée

Moyenne : pour les écrans qui nécessitent une quantité modérée de navigation et d'actions.

 Barre d'application supérieure de taille moyenne

Grande : pour les écrans qui nécessitent beaucoup de navigation et d'actions.

 Grande barre d'application supérieure

Surface d'API

Les différents composables qui vous permettent d'implémenter les quatre barres d'application supérieures sont assez similaires. Ils partagent plusieurs paramètres clés :

  • title : texte qui s'affiche dans la barre d'application.
  • navigationIcon : icône principale pour la navigation. Apparaît à gauche de la barre d'application.
  • actions : icônes permettant à l'utilisateur d'accéder aux actions clés. Elles 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 du scaffold.
  • colors : détermine l'apparence de la barre d'application.

Comportement de défilement

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 donné. 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. à savoir :

  • enterAlwaysScrollBehavior : lorsque l'utilisateur fait défiler le contenu interne du scaffold vers le haut, la barre d'application supérieure se réduit. La barre d'application s'agrandit lorsque l'utilisateur commence à faire glisser le contenu interne vers le bas.
  • exitUntilCollapsedScrollBehavior : semblable à enterAlwaysScrollBehavior, mais la barre d'application ne se développe que lorsque l'utilisateur fait défiler le contenu jusqu'en bas.
  • pinnedScrollBehavior : la barre d'application reste en place et ne réagit pas au défilement.

Les exemples suivants implémentent plusieurs de ces options.

Exemples

Les sections suivantes fournissent des implémentations pour les quatre types de barres d'application supérieures, y compris différents exemples de contrôle du comportement de défilement.

Petite

Pour créer une petite barre d'application supérieure, utilisez le composable TopAppBar. L'exemple suivant implémente une barre d'application supérieure de base qui ne contient qu'un titre.

L'exemple suivant ne transmet pas de valeur à TopAppBar pour scrollBehavior. Il 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 :

Exemple de petite barre d'application supérieure.
Figure 2. Petite barre d'application supérieure.

Centré

La barre d'application supérieure centrée est essentiellement la même que la petite barre d'application, mais le titre est 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 pour scrollBehavior. Par conséquent, 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.AutoMirrored.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 :

Exemple de barre d'application supérieure centrée.
Figure 3. Barre d'application supérieure centrée.

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 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.AutoMirrored.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() :

Figure 4. Une barre d'application supérieure de taille moyenne qui se réduit lorsque l'utilisateur fait défiler l'écran vers le haut et s'agrandit lorsqu'il le fait défiler vers le bas.

Grande

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

Contrairement aux extraits 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, mais se développe lorsqu'il atteint 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.AutoMirrored.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 :

Écran d'une application avec une barre d'application inférieure contenant quatre icônes d'action sur le côté gauche et un bouton d'action flottant sur la droite.
Figure 5 : Exemple d'implémentation d'une grande barre d'application supérieure.

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 à celle des composables de barre d'application supérieure décrits dans les sections précédentes de cette page. 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 à 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 :

Écran d'une application avec une barre d'application inférieure contenant quatre icônes d'action sur le côté gauche et un bouton d'action flottant sur la droite.
Figure 6 : Exemple d'implémentation d'une barre d'application inférieure.

Ressources supplémentaires