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