Fortschrittsanzeige erstellen

Fortschrittsanzeigen geben den Status eines Vorgangs visuell an. Mithilfe von Bewegungen wird der Nutzer darauf aufmerksam gemacht, 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.

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.
  • 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 abgespielt, ohne Rücksicht auf den Fortschritt.

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.

Versionskompatibilität

Für diese Implementierung muss das minSDK Ihres Projekts auf API-Level 21 oder höher festgelegt sein.

Abhängigkeiten

Bestimmte Indikatoren erstellen

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 nach und nach erhöht. Dadurch wird der Fortschrittsanzeige nacheinander ein höherer Wert zugewiesen.

Ergebnisse

Wenn der Ladevorgang teilweise abgeschlossen ist, sieht die lineare Anzeige im vorherigen Beispiel so aus:

Der kreisförmige Indikator sieht so aus:

Unbestimmte Indikatoren erstellen

Ein unbestimmter Indikator gibt nicht an, wie weit ein Vorgang fortgeschritten ist. Stattdessen wird dem Nutzer durch Bewegung angezeigt, dass die Verarbeitung läuft, ohne den Fortschritt anzugeben.

Wenn Sie einen unbestimmten Fortschrittsindikator erstellen möchten, verwenden Sie das LinearProgressIndicator- oder CircularProgressIndicator-Kompositelement, 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.

Ergebnisse

Im folgenden Beispiel ist die Anzeige aktiv:

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

Wichtige Fakten

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 einen Float zwischen 0.0 und 1.0 ein.
  • color: Die Farbe des Indikators, also der Teil der Komponente, der den Fortschritt widerspiegelt und die Komponente vollständig umschließt, wenn der Fortschritt abgeschlossen ist.
  • trackColor: Die Farbe des Tracks, über den der Indikator gezeichnet wird.

Sammlungen, die diesen Leitfaden enthalten

Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:

Hier erfahren Sie, wie Sie mit kombinierbaren Funktionen ganz einfach ansprechende UI-Komponenten auf der Grundlage des Material Design-Designsystems erstellen können.
Mit Listen und Rastern können Sie Sammlungen in Ihrer App in einer visuell ansprechenden und für Nutzer leicht verständlichen Form präsentieren.

Hast du Fragen oder Feedback?

Auf unserer Seite mit häufig gestellten Fragen finden Sie Kurzanleitungen. Sie können sich auch gern an uns wenden.