¡Anunciamos Compose para Wear OS Beta!



Escrito por Ksenia ShumelchikIngeniero de Relaciones con los Desarrolladores y John Nichol, Líder Técnico de Compose para Wear OS

Usa un reloj OS con un fondo azul

Hoy lanzamos la versión beta de Compose para Wear OS, nuestro moderno kit de herramientas de interfaz de usuario declarativo diseñado para ayudar a los desarrolladores a crear experiencias de usuario atractivas para Wear OS.

Compose for Wear OS agrega soporte para componentes optimizados para relojes que incluyen el último diseño de materiales para Wear OS. Los componentes se basan en las bibliotecas principales de Compose y el kit de herramientas aprovecha el desarrollo moderno de Android para acelerar el proceso de desarrollo general.

Con esta versión beta, Compose for Wear OS tiene todas las funciones para la versión 1.0 más adelante este año y tiene todo lo que necesita para crear aplicaciones listas para producción. También significa que la API es estable; En el futuro, nos centraremos en el rendimiento y el ajuste fino de los componentes existentes para la versión 1.0.

Índice del contenido

en beta

Hemos trabajado arduamente desde la última E/S para llevar lo mejor de Jetpack Compose a Wear OS, interactuar con la comunidad a través de Slack y recopilar comentarios de los desarrolladores sobre las API, los componentes y las herramientas. Como resultado, hemos mejorado una serie de componentes, como la navegación, la escala de lista diferida, la compatibilidad con la entrada y los gestos, y más.

La primera versión beta sigue a 21 versiones alfa. Los cambios clave desde el anuncio de la versión preliminar para desarrolladores incluyen:

🆕 Componentes de entrada

Solicitó componentes de entrada de usuario, por lo que agregamos varios componibles que puede personalizar para su aplicación de reloj:

GIF de opciones de selector, control deslizante y paso a paso

  • Picker permite al usuario seleccionar un elemento de una lista de desplazamiento. De forma predeterminada, la lista de elementos seleccionables se repite "infinitamente" en ambas direcciones para dar la impresión de un cilindro giratorio visto desde un lado. Curiosamente, Picker utiliza la implementación de ScalingLazyColumn debajo y ha ayudado a desarrollar y refinar muchas funciones avanzadas de ScalingLazyColumn.
  • El control deslizante permite a los usuarios elegir entre un rango de valores y es ideal para ajustar configuraciones como el tamaño de fuente o el brillo.
  • Stepper es un control de pantalla completa que permite a los usuarios elegir entre un rango de valores. Por ejemplo, los usuarios pueden controlar el volumen de sus auriculares.

🆕 Diálogos

Hemos agregado advertencias y confirmaciones componibles de pantalla completa que se pueden usar como objetivos de navegación o como diálogos tradicionales de pantalla completa superpuestos sobre el resto del contenido. El diálogo admite deslizar para descartar y muestra el contenido principal en segundo plano durante el gesto de deslizar.

Ver cara GIF con opciones de lista de reproducción

Para mantener la coherencia con Scaffold, un cuadro de diálogo de pantalla completa muestra un indicador de posición y una viñeta.

🆕 barra de progreso

Agregamos CircularProgressIndicator, un indicador de progreso optimizado para pantallas de reloj para mostrar el progreso al animar un indicador a lo largo de una pista circular en el sentido de las agujas del reloj.

GIF de la esfera del reloj con temporizador

​​Hay varias formas en que se puede usar CircularProgressIndicator: ya sea para indicar un progreso infinito o para expresar el porcentaje de finalización de una tarea en curso. Los indicadores de progreso permiten un espacio en la pista circular, dejando espacio para otro contenido, p. B. TimeText cuando se usa en modo de pantalla completa.

🆕 Indicador de página

Para ayudarlo a implementar la paginación, el kit de herramientas de la interfaz de usuario proporciona un componente HorizontalPageIndicator que muestra el número total de páginas y la página seleccionada.

GIF de esfera de reloj con indicador lateral

Dependiendo de la forma de la pantalla, HorizontalPageIndicator proporciona una indicación visual específica del factor de forma de qué página está activa y cuánto ha avanzado a través de las páginas.

mejoras

  • ScalingLazyColumn: Comportamiento predeterminado mejorado para ser coherente con Material Design para Wear OS, p. B. Parámetros de escala actualizados, relleno adicional predeterminado y tamaño heredado del tamaño del contenido.
  • Marco: ranura adicional para PageIndicator para garantizar el posicionamiento correcto en la pantalla circular.
  • Navegación: garantizar la paridad de funcionalidad con Compose Navigation y agregar soporte para deslizar el borde para una excelente experiencia de pantalla completa y desplazamiento de página.
  • Elementos curvos: se agregaron modificadores curvos y un nuevo DSL que permite a los desarrolladores usar conceptos que tienen sentido para un mundo curvo, como radial, angular, de barrido, (en sentido antihorario), interior/exterior. CurvedLayout es el puente entre los mundos lineal y curvo, y curvedComposable se puede usar para introducir componentes componibles tradicionales cuando tiene sentido.

Con estas incorporaciones recientes, el catálogo Compose Material para Wear OS ahora tiene más componentes de los que están disponibles con diseños basados ​​en vistas y proporciona una implementación lista para usar de las nuevas pautas de diseño de Wear OS.

Herramienta

Android Studio Electric Eel ofrece las últimas funciones para el mejor desarrollo con Compose for Wear OS:

  • El editor y las herramientas admiten la finalización automática y la mejora de las acciones del editor
  • Vista previa componible específica de Wear OS
  • 🆕 Edición en vivo para soporte de depuración en tiempo real
  • 🆕 Plantilla de proyecto Compose for Wear OS

relojero

Hoy también anunciamos el lanzamiento de Horologist, un proyecto de código abierto de Google que proporciona un conjunto de bibliotecas de Wear que complementan la funcionalidad proporcionada por Compose para Wear OS y otras API de Wear OS.

engranajes de un reloj

Leer más sobre relojería

Horologist ofrece útiles extensiones de Compose:

  • Componentes de la interfaz de usuario multimedia, incluidos los controles de reproducción y las pantallas de volumen
  • Selección de material para fecha y hora.
  • Scaffold navegable con TimeText y PositionIndicator que permanecen sincronizados con los cambios en la pantalla de desplazamiento y navegación.

Horologist crecerá para proporcionar a los desarrolladores herramientas adicionales para crear excelentes aplicaciones Wear OS para diversos usos. Experiencias. Consulte Horologist en Github para proporcionar comentarios y contribuir con funciones generales que los desarrolladores de Wear pueden encontrar útiles, ¡y manténgase atento a los próximos lanzamientos!

Empezando

Muchos de los principios de desarrollo de Mobile Compose se aplican a Compose for Wear OS. Entonces, si no está familiarizado con el kit de herramientas de la interfaz de usuario, comience con los conceptos básicos de Jetpack Compose.

Hemos preparado una serie de materiales para ayudarlo a comenzar con Compose for Wear OS:

Ahora que Compose for Wear OS entró en versión beta, es un buen momento para comenzar con Compose para darle vida rápidamente a su aplicación o actualizar su interfaz de usuario existente. Visite el sitio del desarrollador para obtener más información sobre cómo crear aplicaciones para Wear OS.

¡Nos encantaría saber de usted acerca de su experiencia con Compose for Wear OS y lo que puede construir! Únase a la discusión en Kotlin Slack #componer ropa Canal y continúe brindando comentarios sobre el rastreador de problemas.

¡Diviértete componiendo!



Si quieres conocer otros artículos parecidos a ¡Anunciamos Compose para Wear OS Beta! puedes visitar la categoría Android.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir