Gli indicatori di avanzamento mostrano visivamente lo stato di un'operazione. Usano il movimento per attirare l'attenzione dell'utente a che punto è il completamento del processo, ad esempio il caricamento o l'elaborazione dei dati. Indicano anche che l'elaborazione è in corso, senza riferimento a quanto potrebbe essere completata.
Considera questi tre casi d'uso in cui potresti utilizzare un indicatore di avanzamento:
- Caricamento di contenuti: durante il recupero di contenuti da una rete, ad esempio il caricamento di un'immagine o di dati di un profilo utente.
- Caricamento file: fornisci all'utente un feedback sulle tempistiche del caricamento.
- Elaborazione lunga: mentre un'app elabora una grande quantità di dati, indica all'utente quanto è stato completato il totale.
In Material Design esistono due tipi di indicatori di avanzamento:
- Determina: mostra esattamente i progressi compiuti.
- Indeterminata: l'animazione continua senza tenere conto del progresso.
Analogamente, un indicatore di avanzamento può assumere una delle due seguenti forme:
- Lineare: una barra orizzontale che si riempie da sinistra a destra.
- Circolare: un cerchio il cui tratto aumenta in lunghezza fino a comprendere l'intera circonferenza del cerchio.
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:
progress
: l'avanzamento attuale visualizzato dall'indicatore. Supera unFloat
tra0.0
e1.0
.color
: il colore dell'indicatore effettivo. In altre parole, la parte del componente che riflette l'avanzamento e che include appieno il componente quando l'avanzamento è completo.trackColor
: il colore della traccia su cui è tracciato l'indicatore.
Determinare gli indicatori
Un determinato indicatore riflette esattamente quanto è completa un'azione. Utilizza i componibili LinearProgressIndicator
o CircularProgressIndicator
e trasmetti un valore per il parametro progress
.
Lo snippet seguente fornisce un esempio relativamente dettagliato. Quando l'utente
preme il pulsante, l'app visualizza l'indicatore di avanzamento e avvia una
coroutine che aumenta gradualmente il valore di progress
. Questo fa sì che l'indicatore di avanzamento si ripeta a sua volta.
@Composable fun LinearDeterminateIndicator() { var currentProgress by remember { mutableStateOf(0f) } var loading by remember { mutableStateOf(false) } val scope = rememberCoroutineScope() // Create a coroutine scope Column( verticalArrangement = Arrangement.spacedBy(12.dp), horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.fillMaxWidth() ) { Button(onClick = { loading = true scope.launch { loadProgress { progress -> currentProgress = progress } loading = false // Reset loading when the coroutine finishes } }, enabled = !loading) { Text("Start loading") } if (loading) { LinearProgressIndicator( progress = { currentProgress }, modifier = Modifier.fillMaxWidth(), ) } } } /** Iterate the progress value */ suspend fun loadProgress(updateProgress: (Float) -> Unit) { for (i in 1..100) { updateProgress(i.toFloat() / 100) delay(100) } }
Quando il caricamento è parzialmente completato, l'indicatore lineare nell'esempio precedente viene visualizzato come segue:
Analogamente, l'indicatore circolare ha il seguente aspetto:
Indicatori indeterminati
Un indicatore indeterminato non riflette quanto manca al completamento di un'operazione, ma utilizza il movimento per indicare all'utente che l'elaborazione è in corso, anche se senza specificare alcun grado di completamento.
Per creare un indicatore di avanzamento indeterminato, utilizza l'elemento componibile LinearProgressIndicator
o CircularProgressIndicator
, ma non trasmettere un valore per progress
. L'esempio seguente mostra come attivare/disattivare un indicatore indeterminato premendo un pulsante.
@Composable fun IndeterminateCircularIndicator() { var loading by remember { mutableStateOf(false) } Button(onClick = { loading = true }, enabled = !loading) { Text("Start loading") } if (!loading) return CircularProgressIndicator( modifier = Modifier.width(64.dp), color = MaterialTheme.colorScheme.secondary, trackColor = MaterialTheme.colorScheme.surfaceVariant, ) }
Di seguito è riportato un esempio di questa implementazione quando l'indicatore è attivo:
Di seguito è riportato un esempio della stessa implementazione ma con LinearProgressIndicator
anziché CircularProgressIndicator
.