Fortschrittsanzeigen

Fortschrittsanzeigen geben den Status eines Vorgangs visuell wieder. Sie nutzen Bewegung, um die Nutzenden darauf hinzuweisen, wie nahe der Abschluss des Prozesses ist, z. B. das Laden oder Verarbeiten von Daten. Sie können auch angeben, dass die Verarbeitung stattfindet, ohne zu berücksichtigen, wie kurz sie bis zum Abschluss ist.

Betrachten Sie diese drei Anwendungsfälle, in denen Sie eine Fortschrittsanzeige verwenden können:

  • Laden von Inhalten: Beim Abrufen von Inhalten aus einem Netzwerk, z. B. beim Laden eines Bildes oder von Daten für ein Nutzerprofil.
  • Dateiupload: Geben Sie dem Nutzer Feedback dazu, wie lange der Upload dauern kann.
  • Lange Verarbeitung: Wenn eine Anwendung große Datenmengen verarbeitet, informieren Sie den Nutzer darüber, wie viel von der Gesamtzahl abgeschlossen ist.

In Material Design gibt es zwei Arten von Fortschrittsanzeigen:

  • Ermitteln: Zeigt genau an, welche Fortschritte erzielt wurden.
  • Indeterminate: Die Animation wird kontinuierlich ohne Berücksichtigung des Fortschritts ausgeführt.

Ebenso kann eine Fortschrittsanzeige eine der folgenden zwei Formen annehmen:

  • Linear: Eine horizontale Leiste, die von links nach rechts ausgefüllt wird.
  • Kreisförmig: Ein Kreis, dessen Länge so lange ansteigt, bis er den gesamten Umfang des Kreises umfasst.
Eine lineare Fortschrittsanzeige neben einer kreisförmigen Fortschrittsanzeige.
Abbildung 1. Die zwei Arten von Fortschrittsanzeigen.

API-Oberfläche

Es gibt mehrere zusammensetzbare Funktionen, mit denen du unverankerte Aktionsschaltflächen im Einklang mit Material Design erstellen kannst. Ihre Parameter unterscheiden sich jedoch nicht allzu sehr. Zu den wichtigsten Parametern gehören:

  • progress: Der aktuelle Fortschritt, der in der Anzeige angezeigt wird. Übergeben Sie Float zwischen 0.0 und 1.0.
  • color: Die Farbe des eigentlichen Indikators. Das ist der Teil der Komponente, der den Fortschritt widerspiegelt und der die Komponente nach Abschluss des Fortschritts vollständig umfasst.
  • trackColor: Die Farbe des Tracks, über den der Indikator gezeichnet wird.

Indikatoren bestimmen

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

Das folgende Snippet ist ein relativ detailliertes Beispiel. Wenn der Nutzer die Schaltfläche drückt, zeigt die App sowohl die Fortschrittsanzeige als auch eine Koroutine an, die den Wert von progress schrittweise erhöht. Dies führt dazu, dass die Fortschrittsanzeige der Reihe nach nach oben iteriert.

@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 der Ladevorgang teilweise abgeschlossen ist, sieht der lineare Indikator im vorherigen Beispiel so aus:

Analog dazu sieht die kreisförmige Anzeige so aus:

Unbestimmte Indikatoren

Ein unbestimmter Indikator gibt nicht an, wie kurz ein Vorgang abgeschlossen ist. Vielmehr zeigt er dem Nutzer mithilfe von Bewegung an, dass die Verarbeitung läuft. Dabei wird jedoch kein Abschlussgrad angegeben.

Verwenden Sie zum Erstellen einer unbestimmten Fortschrittsanzeige die zusammensetzbare Funktion LinearProgressIndicator oder CircularProgressIndicator, aber übergeben Sie keinen Wert für progress. Das folgende Beispiel zeigt, wie Sie einen unbestimmten Indikator durch Drücken einer Schaltfläche aktivieren bzw. deaktivieren 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

Hier sehen Sie ein Beispiel für diese Implementierung, wenn der Indikator aktiv ist:

Das folgende Beispiel zeigt dieselbe Implementierung, aber mit LinearProgressIndicator anstelle von CircularProgressIndicator.

Zusätzliche Ressourcen