Indicatori di avanzamento

Gli indicatori di avanzamento mostrano visivamente lo stato di un'operazione. Usano il movimento per portare all'attenzione dell'utente quanto sia quasi completato il processo, ad esempio caricare o elaborare i dati. Possono anche indicare che l'elaborazione sta richiedendo posizione, senza riferirsi a quanto potrebbe essere vicina al completamento.

Considera questi tre casi d'uso in cui potresti utilizzare un indicatore di avanzamento:

  • Caricamento dei contenuti: durante il recupero dei contenuti da una rete, ad esempio il caricamento. un'immagine o i dati di un profilo utente.
  • Caricamento di file: fornisci all'utente un feedback sulle tempistiche del caricamento.
  • Elaborazione lunga: mentre un'app elabora una grande quantità di dati, comunicano all'utente quanti dati totali sono stati completati.

In Material Design, esistono due tipi di indicatori di avanzamento:

  • Determina: mostra esattamente il grado di avanzamento fatto.
  • Indeterminato: l'animazione viene eseguita in modo continuo, senza tenere conto dei progressi.

Analogamente, un indicatore di avanzamento può avere una delle seguenti forme:

  • Lineare: una barra orizzontale che si riempie da sinistra a destra.
  • Circolare: un cerchio il cui tratto cresce in lunghezza fino a includere la l'intera circonferenza del cerchio.
di Gemini Advanced.
Un indicatore di avanzamento lineare e un indicatore di avanzamento circolare.
Figura 1. I due tipi di indicatori di avanzamento.

Piattaforma API

Sebbene esistano diversi componibili utilizzabili per creare indicatori di avanzamento coerenti con Material Design, i loro parametri non differiscono molto. Tra I parametri chiave da tenere presenti sono i seguenti:

  • progress: l'avanzamento attuale visualizzato dall'indicatore. Supera un Float tra 0.0 e 1.0.
  • color: il colore dell'indicatore effettivo. In altre parole, la parte componente che riflette l'avanzamento e che lo comprende per intero. una volta completati i progressi.
  • trackColor: il colore della traccia su cui è tracciato l'indicatore.
di Gemini Advanced.

Determinare gli indicatori

Un determinato indicatore riflette esattamente il livello di completamento di un'azione. Utilizza uno dei due LinearProgressIndicator o CircularProgressIndicator componibili e passare un valore per il parametro progress.

Il seguente snippet fornisce un esempio relativamente dettagliato. Quando l'utente preme il pulsante, l'app visualizza l'indicatore di avanzamento e avvia un coroutine che aumenta gradualmente il valore di progress. Questo fa sì che l'indicatore di avanzamento per ripetere l'iterazione a rotazione.

@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)
    }
}
ProgressIndicator.kt

Quando il caricamento è parzialmente completato, l'indicatore lineare nella precedente è il seguente:

Analogamente, l'indicatore circolare appare come segue:

Indicatori indeterminati

Un indicatore di indeterminato non riflette quanto manca al completamento di un'operazione dall'indirizzo IP interno. Utilizza invece il movimento per indicare all'utente che l'elaborazione è in corso, ma senza specificare il grado di completamento.

Per creare un indicatore di avanzamento indeterminato, utilizza l'LinearProgressIndicator o CircularProgressIndicator componibile, ma non passare un valore per progress. L'esempio seguente mostra come attivare/disattivare una indicatore di indeterminatezza con la pressione di 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,
    )
}
ProgressIndicator.kt

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.

Risorse aggiuntive