Pulsante di azione mobile

Un pulsante di azione mobile (FAB) è un pulsante molto attivo che consente all'utente eseguire un'azione principale in un'applicazione. Promuove una singola azione mirata che è il percorso più comune che un utente potrebbe seguire e che solitamente viene trovato ancorato in basso a destra dello schermo.

Considera questi tre casi d'uso in cui potresti usare un FAB:

  • Crea nuovo elemento: in un'app per la creazione di note, un FAB potrebbe essere utilizzato per eseguire rapidamente creare una nuova nota.
  • Aggiungi nuovo contatto: in un'app di chat, un FAB potrebbe aprire un'interfaccia che consente l'utente aggiunge qualcuno a una conversazione.
  • Centra posizione: in un'interfaccia mappa, un FAB potrebbe centrare la mappa sullo la posizione attuale dell'utente.

In Material Design, esistono quattro tipi di FAB:

  • FAB: un pulsante di azione mobile di dimensioni ordinarie.
  • FAB piccolo: un pulsante di azione mobile più piccolo.
  • FAB grande: un pulsante di azione mobile più grande.
  • FAB esteso: un pulsante di azione mobile che contiene più di un semplice elemento .
Un esempio di ognuno dei quattro componenti di un pulsante di azione mobile.
Figura 1. I quattro tipi di pulsanti di azione fluttuanti.

Piattaforma API

Sebbene esistano diversi elementi componibili utilizzabili per creare un'azione fluttuante in modo coerente con Material Design, i loro parametri non differiscono molto. Tra i parametri chiave da tenere presente sono i seguenti:

  • onClick: la funzione chiamata quando l'utente preme il pulsante.
  • containerColor: il colore del pulsante.
  • contentColor: il colore dell'icona.

Pulsante di azione mobile

Per creare un pulsante di azione mobile generale, utilizza la classe di base FloatingActionButton componibile. L'esempio seguente mostra un implementazione di base di un FAB:

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

Questa implementazione si presenta nel seguente modo:

Un pulsante di azione mobile standard con angolo arrotondato, ombra e "aggiungi" .
Figura 2. Un pulsante di azione mobile.

Pulsante piccolo

Per creare un piccolo pulsante di azione mobile, utilizza la SmallFloatingActionButton componibile. L'esempio seguente dimostra come fare aggiungendo colori personalizzati.

@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

Questa implementazione si presenta nel seguente modo:

Un'implementazione di SmallFloatingActionButton che contiene un elemento "add" .
Figura 3. Un piccolo pulsante di azione fluttuante.

Pulsante grande

Per creare un pulsante di azione mobile di grandi dimensioni, utilizza la LargeFloatingActionButton componibile. Questo componibile non è molto diverso dagli altri esempi, a parte il fatto che il pulsante diventa più grande.

Di seguito è riportata un'implementazione semplice di un FAB di grandi dimensioni.

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}
FloatingActionButton.kt

Questa implementazione si presenta nel seguente modo:

Un'implementazione di LargeFloatingActionButton che contiene un elemento "add" .
Figura 4. Un grande pulsante di azione mobile.

Pulsante Estendi

Puoi creare pulsanti di azione fluttuanti più complessi con ExtendedFloatingActionButton componibile. La differenza principale e FloatingActionButton è che ha dedicato icon e text parametri. Consentono di creare un pulsante con contenuti più complessi e scalabili i suoi contenuti.

Il seguente snippet illustra come implementare ExtendedFloatingActionButton, con valori di esempio trasmessi per icon e 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

Questa implementazione si presenta nel seguente modo:

Un'implementazione di ExtendedFloatingActionButton che mostra il testo "extended_button" e un'icona di modifica.
Figura 5. Un pulsante di azione mobile con testo e un'icona.

Risorse aggiuntive