Indicateurs de progression

Les indicateurs de progression affichent visuellement l'état d'une opération. Ils utilisent le mouvement pour attirer l'attention de l'utilisateur sur l'état d'avancement du processus, comme le chargement ou le traitement des données. Ils peuvent également indiquer qu'un traitement est en cours, sans préciser son état d'avancement.

Voici trois cas d'utilisation dans lesquels vous pouvez utiliser un indicateur de progression :

  • Chargement de contenu : lors de la récupération de contenu à partir d'un réseau, comme le chargement d'une image ou de données pour un profil utilisateur.
  • Importation de fichiers : indiquez à l'utilisateur la durée approximative de l'importation.
  • Traitement long : lorsqu'une application traite une grande quantité de données, indiquez à l'utilisateur la progression du traitement.

Dans Material Design, il existe deux types d'indicateurs de progression :

  • Déterminée : affiche la progression exacte.
  • Indéterminée : l'animation est continue, sans tenir compte de la progression.

De même, un indicateur de progression peut prendre l'une des deux formes suivantes :

  • Linéaire : barre horizontale qui se remplit de gauche à droite.
  • Circulaire : un cercle dont le trait s'allonge jusqu'à englober toute la circonférence du cercle.
Indicateur de progression linéaire à côté d'un indicateur de progression circulaire.
Figure 1. Les deux types d'indicateurs de progression.

Surface de l'API

Bien qu'il existe plusieurs composables que vous pouvez utiliser pour créer des indicateurs de progression conformes à Material Design, leurs paramètres ne diffèrent pas beaucoup. Voici certains paramètres clés à prendre en compte :

  • progress : progression actuelle affichée par l'indicateur. Transmettez un Float entre 0.0 et 1.0.
  • color : couleur de l'indicateur réel. Autrement dit, la partie du composant qui reflète la progression et qui englobe entièrement le composant lorsque la progression est terminée.
  • trackColor : couleur de la piste sur laquelle l'indicateur est dessiné.

Indicateurs déterminés

Un indicateur déterminé reflète exactement l'état d'une action. Utilisez les composables LinearProgressIndicator ou CircularProgressIndicator et transmettez une valeur pour le paramètre progress.

L'extrait suivant fournit un exemple relativement détaillé. Lorsque l'utilisateur appuie sur le bouton, l'application affiche l'indicateur de progression et lance une coroutine qui augmente progressivement la valeur de progress. L'indicateur de progression augmente alors à son tour.

@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

Lorsque le chargement est partiellement terminé, l'indicateur linéaire de l'exemple précédent se présente comme suit :

De même, l'indicateur circulaire se présente comme suit :

Indicateurs indéterminés

Un indicateur indéterminé ne reflète pas l'état d'avancement d'une opération. Il utilise plutôt le mouvement pour indiquer à l'utilisateur que le traitement est en cours, sans préciser le degré d'avancement.

Pour créer un indicateur de progression indéterminé, utilisez le composable LinearProgressIndicator ou CircularProgressIndicator, mais ne transmettez pas de valeur pour progress. L'exemple suivant montre comment activer ou désactiver un indicateur indéterminé en appuyant sur un bouton.

@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

Voici un exemple de cette implémentation lorsque l'indicateur est actif :

Voici un exemple de la même implémentation, mais avec LinearProgressIndicator au lieu de CircularProgressIndicator.

Ressources supplémentaires