Visualizzare l'anteprima dei riquadri di Wear OS in Android Studio

A partire dal rilascio delle funzionalità di Android Studio Koala, puoi visualizzare gli istantanei dei riquadri della tua app per Wear OS. Questo riquadro è particolarmente utile se l'aspetto del riquadro cambia in base a determinate condizioni, ad esempio contenuti diversi a seconda delle dimensioni del display del dispositivo o un evento sportivo che raggiunge l'intervallo.

I nomi dei gruppi nel riquadro di anteprima corrispondono al nome del gruppo specificato nell'annotazione di anteprima
Riquadro di anteprima dei riquadri in Android Studio.

Aggiungi dipendenze

Includi le seguenti dipendenze nel file build.gradle.kts o build.gradle dell'app:

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

Configurare le anteprime dei riquadri

Per visualizzare un'anteprima dell'aspetto del riquadro su diversi dimensioni del display Wear OS, aggiungi l'annotazione @Preview e passa il parametro device. Tieni presente che questa annotazione @Preview proviene da un pacchetto diverso da quello che utilizzi per le anteprime componibili.

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

Aggiungere e registrare le risorse

Se il riquadro utilizza risorse Android, dovrai registrarle nel parametro onTileResourceRequest di TilePreviewData, come mostrato nel seguente snippet di codice:

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

Mostrare valori specifici dalle origini dati della piattaforma

Se il riquadro utilizza i dati della piattaforma, come battito cardiaco, calorie, distanza e passi, vengono visualizzati i valori predefiniti.

Per mostrare un valore specifico, imposta il parametro platformDataValues durante la creazione dell'oggetto TilePreviewData, come mostrato nello snippet di codice seguente:

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