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.
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.") } }
Questa implementazione si presenta come segue:
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.") } }
Questa implementazione si presenta come segue:
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") } }
Questa implementazione si presenta come segue:
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") }, ) }
Questa implementazione si presenta come segue: