Créer un curseur pour une plage de valeurs

Le composable Slider permet aux utilisateurs de faire des sélections parmi une plage de valeurs. Vous pouvez utiliser un curseur pour permettre à l'utilisateur d'effectuer les opérations suivantes:

  • Ajustez les paramètres qui utilisent une plage de valeurs, comme le volume et la luminosité.
  • Filtrer les données d'un graphique, comme lorsque vous définissez une gamme de prix
  • Entrées utilisateur, comme définir une note dans un avis.

Le curseur contient un rail, un curseur, un libellé de valeur et des repères:

  • Rail: barre horizontale représentant la plage de valeurs que le curseur peut prendre.
  • Poussoir: élément de commande du curseur qui permet à l'utilisateur de sélectionner une valeur spécifique dans la plage définie par le rail.
  • Repères: les repères sont des repères ou des indicateurs visuels facultatifs qui apparaissent le long du rail du curseur.

Cet article présente les implémentations de curseur suivantes:

Compatibilité des versions

Cette implémentation nécessite que la version minimale du SDK de votre projet soit définie sur le niveau d'API 21 ou supérieur.

Dépendances

Créer un curseur de base

L'exemple suivant est un curseur simple. Cela permet à l'utilisateur de sélectionner une valeur comprise entre 0.0 et 1.0. Étant donné que l'utilisateur peut sélectionner n'importe quelle valeur de cette plage, le curseur est continu.

Résultats

Composant de curseur avec une valeur sélectionnée sur environ trois quarts de la piste.
Figure 1. Implémentation de base d'un curseur.

Créer un curseur avancé

L'extrait de code suivant implémente un curseur à trois étapes, avec une plage allant de 0.0 à 50.0. Étant donné que le curseur s'enclenche à chaque étape, ce curseur est discret.

Résultats

Saisissez votre texte alternatif ici
Figure 2. Curseur avec des étapes et une plage de valeurs définie.

Curseur de plage

Vous pouvez également utiliser le composable RangeSlider dédié. Cela permet à l'utilisateur de sélectionner deux valeurs. Cela peut être utile, par exemple, lorsque l'utilisateur souhaite sélectionner un prix minimal et maximal.

L'exemple suivant est un exemple relativement simple d'un curseur de plage continue:

Résultats

Composant de curseur de plage avec deux valeurs sélectionnées. Un libellé affiche les limites supérieure et inférieure de la sélection.
Figure 3. Implémentation d'un curseur de plage.

Points essentiels

Pour obtenir une définition complète de l'API, consultez la documentation de référence sur Slider. Voici quelques-uns des principaux paramètres du composable Slider:

  • value: valeur actuelle du curseur.
  • onValueChange: lambda appelé chaque fois que la valeur est modifiée.
  • enabled: valeur booléenne indiquant si l'utilisateur peut interagir avec le curseur.

Lorsque vous implémentez un curseur plus complexe, vous pouvez également utiliser les paramètres suivants.

  • colors: instance de SliderColors qui vous permet de contrôler les couleurs du curseur.
  • valueRange: plage de valeurs que le curseur peut prendre.
  • steps: nombre de repères sur le curseur auxquels le bouton bascule s'enclenche.

Vous pouvez également transmettre à Slider un composable thumb et track pour personnaliser plus précisément l'apparence du composant.

Collections contenant ce guide

Ce guide fait partie de ces collections de guides rapides sélectionnées qui couvrent des objectifs de développement Android plus larges:

Découvrez comment les fonctions composables peuvent vous permettre de créer facilement de beaux composants d'interface utilisateur basés sur le système de conception Material Design.
Collection de guides rapides

Vous avez des questions ou des commentaires ?

Consultez notre page des questions fréquentes et découvrez les guides rapides, ou contactez-nous pour nous faire part de vos commentaires.
Accéder aux questions fréquentes Envoyer des commentaires