Outils de sélection
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Le sélecteur aide les utilisateurs à sélectionner et à définir des données spécifiques.
Sélecteur
Les sélecteurs permettent aux utilisateurs de choisir parmi un nombre limité d'éléments.
Par défaut, les éléments sont lus en boucle dans les deux sens. Vous pouvez désactiver ce comportement si l'ordre dans la liste est important, ou permettre aux utilisateurs d'accéder rapidement au premier et au dernier élément.
Anatomie
Anatomie
A. Colonne inactive
B. Espaceur avec deux-points
C. Colonne du sélecteur
D. Contenu populaire
E. Contenu central
F. Contenu en bas
Largeurs et hauteurs
Le groupe de sélecteur remplit la hauteur et la largeur disponibles. Il existe quatre options de mise en page pour les colonnes du sélecteur. 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 accueillir le nombre de chiffres requis dans la police. Le sélecteur de date fait exception : il remplit l'écran horizontalement et déborde sur les bords.
Par exemple, les nombres détermineront la largeur de "00", puis définiront la largeur. Pour les champs de texte, comme le champ de mois, la largeur est calculée en fonction de la largeur de "MMM" (qui est la lettre la plus large de l'alphabet latin). La largeur et la hauteur (qui correspond à la hauteur de ligne de ce style de police) seront donc affectées par la police utilisée.
La taille des éléments du sélecteur varie en fonction du point d'inflexion.
Utilisation
Consultez les exemples suivants de sélecteurs de date et d'heure.
Pour une implémentation prédéfinie de sélecteur de date et d'heure, consultez la bibliothèque Horologist sur GitHub.
Si vous souhaitez créer une expérience similaire, dans laquelle les utilisateurs choisissent une valeur composée de plusieurs parties dans plusieurs sélecteurs, utilisez le composant PickerGroup intégré. Cet objet utilise un objet coordinateur pour attirer l'attention sur le bon élément Picker.
Mises en page adaptatives
TimePicker 24H
TimePicker 12H
Sélecteur de date
Comportement réactif
Augmentation de la taille du texte
Au-delà du point d'inflexion de 225 pixels, la taille de police de l'élément Picker change. La copie supérieure et inférieure dans la colonne à défilement lent est ajustée (A), tout comme la copie du milieu. Vous trouverez ci-dessous quelques exemples:
Mise en page sur deux colonnes
En dessous du point d'inflexion de 225 dp
Police: Display 2
Au-dessus du point d'arrêt de 225 dp
Police: Affichage 1
Mise en page sur trois colonnes
En dessous du point d'inflexion de 225 dp
Police: Display 3
Au-dessus du point d'arrêt de 225 dp
Police: Display 2
Augmentation de la taille du dégradé
La hauteur du dégradé de la colonne du sélecteur est définie par l'espace disponible. Les dégradés supérieur et inférieur sont définis sur un tiers (33%) de la hauteur disponible. Cela signifie que pour chaque taille d'écran disponible, le dégradé est mis à l'échelle proportionnellement. Indépendant de la mise en page en colonnes.
En dessous du point d'inflexion 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 entre les colonnes
L'espacement des colonnes est mis à l'échelle au-delà du point d'arrêt 225+, en commençant à 2 dp ou 4 dp et en passant à 6 dp. Cela dépend de la mise en page que vous avez sélectionnée : deux ou trois colonnes.
Mise en page sur deux colonnes
En dessous du point d'inflexion de 225 dp
Espacement entre les colonnes de 4 dp
Au-dessus du point d'arrêt de 225 dp
Espacement entre les colonnes de 6 dp
Mise en page sur trois colonnes
En dessous du point d'inflexion de 225 dp
Espacement entre les colonnes de 2 dp
Au-dessus du point d'arrêt de 225 dp
Espacement entre les colonnes de 6 dp
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/27 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/07/27 (UTC)."],[],[],null,["# Pickers\n\nThe [Picker](/reference/kotlin/androidx/wear/compose/material/package-summary#Picker(androidx.wear.compose.material.PickerState,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,androidx.wear.compose.material.ScalingParams,androidx.compose.ui.unit.Dp,kotlin.Float,androidx.compose.ui.graphics.Color,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Function2)) helps users select and set specific data. \n**Picker**\n\nPickers should be used to let users choose amongst a finite number of items. \n\nBy default items will be looped infinitely in both directions. Consider disabling this behaviour if order in the list is important, or to allow users to reach the first and last element with a quick swipe.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAnatomy\n-------\n\n**Anatomy**\n\nA. Inactive Column \n\nB. Colon Breaker \n\nC. Picker Column \n\nD. Top Content \n\nE. Middle Content \n\nF. Bottom Content\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Widths and heights**\n\nThe Picker Group fills the available height and width. There are four layout options for the picker columns. Each layout is centred and fills the available height. Column widths are defined by the width needed to accommodate the number of digits needed in the font, Date-picker is the exception, horizontally it fills the screen and bleeds off the edge.\n\nFor example numbers will work out width of '00' is and then set the width. For text fields, for the month field for example, will be worked out as the width of 'MMM' (which is the widest letter in the latin alphabet). The width and height (which is the line height of that type style used) will therefore be affected by the font used.\n\nPicker items vary in size across the breakpoint.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nSee the following examples of Date and Time Pickers\n\nFor a prebuilt date and time picker implementation, check out the [Horologist Library](https://github.com/google/horologist#-composables) on GitHub. \n\n\nIf you want to create a similar experience, where users choose a multi-part value across multiple pickers, use the built-in [PickerGroup](/reference/kotlin/androidx/wear/compose/material/package-summary#PickerGroup(kotlin.Array,androidx.compose.ui.Modifier,androidx.wear.compose.material.PickerGroupState,kotlin.Function1,kotlin.Boolean,kotlin.Boolean,androidx.wear.compose.material.TouchExplorationStateProvider,kotlin.Function1)) component. This object uses a focus coordinator object to assign focus to the correct Picker element.\n\nAdaptive layouts\n----------------\n\n**TimePicker 24H**\n\n**TimePicker 12H**\n\n**Date Picker**\n\n**Responsive behavior**\n-----------------------\n\n### **Text size increase**\n\nPast the 225+ Breakpoint, the Picker element's font size changes. Top and Bottom copy within the lazy scrolling column adjusts (A), as does the Middle copy. Below are some examples of this:\n\n**Two column layout** \n**Below the 225 dp breakpoint**\n\nFont: Display 2 \n**Above 225 dp breakpoint**\n\nFont: Display 1\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Three column layout** \n**Below the 225 dp breakpoint**\n\nFont: Display 3 \n**Above the 225 dp breakpoint**\n\nFont: Display 2\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Gradient size increase**\n--------------------------\n\nThe gradient on the Picker column is defined in height by the available space. Both Top and Bottom Gradients are set at a third (33%) of the available height. This means at each available screen size, the gradient scales proportionally. Sitting independent of the column layout. \n**Below the 225 dp breakpoint**\n\nSize: 33% of column height \n**Above the 225 dp breakpoint**\n\nSize: 33% of column height\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Column spacing increase**\n---------------------------\n\nColumn spacing scales past the 225+ Breakpoint, either starting at 2 dp or 4 dp and growing to 6 dp. This depends on which layout you've selected; either 2 or 3 column layouts\n\n**Two column layout** \n**Below the 225 dp breakpoint**\n\n4 dp column gap \n**Above the 225 dp breakpoint**\n\n6 dp column gap\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### **Three column layout**\n\n**Below the 225 dp breakpoint**\n\n2 dp column gap \n**Above the 225 dp breakpoint**\n\n6 dp column gap\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]
