Un pulsante di azione mobile (FAB) è un pulsante a elevata 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 in genere 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 la creazione di note, potrebbe essere utilizzato 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: in un'interfaccia 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 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 molto più di un'icona.
Piattaforma API
Sebbene esistano diversi componibili che puoi utilizzare per creare pulsanti di azione fluttuanti conformi a Material Design, i loro parametri non sono molto diversi. 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 l'elemento componibile
FloatingActionButton
di base. L'esempio seguente illustra un'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 nel seguente modo:
Pulsante piccolo
Per creare un piccolo pulsante di azione mobile, utilizza il componibile SmallFloatingActionButton
. L'esempio seguente mostra come eseguire questa operazione, 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 nel seguente modo:
Pulsante grande
Per creare un pulsante di azione mobile di grandi dimensioni, utilizza
il componibile LargeFloatingActionButton
. Questo componibile non è notevolmente diverso dagli altri esempi, a parte il fatto che genera un pulsante 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") } }
Questa implementazione si presenta nel seguente modo:
Pulsante Estendi
Puoi creare pulsanti di azione floating più complessi con l'elemento componibile ExtendedFloatingActionButton
. La differenza principale tra
e FloatingActionButton
è che ha parametri icon
e text
dedicati. Consentono di creare un pulsante con contenuti più complessi che viene adattato
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 nel seguente modo: