Wskaźniki postępu wizualnie pokazują stan operacji. Wykorzystywane są ruch aby zwrócić uwagę użytkownika na to, jak blisko zakończenia procesu jest wczytywania lub przetwarzania danych. Mogą też oznaczać, że przetwarzanie trwa bez wskazywania, jak bardzo blisko – do końca.
Weź pod uwagę te 3 przypadki, w których możesz użyć wskaźnika postępu:
- Wczytywanie treści: podczas pobierania treści z sieci, np. od wczytywania. zdjęcie lub dane w profilu użytkownika.
- Przesyłanie pliku: informujesz użytkownika o tym, ile czasu może zająć przesyłanie.
- Długie przetwarzanie: gdy aplikacja przetwarza dużą ilość danych, poinformować użytkownika, jaka część filmu została uzupełniona.
W stylu Material Design są 2 rodzaje wskaźników postępu:
- Określ: pokazuje dokładnie dotychczasowy postęp.
- Nieokreślony: animacja zmienia się w sposób ciągły, bez względu na postęp.
Wskaźnik postępu może też wyświetlać się na dwa sposoby:
- Liniowy: poziomy pasek, który wypełnia się od lewej do prawej.
- Okrągły: okrąg, którego ruch rośnie, aż obejmie swojego pełnego obwodu.
Powierzchnia interfejsu API
Istnieje kilka elementów kompozycyjnych, których można używać do tworzenia wskaźników postępu zgodne ze stylem Material Design, ich parametry nie różnią się znacząco. Wśród najważniejsze parametry, o których należy pamiętać:
progress
: bieżący postęp wyświetlany na wskaźniku. MińFloat
od0.0
do1.0
.color
: kolor rzeczywistego wskaźnika. Jest to część który odzwierciedla postęp i w pełni obejmuje gdy postęp zostanie ukończony.trackColor
: kolor ścieżki, na której rysowany jest wskaźnik.
Określ wskaźniki
Wskaźnik określania dokładnie odzwierciedla stopień ukończenia działania. Użyj jednej
LinearProgressIndicator
lub CircularProgressIndicator
za pomocą funkcji kompozycyjnych i przekazać wartość parametru progress
.
Ten fragment to dość szczegółowy przykład. Gdy użytkownik
po naciśnięciu przycisku, aplikacja wyświetla wskaźnik postępu i uruchamia
współrzędną, która stopniowo zwiększa wartość progress
. Powoduje to, że
wskaźnik postępu.
@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) } }
Jeśli wczytywanie zostało częściowo ukończone, liniowy wskaźnik w polu poprzedzającym przykład wygląda tak:
Okrągły wskaźnik wygląda tak:
Nieokreślone wskaźniki
Wskaźnik nieokreślony nie pokazuje, jak blisko zakończenia operacji Wykorzystuje ruch, aby pokazać użytkownikowi, że przetwarzanie trwa, ale bez określania poziomu ukończenia.
Aby utworzyć wskaźnik nieokreślonego postępu, użyj funkcji LinearProgressIndicator
lub CircularProgressIndicator
kompozycyjny, ale nie przekazują wartości dla
progress
Ten przykład pokazuje, jak przełączać
nieokreślone naciśnięcie przycisku.
@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, ) }
Oto przykład implementacji, gdy wskaźnik jest aktywny:
Poniżej znajduje się przykład takiej samej implementacji, ale z opcją
LinearProgressIndicator
zamiast CircularProgressIndicator
.