다양한 화면 크기에 맞는 카드 개발

앱의 타일은 모든 크기의 Wear OS 기기에서 잘 작동해야 하며, 사용 가능한 추가 공간을 활용하고 작은 화면에서도 보기 좋아야 합니다. 이 가이드에서는 이러한 사용자 환경을 달성하기 위한 권장사항을 제공합니다.

적응형 레이아웃의 디자인 원칙에 관해 자세히 알아보려면 디자인 안내를 참고하세요.

중단점을 통해 차별화된 환경 제공

ProtoLayout Material 라이브러리의 레이아웃은 반응형이며 올바른 요소 배치와 가시성을 처리합니다. 하지만 최상의 결과를 얻기 위해 표시되는 요소의 수를 변경해야 하는 경우도 있습니다. 예를 들어 작은 디스플레이에는 버튼 3개를, 큰 디스플레이에는 버튼 5개를 표시할 수 있습니다.

이러한 차별화된 환경을 구현하려면 화면 크기 중단점을 사용하세요. 화면 크기가 225dp를 초과할 때 다른 레이아웃을 표시하려면 다음을 실행하세요.

materialScope(this, requestParams.deviceConfiguration) {
    // ...
    val isLargeScreen = deviceConfiguration.screenWidthDp >= 225
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (isLargeScreen) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}
Tile.kt

디자인 안내에서는 추가 기회를 보여줍니다.

미리보기를 사용하여 다양한 화면 크기에서 타일 테스트

다양한 화면 크기에서 레이아웃을 테스트하는 것이 중요합니다. 타일 미리보기 주석을 TilePreviewHelper 및 TilePreviewData 클래스와 함께 사용합니다.

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData {
    TilePreviewHelper.singleTimelineEntryTileBuilder(
        materialScope(context, it.deviceConfiguration) {
            myAdaptiveLayout() // varies the layout depending on the size of the screen
        }
    )
        .build()
}
Tile.kt

이렇게 하면 Android 스튜디오 내에서 직접 카드 레이아웃을 미리 볼 수 있습니다.

전체 예시는 GitHub의 타이머 타일 샘플을 참고하세요.