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 .
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.") } }
Questa implementazione si presenta nel seguente modo:
![Un pulsante di azione mobile standard con angolo arrotondato, ombra e "aggiungi" .](https://developer.android.com/static/develop/ui/compose/images/components/fab.png?authuser=6&hl=it)
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.") } }
Questa implementazione si presenta nel seguente modo:
![Un'implementazione di SmallFloatingActionButton che contiene un elemento "add" .](https://developer.android.com/static/develop/ui/compose/images/components/fab-small.png?authuser=6&hl=it)
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") } }
Questa implementazione si presenta nel seguente modo:
![Un'implementazione di LargeFloatingActionButton che contiene un elemento "add" .](https://developer.android.com/static/develop/ui/compose/images/components/fab-large.png?authuser=6&hl=it)
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") }, ) }
Questa implementazione si presenta nel seguente modo:
![Un'implementazione di ExtendedFloatingActionButton che mostra il testo "extended_button" e un'icona di modifica.](https://developer.android.com/static/develop/ui/compose/images/components/fab-extended.png?authuser=6&hl=it)