Indicadores de progreso

Los indicadores de progreso muestran visualmente el estado de una operación. Usan el movimiento. para llamar la atención del usuario qué tan cerca está el proceso, como cargar o procesar datos. También pueden significar que el procesamiento está tardando sin referencia a qué tan cerca podría estar.

Considera estos tres casos de uso en los que podrías usar un indicador de progreso:

  • Carga de contenido: Mientras se recupera contenido desde una red, como cargar una imagen o datos para un perfil de usuario.
  • Carga de archivos: Envía comentarios al usuario sobre cuánto puede tardar la carga.
  • Procesamiento prolongado: Cuando una app procesa una gran cantidad de datos, le indicará al usuario cuánto del total está completo.

En Material Design, hay dos tipos de indicadores de progreso:

  • Determinate: Muestra exactamente cuánto progreso se ha hecho.
  • Indeterminate: Anima de forma continua sin tener en cuenta el progreso.

Del mismo modo, un indicador de progreso puede adoptar una de las dos formas siguientes:

  • Lineal: Es una barra horizontal que se ocupa de izquierda a derecha.
  • Circulares: es un círculo cuyo trazo aumenta de longitud hasta que abarca la circunferencia completa del círculo.
Un indicador de progreso lineal junto a un indicador de progreso circular.
Figura 1: Los dos tipos de indicadores de progreso.

Plataforma de API

Aunque hay varios elementos componibles, puedes usar para crear indicadores de progreso son coherentes con Material Design, sus parámetros no difieren mucho. Entre los parámetros clave que debes tener en cuenta son los siguientes:

  • progress: El progreso actual que muestra el indicador. Pasa un Float entre 0.0 y 1.0.
  • color: Es el color del indicador real. Es decir, la parte del componente que refleja el progreso y que abarca por completo el componente cuando se complete el progreso.
  • trackColor: Es el color del recorrido sobre el que se dibuja el indicador.

Indicadores de determinación

Un indicador determinado refleja exactamente qué tan completa es una acción. Usa cualquiera de las siguientes opciones: el LinearProgressIndicator o CircularProgressIndicator elementos componibles y pasa un valor para el parámetro progress.

El siguiente fragmento proporciona un ejemplo relativamente detallado. Cuando el usuario presiona el botón, la app muestra el indicador de progreso e inicia un corrutina que aumenta de forma gradual el valor de progress Esto provoca el indicador de progreso para iterar hacia arriba.

@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

Cuando la carga se completa de forma parcial, el indicador lineal de la el siguiente ejemplo:

Del mismo modo, el indicador circular aparece de la siguiente manera:

Indicadores indeterminados

Un indicador indeterminado no refleja qué tan cerca de completar una operación en la nube. En cambio, utiliza el movimiento para indicarle al usuario que el procesamiento está en curso, sin especificar ningún grado de finalización.

Para crear un indicador de progreso indeterminado, usa el LinearProgressIndicator o CircularProgressIndicator componible, pero no pases un valor para progress En el siguiente ejemplo, se muestra cómo activar o desactivar una un indicador indeterminado al presionar un botón.

@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

A continuación, se muestra un ejemplo de esta implementación cuando el indicador está activo:

El siguiente es un ejemplo de la misma implementación, pero con LinearProgressIndicator en lugar de CircularProgressIndicator.

Recursos adicionales