Selectores
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
El Selector ayuda a los usuarios a seleccionar y configurar datos específicos.
Selector
Se deben usar selectores para permitir que los usuarios elijan entre una cantidad limitada de elementos.
De forma predeterminada, los elementos se repetirán de forma infinita en ambas direcciones. Considera inhabilitar este comportamiento si el orden de la lista es importante o para permitir que los usuarios lleguen al primer y al último elemento con solo deslizar el dedo.
Anatomía
Anatomía
A. Columna inactiva
B. Dos puntos
C. Columna del selector
D. Contenido principal
E. Contenido del medio
F. Contenido inferior
Anchos y alturas
El grupo de selectores ocupa la altura y el ancho disponibles. Hay cuatro opciones de diseño para las columnas del selector. Cada diseño está centrado y ocupa toda la altura disponible. Los anchos de las columnas se definen según el ancho necesario para adaptarse a la cantidad de dígitos necesarios en la fuente. El selector de fecha es la excepción, ya que horizontalmente ocupa toda la pantalla y se extiende hasta el borde.
Por ejemplo, los números calcularán el ancho de “00” y, luego, establecerán el ancho. En el caso de los campos de texto, por ejemplo, el campo de mes, se calculará como el ancho de “MMM” (que es la letra más ancha del alfabeto latino). Por lo tanto, el ancho y la altura (que es la altura de línea de ese estilo de fuente utilizado) se verán afectados por la fuente utilizada.
Los elementos del selector varían de tamaño en el punto de inflexión.
Uso
Consulta los siguientes ejemplos de selectores de fecha y hora.
Para obtener una implementación del selector de fecha y hora compilada previamente, consulta la biblioteca de Horologist en GitHub.
Si deseas crear una experiencia similar, en la que los usuarios elijan un valor de varias partes en varios selectores, usa el componente integrado PickerGroup. Este objeto usa un objeto coordinador de enfoque para asignar el foco al elemento Picker correcto.
Diseños adaptables
TimePicker 24H
TimePicker 12H
Selector de fecha
Comportamiento responsivo
Aumento del tamaño del texto
Después de 225 puntos de interrupción, cambia el tamaño de la fuente del elemento Selector. La copia superior e inferior dentro de la columna de desplazamiento diferido se ajusta (A), al igual que la copia del medio. A continuación, se incluyen algunos ejemplos:
Diseño de dos columnas
Debajo del punto de interrupción de 225 dp
Fuente: Display 2
Punto de interrupción superior a 225 dp
Fuente: Display 1
Diseño de tres columnas
Debajo del punto de interrupción de 225 dp
Fuente: Display 3
Por encima del punto de inflexión de 225 dp
Fuente: Display 2
Aumento del tamaño del gradiente
El gradiente de la columna Selector se define en altura según el espacio disponible. Los gradientes superior e inferior se establecen en un tercio (33%) de la altura disponible. Esto significa que, en cada tamaño de pantalla disponible, el gradiente se escala proporcionalmente. Se ubican independientemente del diseño de la columna.
Debajo del punto de interrupción de 225 dp
Tamaño: 33% de la altura de la columna
Por encima del punto de inflexión de 225 dp
Tamaño: 33% de la altura de la columna
Aumento del espaciado entre columnas
El espaciado de las columnas se ajusta después del punto de interrupción de más de 225, ya sea que comience en 2 dp o 4 dp y aumente a 6 dp. Esto depende del diseño que hayas seleccionado: 2 o 3 columnas.
Diseño de dos columnas
Debajo del punto de interrupción de 225 dp
Separación de columnas de 4 dp
Por encima del punto de inflexión de 225 dp
Separación de 6 dp entre columnas
Diseño de tres columnas
Debajo del punto de interrupción de 225 dp
Separación de columnas de 2 dp
Por encima del punto de inflexión de 225 dp
Separación de 6 dp entre columnas
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-07-27 (UTC)
[null,null,["Última actualización: 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"]]
