¡Cree para Wear OS ahora en la revisión del desarrollador!

En Google I / O de este año, anunciamos que lanzaríamos el mejor sistema operativo Jetpack Compose to Wear. Bien hoy, Compilar para Wear OS Hay numerosos lanzamientos alfa exitosos en la revisión de los creadores.

La compilación simplifica y acelera el procesamiento de la interfaz, y lo mismo ocurre con Compose for Wear OS, con el soporte Material You integrado que lo ayuda a crear hermosas aplicaciones con menos código.

Además, lo que ha aprendido en la creación de aplicaciones móviles con Jetpack Compose se traduce directamente en la versión Wear OS. Al igual que en los dispositivos móviles, desea comenzar a probarlo de inmediato y queremos incluir sus comentarios en las primeras réplicas de las bibliotecas antes de que se publique la versión beta.

Este artículo analiza las composiciones básicas que hemos creado y señala los recursos para comenzar a usarlas.

¡Empecemos!

La mayoría de los cambios relacionados con Wear serán implementados por las capas arquitectónicas superiores.

Esto significa que muchas de las dependencias que ya usa con Jetpack Compose no cambian cuando apunta a Wear OS. Por ejemplo, las dependencias de UI, Runtime, Compiler y Animation seguirán siendo las mismas.

Sin embargo, deberá utilizar bibliotecas de base, navegación y contenido de Wear OS que sean diferentes de las bibliotecas que utilizó anteriormente en su aplicación móvil.

A continuación se muestra una comparación para ayudarlo a detectar las diferencias:

1 Los desarrolladores pueden seguir usando bibliotecas relacionadas con otros materiales, como la onda de material y los íconos de material, que se amplían con la biblioteca Wear Compose Material.

Si bien es técnicamente posible usar dependencias móviles en Wear OS, siempre recomendamos usar versiones específicas para usar las mejores prácticas.

Aquí hay un ejemplo build.gradle Expediente:

// Example project in app/build.gradle file
dependencies {
    // Standard Compose dependencies...

    // Wear specific Compose Dependencies
    // Developer Preview starts with Alpha 07, with new releases coming soon.
    def wear_version = "1.0.0-alpha07"
    implementation "androidx.wear.compose:compose-material:$wear_version"
    implementation "androidx.wear.compose:compose-foundation:$wear_version"

    // For navigation within your app...
    implementation "androidx.wear.compose:compose-navigation:$wear_version"

    // Other dependencies...
}

Una vez que haya agregado el material de desgaste, la base y las actitudes de navegación correctas, estará listo para comenzar.

Consideremos algunas de las composiciones que puede comenzar a usar hoy.

Normalmente, muchas composiciones de Wear que son equivalentes a la versión móvil pueden usar el mismo código. Código de estilos, tipografía y formas. MaterialTheme El celular es idéntico.

Por ejemplo, para crear un botón Wear OS, su código se vería así:

Button(
    modifier = Modifier.size(ButtonDefaults.LargeButtonSize),
    onClick = { /*...*/ },
    enabled = enabledState
) {
    Icon(
        painter = painterResource(id = R.drawable.ic_airplane),
        contentDescription = "phone",
        modifier = Modifier
            .size(24.dp)
            .wrapContentSize(align = Alignment.Center),
    )
}

El código anterior es muy similar al lado móvil, pero la biblioteca crea una versión optimizada del botón Wear OS, es decir, un botón en forma y tamaño circular ButtonDefaults Siga las instrucciones de los materiales Wear OS.

A continuación se muestran algunos ejemplos de composición de la biblioteca:

Además, hemos introducido muchas composiciones nuevas que mejoran la experiencia de uso:

También ofrecemos una composición optimizada para el desgaste de las listas, ScalingLazyColumn, Que se aplica LazyColumn Y agrega cambios de escala y transparencia para mantener mejor las superficies redondas. Puede ver en la aplicación a continuación que el contenido se reduce y desaparece en la parte superior e inferior de la pantalla, lo que facilita la lectura:

Si miras el código, ves que es lo mismo LazyColumn, Solo por otro nombre.

val scalingLazyListState: ScalingLazyListState = 
    rememberScalingLazyListState()

ScalingLazyColumn(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.spacedBy(6.dp),
    state = scalingLazyListState,
) {
    items(messageList.size) { message ->
        Card(/*...*/) { /*...*/ }
    }

    item {
        Card(/*...*/) { /*...*/ }
    }
}

Wear tiene su propia versión Box, SwipeToDismissBox, Que agrega soporte para el gesto de liberación de la tapa (similar a un botón / gesto de retroceso en un teléfono móvil) listo para usar.

Aquí hay un ejemplo simple del código:

// Requires state (different from Box).
val state = rememberSwipeToDismissBoxState()

SwipeToDismissBox(
    modifier = Modifier.fillMaxSize(),
    state = state
) { swipeBackgroundScreen ->

    // Can render a different composable in the background during swipe.
    if (swipeBackgroundScreen) {
        /* ... */
        Text(text = "Swiping Back Content")
    } else {
        /* ... */
        Text( text = "Main Content")
    }
}

Aquí hay un ejemplo más complejo de comportamiento:

Finalmente, también ofrecemos una composición de navegación, SwipeDismissableNavHost, Que funciona así NavHost En dispositivos móviles, pero también admite gestos desplegables listos para usar (en realidad usa SwipeToDismissBox Bajo el capó).

Aquí hay un ejemplo (código):

Scaffold Proporciona una estructura de diseño para ayudarlo a organizar pantallas en plantillas comunes, así como en dispositivos móviles, pero en lugar de una barra de aplicaciones, FAB o cajón, admite el diseño especial de Weare con componentes de nivel superior como Tiempo, Viñeta e indicador de desplazamiento / posición.

El código es muy similar al que escribes en tu móvil.

Estamos muy contentos de presentar Jetpack Compose en Wear OS y hacer que el desarrollo de relojes sea más rápido y sencillo. Para participar directamente y crear una aplicación, consulte nuestra Guía de inicio rápido. Consulte nuestra muestra de repositorio para ver ejemplos de trabajo (simples y complejos).