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.

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 vedere un'anteprima dell'aspetto del tuo riquadro su diverse dimensioni di display per 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()
    }
)

Nota: sebbene l'annotazione @Preview sia specifica per i riquadri di Wear OS, altre opzioni come device, name, group, fontScale e locale funzionano allo stesso modo per le anteprime dei riquadri di Wear OS e per le anteprime dei componenti che utilizzano Compose su Wear OS.

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