Fortschrittsanzeigen

Fortschrittsanzeigen geben den Status eines Vorgangs visuell an. Sie nutzen Bewegung, um den Nutzern zu zeigen, wie weit der Vorgang fortgeschritten ist, z. B. beim Laden oder Verarbeiten von Daten. Sie können auch darauf hinweisen, dass die Bearbeitung läuft, ohne anzugeben, wie weit sie fortgeschritten ist.

Hier sind drei Anwendungsfälle, in denen Sie eine Fortschrittsanzeige verwenden könnten:

  • Inhalte laden: Beim Abrufen von Inhalten aus einem Netzwerk, z. B. beim Laden eines Bilds oder von Daten für ein Nutzerprofil.
  • Dateiupload: Geben Sie dem Nutzer Feedback dazu, wie lange der Upload dauern kann.
  • Lange Verarbeitung: Während eine App eine große Menge an Daten verarbeitet, informieren Sie den Nutzer darüber, wie viel Prozent der Gesamtmenge bereits verarbeitet wurden.

In Material Design gibt es zwei Arten von Fortschrittsanzeigen:

  • Bestimmt: Hier sehen Sie genau, wie weit Sie mit der Aufgabe gekommen sind.
  • Unbestimmt: Die Animation wird kontinuierlich ohne Rücksicht auf den Fortschritt ausgeführt.

Eine Fortschrittsanzeige kann ebenfalls eine der folgenden beiden Formen haben:

  • Linear: Ein horizontaler Balken, der sich von links nach rechts füllt.
  • Kreisförmig: Ein Kreis, dessen Strich sich so lange verlängert, bis er den gesamten Umfang des Kreises umschließt.
Eine lineare Fortschrittsanzeige neben einer kreisförmigen Fortschrittsanzeige.
Abbildung 1: Die beiden Arten von Fortschrittsanzeigen.

API-Oberfläche

Es gibt zwar mehrere Composeables, mit denen Sie Fortschrittsanzeigen im Material Design-Stil erstellen können, ihre Parameter unterscheiden sich jedoch nicht wesentlich. Zu den wichtigsten Parametern gehören:

  • progress: Der aktuelle Fortschritt, der im Indikator angezeigt wird. Geben Sie eine Float zwischen 0.0 und 1.0 ein.
  • 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 den der Indikator gezeichnet wird.

Bestimmte Indikatoren

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

Das folgende Snippet ist ein relativ detailliertes Beispiel. Wenn der Nutzer auf die Schaltfläche drückt, zeigt die App sowohl die Fortschrittsanzeige als auch eine Coroutine an, die den Wert von progress allmählich erhöht. Dadurch wird der Fortschrittsanzeige nacheinander ein höherer Wert zugewiesen.

@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 die lineare Anzeige im vorherigen Beispiel so aus:

Der kreisförmige Indikator sieht so aus:

Unbestimmte Indikatoren

Ein unbestimmter Indikator gibt nicht an, wie weit ein Vorgang fortgeschritten ist. Stattdessen wird dem Nutzer durch Bewegung angezeigt, dass die Verarbeitung noch nicht abgeschlossen ist, ohne dass der Fortschritt angegeben wird.

Wenn Sie einen unbestimmten Fortschrittsindikator erstellen möchten, verwenden Sie das LinearProgressIndicator- oder CircularProgressIndicator-Komposit, geben Sie aber keinen Wert für progress ein. Das folgende Beispiel zeigt, wie Sie einen unbestimmten Indikator durch Drücken einer Schaltfläche umschalten 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 finden 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.

Weitere Informationen