Fortschrittsanzeigen

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

Sehen wir uns drei Anwendungsfälle an, in denen Sie eine Fortschrittsanzeige verwenden könnten:

  • Inhalte laden: Beim Abrufen von Inhalten aus einem Netzwerk, z. B. beim Laden eines Bildes oder von Daten für ein Nutzerprofil.
  • Datei-Upload: Geben Sie dem Nutzer Feedback dazu, wie lange der Upload dauern könnte.
  • Lange Verarbeitung: Wenn eine App eine große Datenmenge verarbeitet, solltest du dem Nutzer mitteilen, wie viel der Gesamtdatenmenge bereits verarbeitet wurde.

In Material Design gibt es zwei Arten von Fortschrittsanzeigen:

  • Determiniert: Zeigt genau an, wie viel Fortschritt erzielt wurde.
  • Unbestimmt: Wird unabhängig vom Fortschritt kontinuierlich animiert.

Ebenso kann eine Fortschrittsanzeige 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 er den gesamten Umfang des Kreises umfasst.
Eine lineare Fortschrittsanzeige neben einer kreisförmigen Fortschrittsanzeige.
Abbildung 1. Die beiden Arten von Fortschrittsanzeigen.

API-Oberfläche

Es gibt mehrere Composables, mit denen Sie Fortschrittsanzeigen erstellen können, die dem Material Design entsprechen. Ihre Parameter unterscheiden sich jedoch nicht wesentlich. Zu den wichtigsten Parametern, die Sie beachten sollten, gehören:

  • progress: Der aktuelle Fortschritt, der von der Anzeige dargestellt wird. Übergeben Sie einen Float zwischen 0.0 und 1.0.
  • color: Die Farbe des eigentlichen 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 der Spur, über die der Indikator gezeichnet wird.

Bestimmte Indikatoren

Ein determinierter Indikator gibt genau an, wie weit eine Aktion abgeschlossen 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 klickt, zeigt die App die Fortschrittsanzeige an und startet eine Koroutine, die den Wert von progress schrittweise erhöht. Dadurch wird die Fortschrittsanzeige schrittweise erhöht.

@Composable
fun LinearDeterminateIndicator() {
    var currentProgress by remember { mutableFloatStateOf(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)
    }
}

Wenn der Ladevorgang teilweise abgeschlossen ist, wird die lineare Anzeige im vorherigen Beispiel so dargestellt:

Die kreisförmige Anzeige sieht so aus:

Unbestimmte Indikatoren

Eine unbestimmte Anzeige gibt nicht an, wie weit ein Vorgang abgeschlossen ist. Stattdessen wird dem Nutzer durch Bewegung angezeigt, dass die Verarbeitung läuft, ohne dass der Grad der Fertigstellung angegeben wird.

Wenn Sie eine unbestimmte Fortschrittsanzeige erstellen möchten, verwenden Sie das Composable LinearProgressIndicator oder CircularProgressIndicator, übergeben Sie aber keinen Wert für progress. Das folgende Beispiel zeigt, wie Sie eine unbestimmte Anzeige per Tastendruck 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,
    )
}

Hier ein Beispiel für diese Implementierung, wenn die Anzeige aktiv ist:

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

Zusätzliche Ressourcen