Las listas les permiten a los usuarios seleccionar un elemento de un conjunto de opciones en dispositivos Wear OS.
Muchos dispositivos Wear OS usan pantallas redondas, lo que dificulta la visualización de los elementos de la lista que aparecen cerca de la parte inferior y superior de la pantalla. Por este motivo, Compose para Wear OS incluye una versión de la clase LazyColumn
llamada ScalingLazyColumn
, que admite efectos de escalamiento y atenuación. Cuando los elementos se mueven hacia el centro de la pantalla, se hacen más grandes y más opacos.
En la siguiente animación, se muestra cómo cambian el tamaño y la transparencia de un elemento a medida que se mueve por la pantalla:
En el siguiente fragmento de código, se muestra cómo crear una lista con la API de Horologist
versión del diseño ScalingLazyColumn
para crear contenido que
se ve muy bien en varios tamaños de pantalla de Wear OS, por ejemplo, en la
ejemplo a continuación, agregará el padding necesario a los primeros y últimos elementos
de la lista, que se establecen en el scrollState
de ScalingLazyColumn
:
val columnState = rememberResponsiveColumnState( contentPadding = ScalingLazyColumnDefaults.padding( first = ScalingLazyColumnDefaults.ItemType.Text, last = ScalingLazyColumnDefaults.ItemType.SingleButton ) ) ScreenScaffold(scrollState = columnState) { ScalingLazyColumn( columnState = columnState ) { item { ResponsiveListHeader(contentPadding = firstItemPadding()) { Text(text = "Header") } } // ... other items item { Button( imageVector = Icons.Default.Build, contentDescription = "Example Button", onClick = { } ) } } }
Cómo agregar un efecto de ajustar y deslizar.
Puedes agregar un comportamiento de ajustar y deslizar a los gestos del dedo que el usuario aplique a objetos ScalingLazyColumn
. Este efecto ayuda a los usuarios a navegar con mayor precisión por los elementos de una lista y, a la vez, agiliza su desplazamiento por listas largas.
Para agregar este efecto a la versión de Horologist de la ScalingLazyColumn
, haz lo siguiente:
establece el parámetro rotaryMode
de columnState
en
RotaryWithSnap
, como se muestra en el siguiente fragmento de código:
val columnState = rememberResponsiveColumnState( // ... // ... rotaryMode = ScalingLazyColumnState.RotaryMode.Snap ) ScreenScaffold(scrollState = columnState) { ScalingLazyColumn( columnState = columnState ) { // ... // ... } }
Recomendaciones para ti
- Nota: El texto del vínculo se muestra cuando JavaScript está desactivado
- Codelab de Compose para Wear OS
- Listas y cuadrículas
- Cómo usar objetos View en Compose