Fortschrittsanzeigen

Fortschrittsanzeigen geben den Status eines Vorgangs visuell wieder. Sie verwenden Bewegung, um den Nutzer darauf aufmerksam zu machen, wie weit der Prozess fortgeschritten ist, z. B. beim Laden oder Verarbeiten von Daten. Sie können auch darauf hinweisen, dass eine Verarbeitung stattfindet, ohne darauf einzugehen, wie weit sie abgeschlossen ist.

Hier sind drei Anwendungsfälle, in denen Sie einen Fortschrittsindikator verwenden können:

• Inhalte werden geladen: Inhalte werden aus einem Netzwerk abgerufen, z. B. ein Bild oder Daten für ein Nutzerprofil.
• Dateiupload: Gib dem Nutzer Feedback dazu, wie lange der Upload dauern könnte.
• Lange Verarbeitung: Wenn eine App eine große Menge an Daten verarbeitet, sollten Sie dem Nutzer mitteilen, wie viel des Gesamtvorgangs abgeschlossen ist.

In Material Design gibt es zwei Arten von Fortschrittsanzeigen:

• Determinate: Zeigt genau an, wie viel Fortschritt erzielt wurde.
• Unbestimmt: Die Animation wird kontinuierlich ausgeführt, unabhängig vom Fortschritt.

Ein Fortschrittsindikator kann eine der beiden folgenden Formen annehmen:

• Linear: Ein horizontaler Balken, der sich von links nach rechts füllt.
• Kreisförmig: Ein Kreis, dessen Strichlänge zunimmt, bis sie den gesamten Umfang des Kreises umfasst.

API-Oberfläche

Es gibt zwar mehrere Composables, mit denen Sie Fortschrittsindikatoren erstellen können, die dem Material Design entsprechen, aber ihre Parameter unterscheiden sich nicht wesentlich. Zu den wichtigsten Parametern, die Sie berücksichtigen sollten, gehören die folgenden:

• progress: Der aktuelle Fortschritt, der vom Indikator angezeigt wird. Übergeben Sie einen Float zwischen 0.0 und 1.0.
• color: Die Farbe des tatsächlichen Indikators. Das ist der Teil der Komponente, der den Fortschritt widerspiegelt und die Komponente vollständig umfasst, wenn der Fortschritt abgeschlossen ist.
• trackColor: Die Farbe des Tracks, über dem der Indikator gezeichnet wird.

Deterministische Indikatoren

Ein bestimmter Indikator gibt genau an, wie vollständig eine Aktion ist. Verwenden Sie entweder die Composables LinearProgressIndicator oder CircularProgressIndicator und übergeben Sie einen Wert für den Parameter progress.

Das folgende Snippet enthält ein relativ detailliertes Beispiel. Wenn der Nutzer auf die Schaltfläche drückt, zeigt die App sowohl die Fortschrittsanzeige an als auch eine Coroutine, die den Wert von progress schrittweise erhöht. Dadurch wird der Fortschrittsanzeiger nacheinander hochgezählt.

@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

Wenn das Laden teilweise abgeschlossen ist, sieht der lineare Indikator im vorherigen Beispiel so aus:

Die kreisförmige Anzeige sieht so aus:

Unbestimmte Indikatoren

Eine unbestimmte Anzeige gibt nicht an, wie weit eine Operation abgeschlossen ist. Stattdessen wird durch Bewegung angezeigt, dass die Verarbeitung läuft, ohne dass ein Abschlussgrad angegeben wird.

Wenn Sie einen unbestimmten Fortschrittsindikator erstellen möchten, verwenden Sie die Composables LinearProgressIndicator oder CircularProgressIndicator, übergeben Sie aber keinen Wert für progress. Das folgende Beispiel zeigt, wie Sie durch Drücken einer Schaltfläche einen unbestimmten Indikator ein- und ausschalten können.

@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

Im Folgenden sehen Sie ein Beispiel für diese Implementierung, wenn die Anzeige aktiv ist:

Im Folgenden finden Sie ein Beispiel für dieselbe Implementierung, jedoch mit LinearProgressIndicator anstelle von CircularProgressIndicator.

Zusätzliche Ressourcen

• Material UI-Dokumentation