Pulsante di azione mobile

Un pulsante di azione mobile (FAB) è un pulsante molto enfasi che consente all'utente di eseguire un'azione principale in un'applicazione. Promuove una singola azione mirata, che è il percorso più comune che un utente potrebbe intraprendere e che solitamente si trova ancorata alla parte 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 scrivere note, potresti utilizzare un FAB per creare rapidamente una nuova nota.
  • Aggiungi nuovo contatto: in un'app di chat, un FAB potrebbe aprire un'interfaccia che consente all'utente di aggiungere qualcuno a una conversazione.
  • Centra posizione: nell'interfaccia di una mappa, un FAB potrebbe centrare la mappa sulla posizione corrente dell'utente.

In Material Design, esistono quattro tipi di FAB:

  • FAB: un pulsante di azione mobile di dimensioni normali.
  • 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'icona.
Esempio di ciascuno dei quattro componenti dei pulsanti di azione mobili.
Figura 1. I quattro tipi di pulsanti di azione mobili.

Piattaforma API

Anche se esistono diversi elementi componibili che puoi utilizzare per creare pulsanti di azione mobili coerenti con Material Design, i loro parametri non sono molto diversi. Tra i parametri principali da tenere presente ci sono:

  • 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 l'elemento componibile di base FloatingActionButton. L'esempio seguente illustra l'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 come segue:

Un pulsante di azione mobile standard con angolo arrotondato, ombra e icona Aggiungi.
Figura 2. Un pulsante di azione mobile.

Pulsante piccolo

Per creare un piccolo pulsante di azione mobile, utilizza l'elemento componibile SmallFloatingActionButton. L'esempio seguente mostra come fare, con l'aggiunta di 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 come segue:

Un'implementazione di SmallFloatingActionButton che contiene un'icona "aggiungi".
Figura 3. Un piccolo pulsante di azione mobile.

Pulsante grande

Per creare un pulsante di azione mobile di grandi dimensioni, utilizza l'elemento componibile LargeFloatingActionButton. Questo componibile non è notevolmente diverso dagli altri esempi, a parte il fatto che genera un pulsante più grande.

Di seguito è riportata una semplice implementazione 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 come segue:

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

Pulsante Estensione

Puoi creare pulsanti di azione mobili più complessi con l'elemento componibile ExtendedFloatingActionButton. La differenza principale tra questo e FloatingActionButton è che ha parametri icon e text dedicati. Consentono di creare un pulsante con contenuti più complessi che si adattano in modo adeguato ai relativi contenuti.

Lo snippet seguente mostra 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 come segue:

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

Risorse aggiuntive