Wyświetlanie podglądu kafelków na Wear OS w Android Studio

Począwszy w pakiecie funkcji Android Studio Koala, możesz wyświetlać zrzuty kafelków z aplikacji na Wear OS. Ten panel jest szczególnie przydatny, jeśli wygląd kafelka zmienia się w reakcji na określone warunki, np. wyświetla różne treści w zależności od rozmiaru ekranu urządzenia lub w przypadku wydarzenia sportowego w trakcie drugiej połowy.

Panel podglądu kafelków w Android Studio.

Dodawanie zależności

W pliku build.gradle.kts lub build.gradle aplikacji umieść te zależności:

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

Konfigurowanie podglądów kart

Aby wyświetlić podgląd wyglądu kafelka na różnych rozmiarach ekranów urządzeń z systemem Wear OS, dodaj adnotację @Preview i przekaż parametr device. Pamiętaj, że ta adnotacja @Preview pochodzi z innego pakietu niż ten, którego używasz do kompozycji podglądów.

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

Uwaga: chociaż adnotacja @Preview dotyczy tylko kafelków na Wear OS, inne opcje, takie jak device, name, group, fontScale i locale, działają tak samo w przypadku podglądów kafelków na Wear OS jak i podglądów komponentów, które korzystają z kompilacji na Wear OS.

Dodawanie i rejestrowanie zasobów

Jeśli kafelek korzysta z zasobów Androida, musisz zarejestrować te zasoby w parametrze onTileResourceRequest w elementach TilePreviewData, jak pokazano w tym fragmencie kodu:

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

Wyświetlanie konkretnych wartości z źródeł danych platformy

Jeśli kafelek korzysta z danych platformy takich jak tętno, kalorie, dystans czy kroki, pojawiają się w nim wartości domyślne.

Aby wyświetlić konkretną wartość, ustaw parametr platformDataValues podczas tworzenia obiektu TilePreviewData, jak w tym fragmencie kodu:

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