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

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

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

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

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

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

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

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

Рисунок 1. Два типа индикаторов прогресса.

API-поверхность

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

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

Примечание: API для LinearProgressIndicator и CircularProgressIndicator по сути одинаковы, и способ использования любого из них идентичен. Вы можете использовать следующие фрагменты для любого из них.

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

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

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

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

@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

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

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

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

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

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

Примечание: в этом примере также показано, как можно передавать значения параметров color и trackColor для настройки внешнего вида индикатора.

@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 .

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

• Документация по материальному пользовательскому интерфейсу