Un bouton d'action flottant est un bouton à forte intensité qui permet à l'utilisateur d'effectuer une action principale dans une application. Elle favorise une action unique et ciblée, qui est le chemin le plus courant qu'un utilisateur peut emprunter et qui se trouve généralement en bas à droite de l'écran.
Voici trois cas d'utilisation d'un bouton d'action flottant:
- Create new item (Créer un élément) : dans une application de prise de notes, un bouton d'action flottant peut être utilisé pour créer rapidement une note.
- Ajouter un nouveau contact: dans une application de chat, un bouton d'action flottant peut ouvrir une interface permettant à l'utilisateur d'ajouter une personne à une conversation.
- Emplacement central: dans une interface de carte, un bouton d'action flottant peut centrer la carte sur la position actuelle de l'utilisateur.
Il existe quatre types de boutons d'action flottants dans Material Design:
- Bouton d'action flottant: un bouton d'action flottant de taille normale.
- Petit bouton d'action flottant: un bouton d'action flottant plus petit.
- Grand bouton d'action flottant: un bouton d'action flottant plus grand.
- Bouton d'action flottant étendu: bouton d'action flottant qui contient bien plus qu'une icône.
Surface d'API
Bien qu'il existe plusieurs composables que vous pouvez utiliser pour créer des boutons d'action flottants conformes à Material Design, leurs paramètres ne diffèrent pas beaucoup. Voici quelques-uns des paramètres clés à prendre en compte:
onClick: fonction appelée lorsque l'utilisateur appuie sur le bouton.containerColor: couleur du bouton.contentColor: couleur de l'icône.
Bouton d'action flottant
Pour créer un bouton d'action flottant général, utilisez le composable FloatingActionButton de base. L'exemple suivant illustre l'implémentation de base d'un bouton d'action flottant:
@Composable
fun Example(onClick: () -> Unit) {
FloatingActionButton(
onClick = { onClick() },
) {
Icon(Icons.Filled.Add, "Floating action button.")
}
}
Cette implémentation est la suivante :
Petit bouton
Pour créer un petit bouton d'action flottant, utilisez le composable SmallFloatingActionButton. L'exemple suivant montre comment procéder en ajoutant des couleurs personnalisées.
@Composable
fun SmallExample(onClick: () -> Unit) {
SmallFloatingActionButton(
onClick = { onClick() },
containerColor = MaterialTheme.colorScheme.secondaryContainer,
contentColor = MaterialTheme.colorScheme.secondary
) {
Icon(Icons.Filled.Add, "Small floating action button.")
}
}
Cette implémentation est la suivante :
Grand bouton
Pour créer un grand bouton d'action flottant, utilisez le composable LargeFloatingActionButton. Ce composable n'est pas très différent des autres exemples, mis à part le fait qu'il entraîne un bouton plus grand.
Voici une implémentation simple d'un grand bouton d'action flottant.
@Composable
fun LargeExample(onClick: () -> Unit) {
LargeFloatingActionButton(
onClick = { onClick() },
shape = CircleShape,
) {
Icon(Icons.Filled.Add, "Large floating action button")
}
}
Cette implémentation est la suivante :
Bouton étendu
Vous pouvez créer des boutons d'action flottants plus complexes avec le composable ExtendedFloatingActionButton. La principale différence entre cet élément et FloatingActionButton est qu'il dispose de paramètres icon et text dédiés. Elles vous permettent de créer un bouton avec un contenu plus complexe qui s'adapte à son contenu en conséquence.
L'extrait de code suivant montre comment implémenter ExtendedFloatingActionButton, avec des exemples de valeurs transmis pour icon et text.
@Composable
fun ExtendedExample(onClick: () -> Unit) {
ExtendedFloatingActionButton(
onClick = { onClick() },
icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
text = { Text(text = "Extended FAB") },
)
}
Cette implémentation est la suivante :
