Visualizar blocos do Wear OS no Android Studio

A partir do Android Studio Koala Feature Drop, será possível conferir snapshots do seu Blocos do app Wear OS. Este painel é particularmente útil se a aparência do seu bloco alterações em resposta às condições, como conteúdo diferente dependendo das tamanho da tela do dispositivo ou um evento esportivo chegando ao intervalo.

Painel de visualização de blocos no Android Studio.

Adicionar dependências

Inclua as seguintes dependências no arquivo build.gradle.kts ou Arquivo 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")
}

Configurar visualizações de blocos

Para conferir uma prévia da aparência do bloco em diferentes telas do Wear OS de tamanho, adicione a anotação @Preview e transmita o parâmetro device. Observação que essa anotação @Preview é de um pacote diferente daquele que você usar para visualizações de composição.

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()
    }
)

Observação: embora a anotação @Preview seja específica para blocos do Wear OS, outras como device, name, group, fontScale e locale funcionam O mesmo acontece nas visualizações de blocos do Wear OS e nos componentes que usar o Compose no Wear OS.

Adicionar e registrar recursos

Se o Bloco usar recursos do Android, será necessário registrá-los no parâmetro onTileResourceRequest de TilePreviewData, conforme mostrado no seguinte snippet 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 das fontes de dados da plataforma

Se seu bloco usa dados de plataforma, como frequência cardíaca, calorias, distância e etapas: o bloco mostra valores padrão para elas.

Para mostrar um valor específico, defina o parâmetro platformDataValues ao criar o objeto TilePreviewData, conforme mostrado no snippet de código a seguir:

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()
    }
)