Outils de sélection

Le sélecteur aide les utilisateurs à sélectionner et à définir des données spécifiques.

Sélecteur

Utilisez des sélecteurs pour permettre aux utilisateurs de choisir parmi un nombre défini d'éléments.

Par défaut, les éléments sont lus en boucle indéfiniment dans les deux sens. Envisagez de désactiver ce comportement si l'ordre de la liste est important, ou pour permettre aux utilisateurs d'accéder rapidement au premier et au dernier élément.

Anatomie

Anatomie

R. Colonne inactive
B. Pointeur
C. Colonne de l'outil de sélection
D. Contenu populaire
E. Contenu du milieu
F. Contenu inférieur

Largeurs et hauteurs

Le groupe de sélection remplit la hauteur et la largeur disponibles. Quatre options de mise en page sont disponibles pour les colonnes de l'outil de sélection. Chaque mise en page est centrée et remplit la hauteur disponible. La largeur des colonnes est définie par la largeur nécessaire pour tenir compte du nombre de chiffres nécessaires dans la police. Le sélecteur de date fait exception, car il remplit horizontalement l'écran et s'éloigne du bord.

Par exemple, les nombres calculent "00" est égal à la largeur, puis définit la largeur. Pour les champs de texte, pour le champ du mois par exemple, la largeur est calculée comme suit : MMM (lettre la plus large de l'alphabet latin). La largeur et la hauteur (c'est-à-dire la hauteur de ligne du style de type utilisé) seront donc affectées par la police utilisée.

La taille des éléments du sélecteur varie selon le point d'arrêt.

Utilisation

Voir les exemples suivants de sélecteurs de date et d'heure

Pour découvrir une implémentation prédéfinie du sélecteur de date et d'heure, accédez à la bibliothèque Horologist sur GitHub.

Si vous souhaitez créer une expérience similaire, dans laquelle les utilisateurs choisissent une valeur en plusieurs parties dans plusieurs sélecteurs, utilisez le composant intégré PickerGroup. Cet objet utilise un objet coordinateur de sélection pour sélectionner le bon élément de sélection.

Mises en page adaptatives

TimePicker 24 h

Sélecteur de temps 12 h

Sélecteur de date

Comportement responsif

Augmentation de la taille du texte

Au-delà de plus de 225 points d'arrêt, la taille de police de l'élément de sélection change. Les textes du haut et du bas de la colonne de défilement différé sont ajustés (A), tout comme le texte du milieu. Voici quelques exemples:

Mise en page à deux colonnes

En dessous du point d'arrêt de 225 dp

Police: Display 2

Point d'arrêt de 225 dp supérieur

Police: Display 1

Mise en page à trois colonnes

En dessous du point d'arrêt de 225 dp

Police: Display 3

Au-dessus du point d'arrêt de 225 dp

Police: Display 2

Augmentation de la taille du gradient

La hauteur du dégradé de la colonne "Picker" est définie par l'espace disponible. Le dégradé supérieur et le dégradé inférieur sont définis à un tiers (33%) de la hauteur disponible. Cela signifie que le gradient s'adapte de manière proportionnelle à chaque taille d'écran disponible. Être assis indépendamment de la disposition en colonnes

En dessous du point d'arrêt de 225 dp

Taille: 33% de la hauteur de la colonne

Au-dessus du point d'arrêt de 225 dp

Taille: 33% de la hauteur de la colonne

Augmentation de l'espacement des colonnes

L'espacement des colonnes s'adapte au-delà du point d'arrêt supérieur à 225, qui commence à 2 ou 4 dp et s'étend jusqu'à 6 dp. Tout dépend de la mise en page que vous avez sélectionnée (c'est-à-dire à deux ou trois colonnes).

Mise en page à deux colonnes

En dessous du point d'arrêt de 225 dp

Écart de colonne de 4 dp

Au-dessus du point d'arrêt de 225 dp

Écart de colonne de 6 dp

Mise en page à trois colonnes

En dessous du point d'arrêt de 225 dp

Intervalle de 2 dp entre les colonnes

Au-dessus du point d'arrêt de 225 dp

Écart de colonne de 6 dp