Android Studio で Wear OS のタイルをプレビューする

Android Studio Koala の機能ドロップ以降、Wear OS アプリのタイルのスナップショットを表示できるようになりました。このパネルは、デバイスのディスプレイサイズに応じてコンテンツが異なる場合や、スポーツ イベントがハーフタイムに達した場合など、条件に応じてタイルの外観が変化する場合に特に便利です。

Android Studio のタイル プレビュー パネル。

依存関係を追加する

アプリの build.gradle.kts ファイルまたは build.gradle ファイルに次の依存関係を含めます。

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

タイルのプレビューを構成する

さまざまな Wear OS ディスプレイ サイズでのタイルの外観をプレビューするには、@Preview アノテーションを追加し、device パラメータを渡します。この @Preview アノテーションは、コンポーズ可能なプレビューに使用するパッケージとは異なります。

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

注: @Preview アノテーションは Wear OS タイルに固有のものですが、device、name、group、fontScale、locale などの他のオプションは、Wear OS で Compose を使用するコンポーネントのプレビューと同様に、Wear OS タイルのプレビューでも機能します。

リソースを追加して登録する

タイルが Android リソースを使用する場合は、次のコード スニペットに示すように、TilePreviewData の onTileResourceRequest パラメータ内でリソースを登録する必要があります。

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

プラットフォームのデータソースから特定の値を表示する

タイルが心拍数、カロリー、距離、歩数などのプラットフォーム データを使用している場合、タイルにデフォルト値が表示されます。

特定の値を表示するには、次のコード スニペットに示すように、TilePreviewData オブジェクトを作成するときに platformDataValues パラメータを設定します。

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