Tworzenie wskaźnika postępu

Wskaźniki postępu wizualnie przedstawiają stan operacji. Wykorzystują one ruch, aby zwrócić uwagę użytkownika na to, jak blisko jest do zakończenia procesu, np. wczytywania lub przetwarzania danych. Mogą też oznaczać, że przetwarzanie jest w toku, bez wskazywania, jak blisko jest ono do zakończenia.

Oto 3 przypadki użycia, w których możesz użyć wskaźnika postępu:

  • Ładowanie treści: podczas pobierania treści z sieci, np. wczytywania obrazu lub danych do profilu użytkownika.
  • Przesyłanie pliku: podaj użytkownikowi informacje o tym, ile czasu może potrwać przesyłanie.
  • Długie przetwarzanie: gdy aplikacja przetwarza dużą ilość danych, powinna poinformować użytkownika, jak duży jest postęp przetwarzania.

W stylu Material Design występują 2 rodzaje wskaźnika postępu:

  • Określ: pokazuje, jak duży postęp został osiągnięty.
  • Nieokreślony: animacja jest ciągła i niezależna od postępu.

Podobnie wskaźnik postępu może mieć jedną z tych form:

  • Liniowy: pasek poziomy, który wypełnia się od lewej do prawej.
  • Okrągły: okrąg, którego obrys wydłuża się, aż dookoła obejmuje cały okrąg.

Zgodność wersji

Ta implementacja wymaga, aby minimalna wersja pakietu SDK projektu była ustawiona na poziom API 21 lub wyższy.

Zależności

Tworzenie wskaźników nieokreślonych

Wskaźnik deterministyczny odzwierciedla, na ile działanie zostało wykonane. Użyj funkcji LinearProgressIndicator lub CircularProgressIndicatorcomposables i podaj wartość parametru progress.

Poniżej znajdziesz stosunkowo szczegółowy przykład. Gdy użytkownik naciśnie przycisk, aplikacja wyświetli wskaźnik postępu i uruchomi coroutine, która stopniowo zwiększa wartość zmiennej progress. W efekcie wskaźnik postępu będzie się zwiększał.

Wyniki

Gdy wczytywanie jest w trakcie, wskaźnik liniowy w powyższym przykładzie wygląda tak:

Wskaźnik okrągły wygląda tak:

Tworzenie nieokreślonych wskaźników

Wskaźnik nieokreślony nie wskazuje, jak blisko jest operacja do zakończenia. Zamiast tego używa ruchu, aby poinformować użytkownika, że przetwarzanie jest w toku, ale nie określa stopnia jego zaawansowania.

Aby utworzyć nieokreślony wskaźnik postępu, użyj komponentu LinearProgressIndicator lub CircularProgressIndicator, ale nie przekazuj wartości dla progress. Ten przykład pokazuje, jak można włączyć lub wyłączyć nieokreślony wskaźnik za pomocą przycisku.

Wyniki

Oto przykład tej implementacji, gdy wskaźnik jest aktywny:

Poniżej przedstawiamy przykład tego samego rozwiązania, ale z wartością LinearProgressIndicator zamiast CircularProgressIndicator.

Najważniejsze punkty

Chociaż do tworzenia wskaźników postępu zgodnych z Material Design można używać różnych komponentów, ich parametry nie różnią się znacząco. Oto najważniejsze parametry, o których należy pamiętać:

  • progress: bieżący postęp wyświetlany przez wskaźnik. Przekaż wartość Float z zakresu 0.0–1.0.
  • color: kolor wskaźnika, czyli element komponentu, który odzwierciedla postęp i w pełni go obejmuje, gdy postęp zostanie zakończony.
  • trackColor: kolor ścieżki, nad którą jest narysowany wskaźnik.

Kolekcje zawierające ten przewodnik

Ten przewodnik należy do tych kolekcji krótkich przewodników, które obejmują szersze zagadnienia związane z tworzeniem aplikacji na Androida:

Dowiedz się, jak funkcje składane mogą ułatwić tworzenie atrakcyjnych komponentów interfejsu użytkownika na podstawie systemu projektowania Material Design.
Kolekcja krótkich przewodników
Listy i siatki umożliwiają wyświetlanie kolekcji w atrakcyjnej wizualnie formie, która jest łatwa w odczytaniu dla użytkowników.
Kolekcja krótkich przewodników

Masz pytania lub chcesz przekazać opinię?

Otwórz stronę z najczęstszymi pytaniami i poznaj krótkie przewodniki lub skontaktuj się z nami i powiedz nam, co o tym myślisz.
Najczęstsze pytania Prześlij opinię