1. Introducción
Compose para Wear OS te permite trasladar el conocimiento que aprendiste cuando compilabas apps con Jetpack Compose a dispositivos wearable.
Con la compatibilidad integrada de Material You, Compose para Wear OS simplifica y acelera el desarrollo de IU, y te ayuda a crear apps atractivas con menos código.
Se espera que, para realizar este codelab, tengas conocimientos previos sobre Compose, pero no necesitas ser experto.
Crearás varios elementos componibles específicos para Wear (tanto simples como complejos) y, cuando termines, podrás comenzar a escribir tus propias apps para Wear OS. Comencemos.
Qué aprenderás
- Similitudes y diferencias entre tu experiencia anterior con Compose
- Elementos componibles simples y su funcionamiento en Wear OS
- Elementos componibles específicos de Wear OS
LazyColumnde Wear OS (ScalingLazyColumn)- La versión de
Scaffoldde Wear OS
Qué compilarás
Compilarás una app simple que muestre una lista desplazable de elementos componibles optimizados para Wear OS.
Dado que usarás Scaffold, también obtendrás un tiempo de texto curvo en la parte superior, una viñeta y, por último, un indicador de desplazamiento vinculado al lado del dispositivo.
A continuación, se muestra cómo se verá cuando hayas terminado el codelab:
Requisitos previos
- Conocimientos básicos sobre el desarrollo en Android
- Conocimientos básicos sobre Kotlin
- Conocimientos básicos sobre Compose
2. Cómo prepararte
En este paso, configurarás tu entorno y descargarás el proyecto inicial.
Qué necesitarás
- La versión estable más reciente de Android Studio
- Un dispositivo o emulador de Wear OS (¿Es la primera vez? Aquí te indicamos cómo configurarlo)
Cómo descargar el código
Si ya instalaste git, solo ejecuta el siguiente comando para clonar el código de este repositorio. Para comprobarlo, escribe git --version en la terminal o línea de comandos y verifica que se ejecute de forma correcta.
git clone https://github.com/android/codelab-compose-for-wear-os.git cd compose-for-wear-os
Si no tienes git, puedes hacer clic en el siguiente botón para descargar todo el código de este codelab:
En cualquier momento, puedes ejecutar cualquiera de los módulos en Android Studio si realizas cambios en la configuración de ejecución de la barra de herramientas.
Cómo abrir un proyecto en Android Studio
- En la ventana Welcome to Android Studio, selecciona
Open an Existing Project. - Selecciona la carpeta
[Download Location]. - Cuando Android Studio haya importado el proyecto, prueba si puedes ejecutar los módulos
startyfinisheden un emulador de Wear OS o un dispositivo físico. - El módulo
startdebería verse como en la siguiente captura de pantalla. En este módulo, realizarás todo el trabajo.
Cómo explorar el código de inicio
build.gradlecontiene la configuración básica de una app. Incluye las dependencias necesarias para crear una app para Wear OS componible. Analizaremos las similitudes y las diferencias entre la versión de Jetpack Compose y de Wear OS.main > AndroidManifest.xmlincluye los elementos necesarios para crear una aplicación de Wear OS. Esta es una app distinta de una de Compose y es similar a una app para dispositivos móviles, por lo que no la revisaremos.- La carpeta
main > theme/contiene los archivosColor,TypeyThemeque Compose usa para el tema. main > MainActivity.ktcontiene código estándar para crear una app con Compose. Además, contiene los elementos componibles de nivel superior (comoScaffoldyScalingLazyList) para nuestra app.main > ReusableComponents.ktcontiene funciones para la mayoría de los elementos componibles de Wear que crearemos. Trabajaremos mucho en este archivo.
3. Cómo consultar las dependencias
La mayoría de los cambios de dependencias relacionados con Wear se realizarán en las capas de arquitectura superiores (destacadas en rojo a continuación).
De esa manera, muchas de las dependencias que ya usas con Jetpack Compose no cambian cuando se crean apps para Wear OS. Por ejemplo, las dependencias de IU, entorno de ejecución, compilador y animación permanecerán iguales.
Sin embargo, deberás utilizar las bibliotecas de Material, Foundation y Navigation adecuadas de Wear OS, que son distintas de las bibliotecas que usaste anteriormente.
A continuación, se ofrece una comparación para aclarar las diferencias:
Dependencia de Wear OS(androidx.wear.*) | Comparación | Dependencia estándar(androidx.*) |
en lugar de | androidx.compose.material:material ₁ | |
en lugar de | androidx.navigation:navigation-compose | |
además de | androidx.compose.foundation:foundation | |
además de | androidx.compose.ui:ui-tooling-preview |
1. Los desarrolladores pueden continuar utilizando otras bibliotecas relacionadas con Material, como la ondulación y los íconos de material que se extienden con la biblioteca Wear Compose Material.
Abre build.gradle y busca "TODO: Review Dependencies" en el módulo start. (Este paso es solo para revisar las dependencias; no agregarás ningún código).
start/build.gradle:
// TODO: Review Dependencies
// General Compose dependencies
implementation "androidx.activity:activity-compose:$activity_compose_version"
implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
implementation "androidx.compose.foundation:foundation:$compose_version"
implementation "androidx.compose.material:material-icons-extended:$compose_version"
// Compose for Wear OS Dependencies
implementation "androidx.wear.compose:compose-material:$wear_compose_version"
// Foundation is additive, so you can use the standard version in your Wear OS app.
implementation "androidx.wear.compose:compose-foundation:$wear_compose_version"
// Compose preview annotations for Wear OS.
implementation "androidx.wear.compose:compose-ui-tooling:$wear_compose_version"
Deberías reconocer muchas de las dependencias generales de Compose, por lo que no las abordaremos.
Pasemos a las dependencias de Wear OS.
Tal como se describió anteriormente, solo se incluye la versión específica de Wear OS de material (androidx.wear.compose:compose-material). Es decir, no verás ni incluirás androidx.compose.material:material en tu proyecto.
Es importante destacar que puedes usar otras bibliotecas de material con Wear Material. De hecho, lo hacemos en este codelab con androidx.compose.material:material-icons-extended.
Por último, incluimos la biblioteca de Wear foundation para Compose (androidx.wear.compose:compose-foundation). Como esta es adicional, puedes usarla con el elemento foundation estándar que utilizaste anteriormente. De hecho, es probable que ya hayas reconocido que lo incluimos en las dependencias generales de Compose.
Ahora que terminamos de analizar las dependencias, veamos la app principal.
4. Cómo consultar MainActivity
Haremos todo nuestro trabajo en el
start
módulo, así que asegúrate de que todos los archivos que abras estén allí.
Para comenzar, abre MainActivity en el módulo start.
Esta es una clase bastante simple que extiende ComponentActivity y usa setContent { WearApp() } para crear la IU.
A partir de tus conocimientos anteriores de Compose, esto debería resultarte conocido. Solo estamos configurando la IU.
Desplázate hacia abajo hasta la función de componibilidad WearApp(). Antes de hablar sobre el código en sí, deberías ver un conjunto de las tareas pendientes diseminadas en todo el código. Cada una de ellas representa pasos en este codelab. Puedes ignorarlas por el momento.
Debería ser similar a lo siguiente:
Código en WearApp():
WearAppTheme {
// TODO: Swap to ScalingLazyListState
val listState = rememberLazyListState()
/* *************************** Part 4: Wear OS Scaffold *************************** */
// TODO (Start): Create a Scaffold (Wear Version)
// Modifiers used by our Wear composables.
val contentModifier = Modifier.fillMaxWidth().padding(bottom = 8.dp)
val iconModifier = Modifier.size(24.dp).wrapContentSize(align = Alignment.Center)
/* *************************** Part 3: ScalingLazyColumn *************************** */
// TODO: Create a ScalingLazyColumn (Wear's version of LazyColumn)
LazyColumn(
modifier = Modifier.fillMaxSize(),
contentPadding = PaddingValues(
top = 32.dp,
start = 8.dp,
end = 8.dp,
bottom = 32.dp
),
verticalArrangement = Arrangement.Center,
state = listState
) {
// TODO: Remove item; for beginning only.
item { StartOnlyTextComposables() }
/* ******************* Part 1: Simple composables ******************* */
item { ButtonExample(contentModifier, iconModifier) }
item { TextExample(contentModifier) }
item { CardExample(contentModifier, iconModifier) }
/* ********************* Part 2: Wear unique composables ********************* */
item { ChipExample(contentModifier, iconModifier) }
item { ToggleChipExample(contentModifier) }
}
// TODO (End): Create a Scaffold (Wear Version)
}
Para comenzar, configuramos el tema, WearAppTheme { }. Esto es exactamente lo mismo que escribiste antes, es decir, configuras un elemento MaterialTheme con colores, tipografía y formas.
Sin embargo, en el caso de Wear OS, generalmente recomendamos usar las formas predeterminadas de Material Wear, que están optimizadas para dispositivos redondos y no redondos, por lo que, si consultas nuestro theme/Theme.kt, verás que no anulamos las formas.
Si lo deseas, puedes abrir el elemento theme/Theme.kt para explorarlo con mayor profundidad, pero, nuevamente, es el mismo que antes.
A continuación, creamos algunos modificadores para los elementos componibles de Wear que compilaremos, de modo que no debamos especificarlos cada vez. Se trata principalmente de centrar el contenido y agregar algo de relleno.
Luego, creamos un elemento LazyColumn que se usa para producir una lista de desplazamiento vertical para un conjunto de elementos (al igual que lo hiciste antes).
Código:
item { StartOnlyTextComposables() }
/* ******************* Part 1: Simple composables ******************* */
item { ButtonExample(contentModifier, iconModifier) }
item { TextExample(contentModifier) }
item { CardExample(contentModifier, iconModifier) }
/* ********************* Part 2: Wear unique composables ********************* */
item { ChipExample(contentModifier, iconModifier) }
item { ToggleChipExample(contentModifier) }
Para los elementos en sí, solo StartOnlyTextComposables() produce cualquier IU. (Propagaremos el resto durante el codelab).
En realidad, estas funciones se encuentran en el archivo ReusableComponents.kt, que veremos en la siguiente sección.
Comencemos a usar Compose para Wear OS.
5. Cómo agregar elementos componibles simples
Comenzaremos con tres elementos componibles (Button, Text y Card) que probablemente ya conozcas.
Primero, quitaremos el elemento componible de Hello World.
Busca "TODO: Remove item" y borra el comentario y la línea que aparece debajo:
Paso 1
// TODO: Remove item; for beginning only.
item { StartOnlyTextComposables() }
A continuación, agregaremos nuestro primer elemento componible.
Cómo crear un elemento componible Button
Abre ReusableComponents.kt en el módulo start, busca "TODO: Create a Button Composable" y reemplaza el método componible actual con este código.
Paso 2
// TODO: Create a Button Composable (with a Row to center)
@Composable
fun ButtonExample(
modifier: Modifier = Modifier,
iconModifier: Modifier = Modifier
) {
Row(
modifier = modifier,
horizontalArrangement = Arrangement.Center
) {
// Button
Button(
modifier = Modifier.size(ButtonDefaults.LargeButtonSize),
onClick = { /* ... */ },
) {
Icon(
imageVector = Icons.Rounded.Phone,
contentDescription = "triggers phone action",
modifier = iconModifier
)
}
}
}
La función de componibilidad ButtonExample() (donde existe este código) ahora generará un botón centrado.
Veamos el código paso a paso.
El objeto Row solo se usa aquí para centrar el elemento componible Button en la pantalla redonda. Para ver cómo lo hacemos, aplica el modificador que creamos en MainActivity y pásalo a esta función. Más adelante, cuando nos desplacemos por una pantalla circular, nos aseguraremos de que el contenido no esté cortado (por eso está centrado).
A continuación, crearemos el mismo elemento Button. El código es el mismo que usarías para el botón anterior, pero, en nuestro caso, usamos ButtonDefault.LargeButtonSize. Estos son los tamaños optimizados y predeterminados para dispositivos Wear OS, así que asegúrate de usarlos.
Luego, configuramos el evento de clic en un archivo de lamba vacío. En nuestro caso, estos elementos componibles son solo para una demostración, por lo que no los necesitaremos. Sin embargo, en una app real, nos comunicaremos con un ViewModel, por ejemplo, para realizar la lógica empresarial.
Luego, configuramos un ícono dentro de nuestro botón. Este código es el mismo que en un Icon anterior. Además, obtenemos el ícono de la biblioteca androidx.compose.material:material-icons-extended.
Por último, configuramos el modificador que establecimos anteriormente para los íconos.
Si ejecutas la app, deberías obtener algo similar a lo siguiente:
Este es el código que probablemente ya escribiste antes (lo que es genial). La diferencia es que ahora tienes un botón optimizado para Wear OS.
Muy sencillo. Veamos otra.
Cómo crear un elemento componible Text
En ReusableComponents.kt, busca "TODO: Create a Text Composable" y reemplaza el método componible actual por este código.
Paso 3
// TODO: Create a Text Composable
@Composable
fun TextExample(modifier: Modifier = Modifier) {
Text(
modifier = modifier,
textAlign = TextAlign.Center,
color = MaterialTheme.colors.primary,
text = stringResource(R.string.device_shape)
)
}
Creamos el elemento Text componible, configuramos su modificador, alineamos el texto, configuramos un color y, finalmente, configuramos el texto desde un recurso de cadenas.
Los desarrolladores de Compose deberían sentirse muy familiarizados con los elementos de texto componibles, ya que el código es idéntico al que se usó con anterioridad.
Veamos cómo es:
La función de componibilidad TextExample() (donde colocamos nuestro código) ahora produce un elemento componible de texto en nuestro color de material principal.
La cadena se extrae de nuestro archivo res/values/strings.xml. En realidad, si buscas en la carpeta res/values, deberías ver dos archivos strings.xml de recursos.
Wear OS proporciona recursos de cadenas para dispositivos redondos y no redondos, por lo que, si lo ejecutamos en un emulador cuadrado, la cadena cambiará:
Todo bien por ahora. Veamos nuestro último elemento componible similar, Card.
Cómo crear un elemento componible Card
En ReusableComponents.kt, busca "TODO: Create a Card" y reemplaza el método componible actual con este código.
Paso 4
// TODO: Create a Card (specifically, an AppCard) Composable
@Composable
fun CardExample(
modifier: Modifier = Modifier,
iconModifier: Modifier = Modifier
) {
AppCard(
modifier = modifier,
appImage = {
Icon(
imageVector = Icons.Rounded.Message,
contentDescription = "triggers open message action",
modifier = iconModifier
)
},
appName = { Text("Messages") },
time = { Text("12m") },
title = { Text("Kim Green") },
onClick = { /* ... */ }
) {
Text("On my way!")
}
}
Wear es un poco diferente, ya que tenemos dos tarjetas principales, AppCard y TitleCard.
En nuestro caso, queremos un Icon en nuestra tarjeta, por lo que usaremos AppCard (TitleCard tiene menos ranuras. Para obtener más información, consulta la guía sobre tarjetas).
Creamos el elemento AppCard componible, configuramos su modificador, agregamos un elemento Icon y varios parámetros Text componibles (cada uno para un espacio diferente en la tarjeta). Por último, configuramos el texto del contenido principal al final.
Veamos cómo es:
En este punto, puede que reconozcas que, para esos elementos componibles, el código de Compose es prácticamente el mismo que usaste antes, lo que es genial. Puedes volver a usar todo ese conocimiento que ya adquiriste.
Muy bien. Veamos algunos elementos componibles nuevos.
6. Cómo agregar elementos componibles únicos de Wear
En esta sección, exploraremos los elementos componibles Chip y ToggleChip.
Cómo crear un elemento componible de chip
Los chips se especifican en los lineamientos de los materiales, pero no hay una función de componibilidad en la biblioteca de material estándar.
Se diseñaron para ser una acción rápida de One Tap, lo que resulta particularmente útil para un dispositivo Wear con espacio de pantalla limitado.
A continuación, se muestran algunas variaciones de la función de componibilidad Chip para darte una idea de lo que puedes crear:
|
|
|
Escribamos algo de código.
En ReusableComponents.kt, busca "TODO: Create a Chip" y reemplaza el método componible actual con este código.
Paso 5
// TODO: Create a Chip Composable
@Composable
fun ChipExample(
modifier: Modifier = Modifier,
iconModifier: Modifier = Modifier
) {
Chip(
modifier = modifier,
onClick = { /* ... */ },
label = {
Text(
text = "5 minute Meditation",
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
},
icon = {
Icon(
imageVector = Icons.Rounded.SelfImprovement,
contentDescription = "triggers meditation action",
modifier = iconModifier
)
},
)
}
El elemento componible Chip usa muchos de los mismos parámetros que utilizas con otros elementos componibles (modificador y onClick), por lo que no es necesario revisarlos.
Además, toma una etiqueta (para la que creamos un elemento componible Text) y un ícono.
El código Icon debería tener el mismo aspecto que el que viste en otros elementos componibles, pero, para este, extraemos el ícono Self Improvement de la biblioteca androidx.compose.material:material-icons-extended.
Veamos cómo es (recuerda desplazarte hacia abajo):
Veamos una variación en Toggle, el elemento componible ToggleChip.
Cómo crear un elemento componible de ToggleChip
ToggleChip es similar a un elemento Chip, pero permite que el usuario interactúe con un botón de selección, una tecla de activación o una casilla de verificación.
|
|
En ReusableComponents.kt, busca "TODO: Create a ToggleChip" y reemplaza el método componible actual con este código.
Paso 6
// TODO: Create a ToggleChip Composable
@Composable
fun ToggleChipExample(modifier: Modifier = Modifier) {
var checked by remember { mutableStateOf(true) }
ToggleChip(
modifier = modifier,
checked = checked,
toggleControl = {
Switch(
checked = checked,
modifier = Modifier.semantics {
this.contentDescription = if (checked) "On" else "Off"
}
)
},
onCheckedChange = {
checked = it
},
label = {
Text(
text = "Sound",
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
}
)
}
Ahora, la función de componibilidad ToggleChipExample() (donde existe este código) genera un ToggleChip mediante un interruptor para activar o desactivar (en lugar de una casilla de verificación o un botón de selección).
Primero, creamos un MutableState. No hicimos esto en las otras funciones porque estamos realizando demostraciones de la IU para que puedas ver lo que ofrece Wear.
En una app normal, es probable que quieras pasar el estado activado y la lambda para procesar el toque, de modo que el elemento componible no tenga estado (más información aquí).
En este caso, es más sencillo mostrar cómo funciona ToggleChip con un botón de activación en funcionamiento (aunque no hacemos nada con el estado).
Luego, configuramos el modificador, el estado activado y el control de activación para proporcionarnos el interruptor que deseamos.
Luego, creamos una expresión lambda para cambiar el estado y, por último, configuramos la etiqueta con un elemento componible Text (y algunos parámetros básicos).
Veamos cómo es:
Ya viste muchos elementos componibles específicos de Wear OS, y, como se indicó anteriormente, la mayor parte del código es casi la misma que la que escribiste antes.
Veamos algo un poco más avanzado.
7. Cómo migrar a ScalingLazyColumn
Es probable que hayas usado LazyColumn en tus apps para dispositivos móviles para producir una lista de desplazamiento vertical.
Como los dispositivos redondos son más pequeños en las partes inferior y superior, hay menos espacio para mostrar elementos. Por lo tanto, Wear OS tiene su propia versión de LazyColumn para admitir mejor esos dispositivos redondos.
ScalingLazyColumn extiende LazyColumn para admitir el escalamiento y la transparencia en la parte inferior y superior de la pantalla de modo que el usuario pueda leer más el contenido.
A continuación, te presentamos una demostración:
Observa que, a medida que el elemento se acerca al centro, aumenta la escala a su tamaño original y, a medida que lo aleja, se vuelve a reducir (y se vuelve más transparente).
Aquí hay un ejemplo más concreto de una app:
Descubrimos que esto realmente ayuda a mejorar la legibilidad.
Ahora que viste ScalingLazyColumn en acción, comencemos a convertir nuestro LazyColumn.
Cómo convertir a ScalingLazyListState
En MainActivity.kt, busca el comentario "TODO: Swap to ScalingLazyListState" y reemplaza el comentario y la línea que aparecen a continuación con este código.
Paso 7
// TODO: Swap to ScalingLazyListState
val listState = rememberScalingLazyListState()
Los nombres son casi idénticos, menos la parte de "Escalamiento". Así como LazyListState controla el estado de un LazyColumn, ScalingLazyListState lo maneja por un ScalingLazyColumn.
Cómo convertir a ScalingLazyColumn.
A continuación, intercambiamos entre ScalingLazyColumn.
En MainActivity.kt, busca "TODO: Swap a ScalingLazyColumn". Antes, reemplaza LazyColumn por ScalingLazyColumn.
Luego, quita contentPadding y verticalArrangement por completo; ScalingLazyColumn ya proporciona una configuración predeterminada que garantiza un mejor efecto visual predeterminado, ya que la mayor parte del viewport se completará con elementos de la lista. En muchos casos, los parámetros predeterminados serán suficientes. Si tienes un encabezado en la parte superior, te recomendamos que lo coloques en ListHeader como primer elemento. De lo contrario, considera establecer autoCentering con itemIndex como 0, que proporcionará suficiente relleno para el primer elemento.
Paso 8
// TODO: Swap a ScalingLazyColumn (Wear's version of LazyColumn)
ScalingLazyColumn(
modifier = Modifier.fillMaxSize(),
autoCentering = AutoCenteringParams(itemIndex = 0),
state = listState
Eso es todo. Veamos cómo es:
Verás que se ajustan el contenido y la transparencia en la parte inferior y superior de la pantalla mientras te desplazas con muy poco trabajo para migrar.
Podrás notarlo con los elementos componibles de meditación que se pueden mover hacia arriba y hacia abajo.
Ahora, llegamos al último tema: Scaffold de Wear OS.
8. Cómo agregar andamiaje
Scaffold proporciona una estructura de diseño para ayudarte a organizar pantallas en patrones comunes, como la de los dispositivos móviles, pero en lugar de una barra de la aplicación, BAF, un panel lateral u otros elementos específicos para dispositivos móviles, admite cuatro diseños específicos de Wear con componentes de nivel superior: tiempo, viñeta, indicador de desplazamiento/posición y el indicador de página.
Además, controla dispositivos redondos y no redondos.
A continuación, te mostramos cómo se ven:
| |
| |
| |
|
Veremos los primeros tres componentes en detalle, pero primero vamos a poner el andamiaje en su lugar.
Cómo agregar andamiaje
Agreguemos el código estándar para Scaffold ahora.
Busca el comentario "TODO (Start): Create a Scaffold (Wear Version)" y agrega el siguiente código debajo.
Paso 9
// TODO (Start): Create a Scaffold (Wear Version)
Scaffold(
timeText = { },
vignette = { },
positionIndicator = { }
) {
Explicaremos cada uno de estos parámetros en secuencia en pasos posteriores. En este momento, no estamos produciendo ninguna IU.
Luego, asegúrate de agregar el corchete de cierre en la ubicación correcta. Busca "TODO (End): Create a Scaffold (Wear Version)" y agrega el corchete allí:
Paso 10
// TODO (End): Create a Scaffold (Wear Version)
}
Ejecutémosla primero. Deberías ver algo como esto:
Notarás que, en realidad, no se comporta de la misma manera que antes desde que agregamos el objeto Scaffold, pero eso cambiará una vez que comencemos a implementar nuestros componentes.
Comencemos con el primero de los tres parámetros, TimeText.
TimeText
TimeText usa texto curvo de forma interna y les brinda a los desarrolladores una manera fácil de mostrar la hora sin colocar el elemento componible ni realizar ningún trabajo con clases relacionadas con el tiempo.
En los lineamientos de Material, se recomienda que muestres la hora en la parte superior de cualquier pantalla dentro de la app. Este es un ejemplo de cómo debería verse:
Agregar TimeText es bastante simple.
Busca el comentario "timeText = { }," y reemplázalo por el siguiente código:
Paso 11
timeText = {
TimeText(modifier = Modifier.scrollAway(listState))
},
Primero, creamos un elemento TimeText componible. Podríamos agregar parámetros adicionales para agregar texto antes o después de la hora, pero queremos hacerlo más simple.
Cuando se crea TimeText con elementos desplazables, como listas, TimeText debe desvanecerse a medida que el usuario comienza a desplazarse hacia arriba en una lista de elementos. Para ello, agregamos Modifier.scrollAway, que desplazará a TimeText de forma vertical dentro y fuera de la vista, según el estado de desplazamiento.
Intenta ejecutarlo. Ahora, deberías ver la hora y, si te desplazas, se atenúa.
A continuación, analizaremos el Vignette.
Cómo agregar una viñeta
Una pantalla Vignette desenfoca los bordes inferior y superior de la pantalla de wearables cuando se muestra una pantalla que puede desplazarse.
Según el caso de uso, los desarrolladores pueden desenfocar la parte superior, la inferior o ambas.
Por ejemplo:
Solo tenemos una pantalla (que es una pantalla desplazable), por lo que queremos mostrar la viñeta para facilitar la legibilidad. Hagámoslo ahora.
Busca el comentario "vignette = { }," y reemplázalo por el siguiente código:
Paso 12
vignette = {
// Only show a Vignette for scrollable screens. This code lab only has one screen,
// which is scrollable, so we show it all the time.
Vignette(vignettePosition = VignettePosition.TopAndBottom)
},
Lee el comentario para obtener más detalles sobre cuándo debe aparecer la viñeta y cuándo no. En nuestro caso, queremos que se muestre todo el tiempo y desenfocar la parte superior y la parte inferior de la pantalla.
Si observas la parte superior o la inferior (especialmente en los elementos componibles púrpura), deberías ver el efecto.
Para finalizar nuestro parámetro final de Scaffold, PositionIndicator
Cómo agregar PositionIndicator
El objeto PositionIndicator (también conocido como indicador de desplazamiento) es un indicador del lado derecho de la pantalla que muestra la ubicación del indicador actual según el tipo de objeto de estado que pases. En nuestro caso, será el ScalingLazyListState.
Por ejemplo:
Es posible que te preguntes por qué el indicador de posición debe estar elevado en el nivel de Scaffold y no en el de ScalingLazyColumn.
Debido a la curvatura de la pantalla, el indicador de posición debe estar centrado en el reloj (Scaffold), no solo en el viewport (ScalingLazyColumn). De lo contrario, puede que se corte.
Por ejemplo, en la siguiente app, podemos suponer que el elemento componible "Playlist" no forma parte del área desplazable. El indicador de posición se centra en el elemento ScalingLazyColumn, pero no ocupa toda la pantalla. Por lo tanto, puedes ver que la mayor parte está cortada.
Sin embargo, si centramos el indicador de posición en toda la superficie visible (que es lo que te brinda el elemento Scaffold), podrás verlo con claridad.
Esto significa que PositionIndicator requiere que el elemento ScalingLazyListState (que indica la posición en la lista de desplazamiento) esté por encima de Scaffold.
Si eres detallista, es posible que hayas notado que ya elevamos el elemento ScalingLazyListState sobre el Scaffold para ocultar o mostrar la hora, por lo que, en nuestro caso, el trabajo ya está hecho.
Ahora que explicamos por qué el indicador de posición debe incluirse en la estructura, agrégalo a nuestra app.
Busca el comentario "positionIndicator = { }" y reemplázalo por el siguiente código:
Paso 12
positionIndicator = {
PositionIndicator(
scalingLazyListState = listState
)
}
Es bastante sencillo: PositionIndicator requiere que el estado de desplazamiento se procese correctamente y ahora puede hacerlo.
Además, tiene una linda función que se oculta cuando el usuario no se desplaza por la página.
Estamos usando ScalingLazyListState, pero PositionIndicator toma muchas otras opciones de desplazamiento, p. ej., ScrollState y LazyListState, e incluso pueden controlar el botón lateral giratorio o
el bisel que gira. Para ver todas las opciones, consulta los KDocs de cada versión.
Ahora, veamos cómo se ve esto:
Intenta desplazarlo hacia arriba y hacia abajo. El indicador de desplazamiento solo debería aparecer cuando te desplazas.
Buen trabajo. Terminaste una demostración de la IU de la mayoría de los elementos componibles de Wear OS.
9. Felicitaciones
¡Felicitaciones! Ya aprendiste los conceptos básicos del uso de Compose en Wear OS.
Ahora puedes volver a aplicar todo tu conocimiento de Compose para crear apps atractivas de Wear OS.
¿Qué sigue?
Consulta los otros codelabs de Wear OS:
- Cómo crear tu primera tarjeta de Wear OS
- Nuevas maneras de atraer usuarios de Wear con la API de actividad en curso
Lecturas adicionales
- Entrada de blog Compose para Wear OS ahora es 1.0
- Muestras simples y complejas de Compose para Wear OS en GitHub
- Compila apps para la muñeca con Wear OS y más guías
Comentarios
Nos encantaría conocer tu experiencia con Compose para Wear OS y sobre lo que puedes desarrollar. Únete al debate en el canal #compose-wear de Kotlin Slack y envíanos tus comentarios sobre la Herramienta de seguimiento de errores.
¡Feliz codificación!