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

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

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

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

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

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

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

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

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

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

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

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

Определенный показатель точно отражает, насколько завершено действие. Используйте составные элементы LinearProgressIndicator или CircularProgressIndicator и передайте значение для параметра 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)
   
}
}

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

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

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

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

Чтобы создать неопределенный индикатор прогресса, используйте составной 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,
   
)
}

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

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

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