Les indicateurs de progression indiquent visuellement l'état d'une opération. Ils utilisent un mouvement pour attirer l'attention de l'utilisateur sur la fin du processus, par exemple le chargement ou le traitement de données. Elles peuvent également indiquer que le traitement est en cours, sans tenir compte du degré d'avancement.
Voici trois cas d'utilisation pour lesquels vous pourriez utiliser un indicateur de progression:
- Chargement de contenu: lors de la récupération de contenu à partir d'un réseau, par exemple le chargement d'une image ou de données pour un profil utilisateur.
- Importation de fichier: indiquez à l'utilisateur la durée de l'importation.
- Traitement long: lorsqu'une application traite une grande quantité de données, indiquez à l'utilisateur à quel point le traitement est terminé.
Dans Material Design, il existe deux types d'indicateurs de progression:
- Déterminé: affiche l'état exact des progrès réalisés.
- Indéterminé: s'anime en continu, 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: cercle dont le trait s'agrandit jusqu'à entourer la circonférence totale du cercle.
Surface de l'API
Bien qu'il existe plusieurs composables pour créer des indicateurs de progression cohérents avec Material Design, leurs paramètres ne diffèrent pas considérablement. Voici quelques-uns des principaux paramètres à garder à l'esprit:
progress
: progression actuelle affichée par l'indicateur. Transmettez une valeurFloat
comprise entre0.0
et1.0
.color
: couleur de l'indicateur réel. c'est-à-dire la partie du composant qui reflète la progression et qui englobe entièrement le composant une fois la progression terminée.trackColor
: couleur de la piste sur laquelle l'indicateur est affiché.
Indicateurs déterminés
Un indicateur déterminé reflète exactement le niveau d'achèvement d'une action. Utilisez les composables LinearProgressIndicator
ou CircularProgressIndicator
et transmettez une valeur pour le paramètre progress
.
L'extrait de code 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
. Cela entraîne une itération de l'indicateur de progression l'un après l'autre.
@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) } }
Lorsque le chargement est partiellement terminé, l'indicateur linéaire de l'exemple précédent apparaît comme suit:
De même, l'indicateur circulaire apparaît 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 un mouvement pour indiquer à l'utilisateur que le traitement est en cours, sans spécifier le degré d'achèvement.
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/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, ) }
Voici un exemple d'implémentation lorsque l'indicateur est actif:
Voici un exemple de la même implémentation, mais avec LinearProgressIndicator
au lieu de CircularProgressIndicator
.