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 tus Tarjetas de la app para Wear OS Este panel es particularmente útil si la apariencia de tu mosaico cambios en respuesta a condiciones, como contenido diferente según el el tamaño de la pantalla del dispositivo o un evento deportivo que llega al entretiempo.

Panel de vista previa de tarjetas en Android Studio.

Cómo agregar dependencias

Incluye las siguientes dependencias en el archivo build.gradle.kts o Archivo build.gradle:

dependencies {
    implementation("androidx.wear.tiles:tiles-tooling-preview:1.4.0")
    debugImplementation("androidx.wear.tiles:tiles-tooling:1.4.0")
    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 pantallas de Wear OS tamaños, agrega la anotación @Preview y pasa el parámetro device. Nota que esta anotación @Preview es de un paquete diferente al que 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()
    }
)

Nota: Aunque la anotación @Preview es específica para tarjetas de Wear OS, hay otras opciones como device, name, group, fontScale y locale funcionan en mismo para las vistas previas de tarjetas de Wear OS que para las vistas previas de componentes que usar Compose en Wear OS.

Agrega y registra recursos

Si tu tarjeta usa recursos de Android, deberás registrarlos en el 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 ->
        Resources.Builder()
            .setVersion(myResourcesVersion)
            .addIdToImageMapping(
                    myImageId, getImageById(R.drawable.myDrawableImageId))
            .build()
    },
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildMyTileLayout()
        ).build()
    }
)

fun getImageById(
    @DrawableRes id: Int,
): ImageResource =
    ImageResource.Builder()
        .setAndroidResourceByResId(
            AndroidImageResourceByResId.Builder()
                .setResourceId(id)
                .build(),
        )
        .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 pasos, la tarjeta muestra los valores predeterminados para ellos.

Para mostrar un valor específico, establece el parámetro platformDataValues cuando lo 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()
    }
)