Cómo obtener una vista previa de las tarjetas de Wear OS en Android Studio

A partir de la Actualización de funciones de Koala de Android Studio, puedes ver instantáneas de las tarjetas de tu app para Wear OS. Este panel es particularmente útil si la apariencia de tu tarjeta cambia en respuesta a condiciones, como contenido diferente según el tamaño de la pantalla del dispositivo o un evento deportivo que alcanza el entretiempo.

Agrega dependencias

Incluye las siguientes dependencias en el archivo build.gradle.kts o build.gradle de tu app:

dependencies {
    implementation("androidx.wear.tiles:tiles-tooling-preview:1.4.0-beta01")
    debugImplementation("androidx.wear.tiles:tiles-tooling:1.4.0-beta01")
    implementation("androidx.wear:wear-tooling-preview:1.0.0")
}

Cómo configurar vistas previas de mosaicos

Para obtener una vista previa de la apariencia de tu tarjeta en diferentes tamaños de visualización de Wear OS, agrega la anotación @Preview y pasa el parámetro device. Ten en cuenta que esta anotación @Preview pertenece a un paquete diferente del que usas para las vistas previas que admiten composición.

import androidx.wear.tiles.tooling.preview.Preview

@Preview(device = WearDevices.SMALL_ROUND)
@Preview(device = WearDevices.LARGE_ROUND)
fun tilePreview(context: Context) = TilePreviewData(
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildMyTileLayout()
        ).build()
    }
)

Agrega y registra recursos

Si tu tarjeta usa recursos de Android, deberás registrarlos dentro del parámetro onTileResourceRequest de TilePreviewData, como se muestra en el siguiente fragmento de código:

import androidx.wear.tiles.tooling.preview.Preview

@Preview(device = WearDevices.SMALL_ROUND)
fun previewWithResources(context: Context) = TilePreviewData(
    onTileResourceRequest = { request ->
        ProtoResources.Builder()
            .setVersion(myResourcesVersion)
            .addIdToImageMapping(
                    myImageId, getImageById(R.drawable.myDrawableImageId))
            .build()
    },
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildMyTileLayout()
        ).build()
    }
)

Mostrar valores específicos de fuentes de datos de la plataforma

Si tu tarjeta usa datos de plataforma, como frecuencia cardíaca, calorías, distancia y pasos, mostrará los valores predeterminados para ellas.

Para mostrar un valor específico, establece el parámetro platformDataValues cuando crees el objeto TilePreviewData, como se muestra en el siguiente fragmento de código:

import androidx.wear.tiles.tooling.preview.Preview

@Preview(device = WearDevices.SMALL_ROUND)
fun previewWithPlatformOverride(context: Context) = TilePreviewData(
    platformDataValues = PlatformDataValues.of(
        PlatformHealthSources.Keys.HEART_RATE_BPM,
        DynamicDataBuilders.DynamicDataValue.fromFloat(160f)
    ),
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildMyTileLayout()
        ).build()
    }
)