Barres d'application

Les barres d'application sont des conteneurs qui donnent à l'utilisateur accès aux principales fonctionnalité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.	Fournit un accès aux tâches et informations clés. Elle contient 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.	Inclut généralement les éléments de navigation principaux. Peut également donner accès à d'autres actions clés, par exemple via un bouton d'action flottant en conteneur.

Figure 1. Une barre d'application supérieure (à gauche) et une 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. Ils vous permettent de créer des interfaces cohérentes qui encapsulent les commandes de navigation et d'action, et qui sont alignées sur les principes de Material Design.

Important :Les barres d'application sont généralement transmises au composable Scaffold, qui dispose de paramètres spécifiques pour les recevoir. Pour en savoir plus sur la façon dont Scaffold permet de structurer facilement votre application, consultez la page Scaffold.

Barres d'application supérieures

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

Type	Exemple
Petit: pour les écrans qui ne nécessitent pas beaucoup de navigation ni d'actions.
Centré: pour les écrans qui comportent une seule action principale.
Moyen: pour les écrans qui nécessitent une navigation et des actions modérées.
Grande: pour les écrans qui nécessitent beaucoup de navigation et d'actions.

Surface de l'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 de navigation. Il s'affiche à gauche de la barre d'application.
• actions: icônes qui permettent à l'utilisateur d'accéder aux actions clés. Ils 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.

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. 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. Voici les éléments à prendre en compte:

• 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, mais 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.

Les exemples suivants mettent en œuvre plusieurs de ces options.

Exemples

Les sections suivantes fournissent des implémentations pour les quatre types différents de barres d'application supérieures, y compris différents exemples de contrôle du 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 à TopAppBar une valeur 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)
    }
}
AppBar.kt

Cette implémentation est la suivante :

Figure 2. Petite barre d'application supérieure.

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 dédié.

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.centerAlignedTopAppBarColors(
                    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)
    }
}
AppBar.kt

Cette implémentation est la suivante :

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

Moyenne

La barre d'application supérieure 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)
    }
}
AppBar.kt

Cette implémentation se présente comme suit, avec une démonstration du comportement de défilement à partir de enterAlwaysScrollBehavior():

Figure 4. Barre d'application supérieure centrée.

Grande

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.

Contrairement aux extraits précédents, cet exemple utilise exitUntilCollapsedScrollBehavior() 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, mais se développe lorsque l'utilisateur fait défiler le contenu interne jusqu'à la fin.

@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)
    }
}
AppBar.kt

Cette implémentation est la suivante :

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 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 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.

@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."
        )
    }
}
AppBar.kt

Cette implémentation est la suivante :

Figure 6 : Exemple d'implémentation d'une barre d'application inférieure.

Remarque :Vous pouvez également utiliser BottomAppBar sans transmettre de valeur pour actions et floatingActionButton. Dans ce cas, vous pouvez créer une barre d'application inférieure personnalisée en remplissant BottomAppBar de contenu comme vous le feriez pour d'autres conteneurs.

Ressources supplémentaires

• Documentation Material3 : barre d'application supérieure
• Documentation Material3 : barre d'application inférieure
• Scaffold