Cómo usar Jetpack Compose en Wear OS

Compose para Wear OS es similar a Compose para dispositivos móviles. Sin embargo, existen algunas diferencias clave. En esta guía, se explican las similitudes y diferencias.

Compose para Wear OS forma parte de Android Jetpack y, al igual que las otras bibliotecas de Wear Jetpack que usas, te ayuda a escribir mejor código más rápido. Este es nuestro enfoque recomendado para compilar interfaces de usuario de apps de Wear OS.

Si nunca usaste el kit de herramientas de Jetpack Compose, consulta la ruta de aprendizaje de Compose. Muchos de los principios de desarrollo de Compose para dispositivos móviles se aplican a Compose para Wear OS. Consulta Por qué implementar Compose para obtener más información sobre las ventajas generales de un framework de IU declarativo. Si deseas obtener más información sobre Compose para Wear OS, consulta la ruta de aprendizaje de Compose para Wear OS y el repositorio de muestras de Wear OS en GitHub.

Material Design en Jetpack Compose en Wear OS

Jetpack Compose en Wear OS ofrece una implementación de Material 2.5, que te ayuda a diseñar experiencias de apps más atractivas. Los componentes de Material Design en Wear OS se compilan sobre la aplicación de temas de Material para Wear. Esta aplicación de temas es una forma sistemática de personalizar Material Design y reflejar mejor la marca de tu producto.

Compatibilidad

Compose para Wear OS funciona en relojes compatibles con Wear OS 3.0 (nivel de API 30) y relojes que usan Wear OS 2.0 (nivel de API 25 y versiones posteriores). El uso de la versión 1.4 de Compose para Wear OS requiere el uso de la versión 1.7 de las bibliotecas androidx.compose y Kotlin 1.9.0. Puedes usar la asignación de BOM y el mapa de compatibilidad de Compose para Kotlin para verificar la compatibilidad de Compose.

Plataformas

Compose para Wear OS facilita la compilación de apps en Wear OS. Para obtener más información, consulta la sección Apps. Usa nuestros componentes integrados para crear experiencias del usuario que cumplan con los lineamientos de Wear OS. Para obtener más información sobre los componentes, consulta nuestra guía de diseño.

Configuración

El uso de Jetpack Compose con Wear OS es similar a usar Jetpack Compose para cualquier otro proyecto de Android. La diferencia principal es que Jetpack Compose para Wear agrega bibliotecas específicas para Wear que facilitan la creación de interfaces de usuario personalizadas para relojes. En algunos casos, esos componentes comparten el mismo nombre que aquellos que no son para Wear, como androidx.wear.compose.material.Button y androidx.compose.material.Button.

Cómo crear una app nueva en Android Studio

Para crear un nuevo proyecto que incluya Jetpack Compose, sigue estos pasos:

1. Si te encuentras en la ventana Welcome to Android Studio, haz clic en Start a new Android Studio project. Si ya tienes abierto un proyecto de Android Studio, selecciona File > New > Import Sample de la barra de menú.
2. Busca Compose for Wear y selecciona Compose for Wear OS Starter.
3. En la ventana Configure your project, haz lo siguiente:
   1. Establece el nombre de la aplicación en Application name.
   2. Elige la ubicación del proyecto para tu muestra en Project location.
4. Haz clic en Finish.
5. Verifica que el archivo build.gradle del proyecto esté configurado de forma correcta, como se describe en Archivos de propiedades de Gradle.

Ya tienes todo listo para comenzar a desarrollar una app con Compose para Wear OS.

Dependencias del kit de herramientas de Jetpack Compose

Para usar Jetpack Compose con Wear OS, deberás incluir dependencias del kit de herramientas de Jetpack Compose en el archivo build.gradle de tu app. La mayoría de los cambios de dependencias relacionados con Wear OS se encuentran en las capas de arquitectura superiores, rodeadas por un cuadro rojo en la siguiente imagen.

<img 'foundation',="" 'material',="" 'runtime'.="" 'ui',="" 2="" 4="" a="" alt="" and="" are="" bottom,="" box""="" by="" contain="" from="" rectangles="" rectangles.="" red="" src="/static/wear/images/components/ComposeDependencies.png" surrounded="" the="" to="" top="" />

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 permanecen iguales.

Sin embargo, Wear OS tiene sus propias versiones de las bibliotecas material, foundation y navigation, por lo que debes verificar que estés usando las bibliotecas adecuadas.

Usa la versión WearComposeMaterial de las APIs cuando sea posible. Si bien es técnicamente posible usar la versión de Compose Material para dispositivos móviles, no está optimizada para los requisitos únicos de Wear OS. Además, combinar Compose Material con Compose Material para Wear OS puede generar un comportamiento inesperado. Por ejemplo, como cada biblioteca tiene su propia clase MaterialTheme, existe la posibilidad de que los colores, la tipografía o las formas sean inconsistentes si se usan ambas versiones.

En la siguiente tabla, se describen las diferencias de dependencia entre la versión para Wear OS y para dispositivos móviles:

En el siguiente fragmento, se muestra un archivo build.gradle de ejemplo que incluye estas dependencias:

dependencies {

    val composeBom = platform("androidx.compose:compose-bom:2024.10.01")

    // General compose dependencies
    implementation(composeBom)
    implementation("androidx.activity:activity-compose:1.9.3")
    implementation("androidx.compose.ui:ui-tooling-preview:1.7.5")
    // Other compose dependencies

    // Compose for Wear OS Dependencies
    implementation("androidx.wear.compose:compose-material:1.4.0")

    // Foundation is additive, so you can use the mobile version in your Wear OS app.
    implementation("androidx.wear.compose:compose-foundation:1.4.0")

    // Wear OS preview annotations
    implementation("androidx.wear.compose:compose-ui-tooling:1.4.0")

    // If you are using Compose Navigation, use the Wear OS version (NOT THE MOBILE VERSION).
    // Uncomment the line below and update the version number.
    // implementation("androidx.wear.compose:compose-navigation:1.4.0")

    // Testing
    testImplementation("junit:junit:4.13.2")
    androidTestImplementation("androidx.test.ext:junit:1.1.3")
    androidTestImplementation("androidx.test.espresso:espresso-core:3.4.0")
    androidTestImplementation("androidx.compose.ui:ui-test-junit4:1.0.3")
    debugImplementation("androidx.compose.ui:ui-tooling:1.0.3")
}