Bouton d'action flottant

Un bouton d'action flottant (FAB) est un bouton à forte intensité qui permet à l'utilisateur effectuer une action principale dans une application. Elle favorise une seule action ciblée qui est le chemin le plus courant qu’un utilisateur peut emprunter et qui se trouve généralement ancrée en bas à droite de l'écran.

Voici trois cas d'utilisation dans lesquels vous pourriez utiliser un bouton d'action flottant:

  • Créer un élément: dans une application de prise de notes, un bouton d'action flottant peut être utilisé pour créer une note.
  • Ajouter un contact: dans une application de chat, un bouton d'action flottant peut ouvrir une interface qui permet à l'utilisateur ajoute quelqu'un à une conversation.
  • Centrer la position: dans une interface cartographique, un bouton d'action flottant peut centrer la carte sur la l'emplacement actuel de l'utilisateur.

Il existe quatre types de boutons d'action flottants dans Material Design:

  • Bouton d'action flottant: bouton d'action flottant de taille standard.
  • Petit bouton d'action flottant: bouton d'action flottant plus petit.
  • Grand bouton d'action flottant: bouton d'action flottant plus grand.
  • Bouton d'action flottant étendu: bouton d'action flottant qui contient bien plus qu'un simple bouton .
<ph type="x-smartling-placeholder">
</ph> Exemple de chacun des quatre composants du bouton d&#39;action flottant.
Figure 1. Les quatre types de boutons d'action flottants

Surface de l'API

Bien qu'il existe plusieurs composables pour créer une action flottante cohérents avec Material Design, leurs paramètres ne diffèrent pas considérablement. Voici quelques-uns des paramètres clés à garder à l'esprit:

  • 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 la fonction FloatingActionButton. L'exemple suivant illustre l'implémentation de base d'un FAB:

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}
FloatingActionButton.kt

Cette implémentation est la suivante :

Bouton d&#39;action flottant standard avec un coin arrondi, une ombre et un bouton &quot;add&quot; .
Figure 2. Un bouton d'action flottant

Petit bouton

Pour créer un petit bouton d'action flottant, utilisez la méthode SmallFloatingActionButton. L'exemple suivant illustre 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.")
    }
}
FloatingActionButton.kt

Cette implémentation est la suivante :

Une implémentation de SmallFloatingActionButton qui contient un élément &quot;add&quot; .
Figure 3. Un petit bouton d'action flottant.

Bouton de grande taille

Pour créer un grand bouton d'action flottant, utilisez la méthode LargeFloatingActionButton. Ce composable n'est pas est très différente des autres exemples, mis à part le fait qu'il le bouton sera plus gros.

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

Cette implémentation est la suivante :

Une implémentation de LargeFloatingActionButton qui contient un élément &quot;add&quot; .
Figure 4. Un grand bouton d'action flottant.

Bouton étendu

Vous pouvez créer des boutons d'action flottants plus complexes à l'aide de la ExtendedFloatingActionButton. La principale différence entre et FloatingActionButton correspond aux icon et text dédiés paramètres. Elles vous permettent de créer un bouton avec un contenu plus complexe qui s'adapte pour s'adapter à son contenu.

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") },
    )
}
FloatingActionButton.kt

Cette implémentation est la suivante :

Implémentation d&#39;ExtendedFloatingActionButton qui affiche le texte &quot;bouton étendu&quot; et une icône de modification.
Figure 5 : Un bouton d'action flottant avec du texte et une icône

Ressources supplémentaires