Fortschrittsanzeigen

Fortschrittsanzeigen zeigen den Status eines Vorgangs visuell an. Sie verwenden Bewegungselemente, um Nutzer darauf hinzuweisen, wie kurz der Prozess abgeschlossen ist, z. B. das Laden oder Verarbeiten von Daten. Sie können auch anzeigen, dass die Verarbeitung stattfindet, ohne dass es einen Hinweis darauf gibt, wie kurz die Verarbeitung abgeschlossen ist.

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

  • Inhalte laden: Beim Abrufen von Inhalten aus einem Netzwerk, z. B. beim Laden eines Bildes oder Daten für ein Nutzerprofil.
  • Dateiupload: Geben Sie dem Nutzer Feedback dazu, wie lange der Upload dauern wird.
  • Lange Verarbeitung: Während eine Anwendung eine große Datenmenge verarbeitet, vermitteln Sie dem Nutzer, wie viel der Gesamtmenge abgeschlossen ist.

In Material Design gibt es zwei Arten von Fortschrittsindikatoren:

  • Bestimmen: Zeigt genau an, wie viele Fortschritte gemacht wurden.
  • Unbestimmt: Die Animation wird kontinuierlich fortgesetzt, ohne den Fortschritt zu berücksichtigen.

Ebenso kann eine Fortschrittsanzeige eine der folgenden Formen annehmen:

  • Linear: Ein horizontaler Balken, der sich von links nach rechts ausfüllt.
  • Kreisförmig: Ein Kreis, dessen Strich so lange zunimmt, bis er den gesamten Umfang des Kreises einnimmt.
Eine lineare Fortschrittsanzeige und eine kreisförmige Fortschrittsanzeige.
Abbildung 1. Die zwei Arten von Fortschrittsanzeigen.

API-Oberfläche

Obwohl es mehrere zusammensetzbare Funktionen gibt, die Sie zum Erstellen von Floating-Aktionsschaltflächen gemäß Material Design verwenden können, unterscheiden sich ihre Parameter nicht wesentlich. Zu den wichtigsten Parametern, die Sie im Hinterkopf behalten sollten, gehören:

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

Indikatoren bestimmen

Ein bestimmter Indikator gibt genau an, wie abgeschlossen 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 enthält ein relativ detailliertes Beispiel. Wenn der Nutzer die Schaltfläche drückt, zeigt die App sowohl die Fortschrittsanzeige an als auch eine Koroutine an, die den Wert von progress schrittweise erhöht. Dadurch iteriert der Fortschrittsindikator der Reihe nach.

@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:

In ähnlicher Weise wird die kreisförmige Anzeige so dargestellt:

Unbestimmte Indikatoren

Ein unbestimmter Indikator gibt nicht an, wie nah ein Vorgang abgeschlossen ist. Stattdessen zeigt er dem Nutzer anhand von Bewegungen an, dass die Verarbeitung noch läuft, allerdings ohne Angabe des Abschlussgrads.

Um einen unbestimmten Fortschrittsindikator zu erstellen, verwenden Sie die zusammensetzbare Funktion LinearProgressIndicator oder CircularProgressIndicator, aber übergeben Sie keinen Wert für progress. Das folgende Beispiel zeigt, wie Sie eine unbestimmte Anzeige durch Drücken einer Taste 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

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

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

Weitere Informationen