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:
