Les indicateurs de progression indiquent visuellement l'état d'une opération. Ils utilisent le mouvement pour attirer l'attention de l'utilisateur sur le degré de fin du processus, par exemple charger ou traiter des données. Elles peuvent également indiquer que le traitement prend sur le site, sans tenir compte de son état 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 sur un réseau, par exemple une image ou des données pour un profil utilisateur.
- Importation de fichiers: indiquez à l'utilisateur la durée de l'importation.
- Traitement de longue durée: lorsqu'une application traite une grande quantité de données, indiquer à l’utilisateur combien du total est réalisé.
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.
- Cercle: cercle dont le trait grandit jusqu'à entourer le cercle sur toute la circonférence du cercle.
Surface de l'API
Bien qu'il existe plusieurs composables pour créer des indicateurs de progression conformes à Material Design, leurs paramètres ne diffèrent pas considérablement. Entre les paramètres clés que vous devez garder à l'esprit sont les suivants:
progress
: progression actuelle affichée par l'indicateur. Transmettre unFloat
entre0.0
et1.0
.color
: couleur de l'indicateur réel. C'est-à-dire que la partie du qui reflète les progrès et qui englobe entièrement la composante 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 degré d'achèvement d'une action. Utilisez
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
coroutine qui augmente progressivement la valeur de progress
. Cela entraîne
l'indicateur de progression pour itérer tour à 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) } }
Lorsque le chargement est partiellement terminé, l'indicateur linéaire de l'étape précédente exemple s'affiche comme suit:
De même, l'indicateur circulaire apparaît comme suit:
Indicateurs indéterminés
Un indicateur indéterminé ne reflète pas dans quelle mesure une opération est presque terminée l'adresse IP interne. Il utilise plutôt le mouvement pour indiquer à l'utilisateur que le traitement est en cours, mais sans spécifier le degré d'achèvement.
Pour créer un indicateur de progression indéterminé, utilisez LinearProgressIndicator
.
ou CircularProgressIndicator
, mais ne transmettez pas de valeur pour
progress
L'exemple suivant montre comment activer ou désactiver
indicateur indéterminé avec une pression 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
.