Afficher une barre d'application inférieure

Créez une barre d'application inférieure pour aider les utilisateurs à naviguer et à accéder aux fonctions de votre application. Suivez ces conseils pour ajouter une barre d'application inférieure à votre application à l'aide du composable BottomAppBar.

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 une barre d'application inférieure

Utilisez le code suivant pour créer une barre d'application inférieure contenant quatre boutons d'icône et un bouton d'action flottant:

@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

Points clés concernant le code

  • Scaffold externe avec un bottomBar défini.
  • Implémentation de bottomBar contenant une liste d'actions.
  • Actions qui sont des implémentations de IconButton contenant Icon pour le texte de description de l'image et du contenu, chacune avec un lambda onClick pour effectuer ces actions.

Vous pouvez transmettre des composables pour les principaux paramètres suivants:

  • actions: série d'icônes qui s'affichent à 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.

Résultats

Exemple de barre d'application inférieure
Figure 1. Exemple de barre d'application inférieure.

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'UI, 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