Android 스튜디오에서 Wear OS 카드 미리보기

Android 스튜디오 Koala 기능 출시부터 Wear OS 앱 타일의 스냅샷을 볼 수 있습니다. 이 패널은 기기의 디스플레이 크기에 따라 달라지는 콘텐츠 또는 하프타임에 도달하는 스포츠 경기와 같은 조건에 따라 카드의 모양이 변경되는 경우에 특히 유용합니다.

Android 스튜디오의 Tiles Preview 패널

종속 항목 추가

앱의 build.gradle.kts 또는 build.gradle 파일에 다음 종속 항목을 포함합니다.

dependencies {
    implementation("androidx.wear.tiles:tiles-tooling-preview:1.4.0-beta01")
    debugImplementation("androidx.wear.tiles:tiles-tooling:1.4.0-beta01")
    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 ->
        ProtoResources.Builder()
            .setVersion(myResourcesVersion)
            .addIdToImageMapping(
                    myImageId, getImageById(R.drawable.myDrawableImageId))
            .build()
    },
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildMyTileLayout()
        ).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()
    }
)