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 darauf hinweisen, ohne Bezug darauf, wie nah es am Ende sein könnte.

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

  • Laden von Inhalten: Beim Abrufen von Inhalten aus einem Netzwerk, beispielsweise beim Laden ein Bild oder Daten für ein Nutzerprofil.
  • Dateiupload: Geben Sie dem Nutzer Feedback dazu, wie lange der Upload dauern kann.
  • Lange Verarbeitung: Wenn in einer App große Datenmengen verarbeitet werden, Nutzenden vermitteln, wie viel der Gesamtmenge abgeschlossen ist.

In Material Design gibt es zwei Arten von Fortschrittsanzeigen:

  • Ermitteln: Zeigt genau an, welche Fortschritte erzielt wurden.
  • Indeterminate: Die Animation wird kontinuierlich und 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.
  • Kreislauf: Ein Kreis, dessen Kontur so lange ansteigt, bis er das Element den gesamten Umfang des Kreises.
<ph type="x-smartling-placeholder">
</ph> 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 Sie Fortschrittsanzeigen erstellen können. die mit Material Design übereinstimmen, unterscheiden sich ihre Parameter nur geringfügig. Unter Folgende wichtige Parameter sollten Sie dabei berücksichtigen:

  • 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 heißt, der Teil des Komponente, die 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.

Indikatoren bestimmen

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

Das folgende Snippet ist ein relativ detailliertes Beispiel. Wenn Nutzende die Taste drückt, zeigt die App die Fortschrittsanzeige an und startet eine Koroutine, die den Wert von progress allmählich erhöht. Dies führt dazu, dass die eine Fortschrittsanzeige, um der Reihe nach nach oben zu iterieren.

@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, wird der lineare Indikator Beispiel sieht so aus:

Analog dazu sieht die kreisförmige Anzeige so aus:

Unbestimmte Indikatoren

Ein Indeterminate-Indikator gibt nicht wieder, wie kurz ein Vorgang zum Abschluss ist. ist. Stattdessen werden Bewegungen genutzt, um dem Nutzer zu signalisieren, dass die Verarbeitung noch läuft. aber ohne einen Abschlussgrad anzugeben.

Verwenden Sie die LinearProgressIndicator, um eine unbestimmte Fortschrittsanzeige zu erstellen. oder CircularProgressIndicator zusammensetzbar, aber übergeben Sie keinen Wert für progress Das folgende Beispiel zeigt, wie Sie zwischen Unbestimmte Anzeige durch Drücken einer Taste.

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

Im Folgenden finden Sie ein Beispiel für die gleiche Implementierung, aber mit LinearProgressIndicator statt CircularProgressIndicator.

Weitere Informationen