Wskaźniki postępu

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.
.
Liniowy wskaźnik postępu wraz z okrągłym wskaźnikiem postępu.
Rysunek 1. Te 2 rodzaje wskaźników postępu.

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 od 0.0 do 1.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)
    }
}
ProgressIndicator.kt

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,
    )
}
ProgressIndicator.kt

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

Poniżej znajduje się przykład takiej samej implementacji, ale z opcją LinearProgressIndicator zamiast CircularProgressIndicator.

Dodatkowe materiały