Barres d'application

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

Type	Apparence	Objectif
Barre d'application supérieure	En haut de l'écran.	Permet d'accéder aux tâches et informations clés. héberge généralement un titre, des tâches principales et certains éléments de navigation.
Barre d'application inférieure	En bas de l'écran.	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 en conteneur.

Pour implémenter une barre d'application supérieure et une barre d'application inférieure, utilisez les TopAppBar et BottomAppBar, respectivement. Elles vous permettent de créer qui encapsulent les commandes de navigation et d'action, et qui sont conforme 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
Petit: pour les écrans qui ne nécessitent pas beaucoup de navigation ou d'actions.
Aligné au centre: pour les écrans qui ne comportent qu'une seule action principale.
Moyen: pour les écrans qui nécessitent un peu de navigation et d'actions.
Grand: 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 différentes applications principales 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. Figure sur le à gauche de la barre d'application.
• actions: icônes qui permettent à l'utilisateur d'accéder aux actions clés. Elles apparaissent à droite de la barre d'application.
• scrollBehavior: détermine comment la barre d'application supérieure réagit au défilement de contenu interne de l'échafaudage.
• colors: détermine la façon dont la barre d'application s'affiche.

Comportement du défilement

Vous pouvez contrôler le comportement de la barre d'application lorsque l'utilisateur fait défiler la page contenu interne de l'échafaudage. Pour ce faire, créez une instance de TopAppBarScrollBehavior, puis transmettez-le à la barre d'application supérieure pour la classe scrollBehavior.

Il existe trois types de TopAppBarScrollBehavior. Les voici:

• enterAlwaysScrollBehavior: lorsque l'utilisateur extrait l'élément interne de l'échafaudage. la barre d'application supérieure se réduit. La barre d'application se développe lorsque l'utilisateur extrait le contenu interne.
• exitUntilCollapsedScrollBehavior: semblable à enterAlwaysScrollBehavior, Toutefois, la barre d'application se développe lorsque l'utilisateur atteint la fin de la contenu interne de l'échafaudage.
• pinnedScrollBehavior: la barre d'application reste en place et ne réagit pas à faire défiler l'écran.

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 les barres d'application supérieures, avec des exemples variés 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 la barre d'application supérieure la plus simple possible et, 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 de la fenêtre interne contenus.

@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 :

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 la classe composable CenterAlignedTopAppBar dédié.

Cet exemple utilise enterAlwaysScrollBehavior() pour obtenir la valeur qu'il transmet pour scrollBehavior. Ainsi, la barre se réduit lorsque l'utilisateur fait défiler la page 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 :

Moyenne

La barre d'application supérieure moyenne place le titre sous les icônes supplémentaires. Pour créer Premièrement, utilisez le composable MediumTopAppBar.

Comme l'extrait précédent, cet exemple utilise enterAlwaysScrollBehavior() pour obtenir la valeur qu'elle 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 de la façon le comportement de enterAlwaysScrollBehavior() s'affiche:

<ph type="x-smartling-placeholder">

Grande

Une grande barre d'application supérieure est semblable à la barre moyenne, bien que la marge intérieure entre les le titre et les icônes sont plus grands et occupent plus d'espace à l'écran. À créez-en un, utilisez le composable LargeTopAppBar.

Contrairement aux extraits précédents, cet exemple utilise exitUntilCollapsedScrollBehavior() pour obtenir la valeur qu'il transmet scrollBehavior Ainsi, la barre se réduit lorsque l'utilisateur fait défiler la page contenu interne de l'échafaudage, mais se développe lorsque l'utilisateur fait défiler la page jusqu'à la fin le 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)
    }
}
AppBar.kt

Cette implémentation est la suivante :

Barre d'application inférieure

Pour créer une barre d'application inférieure, utilisez le composable BottomAppBar. Utilisation est assez semblable aux composables de la barre d'application supérieure décrits dans dans les sections précédentes de cette page. Vous transmettez des composables pour la clé suivante paramètres:

• actions: série d'icônes qui s'affichent sur le côté gauche de la barre. Ces sont généralement des actions clés pour l'écran donné ou des éléments de navigation.
• floatingActionButton: bouton d'action flottant qui apparaît sur la 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 :

Ressources supplémentaires

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