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

A partire dal rilascio di funzionalità Koala di Android Studio, puoi visualizzare istantanee dei tuoi Riquadri dell'app per Wear OS. Questo riquadro è particolarmente utile se l'aspetto del tuo riquadro cambiamenti in risposta alle condizioni, ad esempio contenuti diversi a seconda le dimensioni del display del dispositivo o un evento sportivo che sta per raggiungere l'intervallo.

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

Aggiungi dipendenze

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

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

Configurare le anteprime dei riquadri

Per vedere un'anteprima dell'aspetto del tuo riquadro su un altro display Wear OS dimensioni, aggiungi l'annotazione @Preview e trasmetti il parametro device. Nota che questa annotazione @Preview proviene da un pacchetto diverso da quello utilizza 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()
    }
)

Aggiungi e registra risorse

Se il tuo riquadro utilizza risorse Android, dovrai registrarle all'interno Parametro onTileResourceRequest di TilePreviewData, come mostrato in 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()

Mostra valori specifici dalle origini dati della piattaforma

Se il riquadro utilizza dati della piattaforma, come battito cardiaco, calorie, distanza e passaggi: il riquadro mostra i relativi valori predefiniti.

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

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