Индикаторы прогресса

Индикаторы выполнения визуально отображают статус операции. Они используют движение, чтобы привлечь внимание пользователя к тому, насколько близок процесс к завершению, например, к загрузке или обработке данных. Они также могут указывать на то, что обработка данных уже ведется, без указания на то, насколько близко она находится к завершению.

Рассмотрим три сценария использования индикатора выполнения:

• Загрузка контента : При получении контента из сети, например, при загрузке изображения или данных для профиля пользователя.
• Загрузка файла : Предоставьте пользователю информацию о том, сколько времени может занять загрузка.
• Длительная обработка : Пока приложение обрабатывает большой объем данных, необходимо сообщить пользователю, какая часть обработки завершена.

В Material Design существует два типа индикаторов прогресса:

• Определенный : Точно показывает, насколько продвинулся процесс.
• Неопределенный : Непрерывно оживает, не обращая внимания на происходящее.

Аналогично, индикатор прогресса может принимать одну из двух следующих форм:

• Линейный : горизонтальная полоса, заполняющаяся слева направо.
• Круглая форма : окружность, длина штриха которой увеличивается до тех пор, пока она не охватит всю окружность.

Поверхность API

Хотя существует несколько композиционных элементов, которые можно использовать для создания индикаторов выполнения, соответствующих Material Design, их параметры не сильно различаются. Среди ключевых параметров, которые следует учитывать, можно выделить следующие:

• progress : Текущий прогресс, отображаемый индикатором. Передайте число Float от 0.0 до 1.0 .
• color : Цвет фактического индикатора. То есть, той части компонента, которая отражает прогресс и полностью охватывает компонент после завершения прогресса.
• trackColor : Цвет дорожки, на которой отображается индикатор.

Определенные показатели

Детерминированный индикатор точно отражает степень завершения действия. Используйте либо составные объекты LinearProgressIndicator , либо CircularProgressIndicator и передайте значение для параметра progress .

Следующий фрагмент кода представляет собой достаточно подробный пример. Когда пользователь нажимает кнопку, приложение одновременно отображает индикатор выполнения и запускает сопрограмму, которая постепенно увеличивает значение индикатора progress . Это приводит к последовательному увеличению значения индикатора выполнения.

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

Когда загрузка завершена частично, линейный индикатор в предыдущем примере выглядит следующим образом:

Аналогичным образом, круговой индикатор выглядит следующим образом:

Неопределенные показатели

Индикатор неопределенности не отражает степень готовности операции к завершению. Вместо этого он использует движение, чтобы указать пользователю, что обработка продолжается, хотя и не уточняет степень завершенности.

Для создания индикатора неопределенного прогресса используйте составной объект LinearProgressIndicator или CircularProgressIndicator , но не передавайте значение для progress . Следующий пример демонстрирует, как можно переключать индикатор неопределенного прогресса нажатием кнопки.

@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

Ниже приведён пример такой реализации при активном индикаторе:

Ниже приведён пример той же реализации, но с использованием LinearProgressIndicator вместо CircularProgressIndicator .

Дополнительные ресурсы

• Документация Material UI