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

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

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

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

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

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

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

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

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

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

Хотя существует несколько составных элементов, которые вы можете использовать для создания индикаторов прогресса в соответствии с 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 .

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

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