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

앱의 카드는 모든 크기의 Wear OS 기기에서 잘 작동해야 하며, 가능한 경우 추가 공간을 활용하고 작은 화면에서도 멋지게 표시되어야 합니다. 이 가이드에서는 이러한 사용자 환경을 구현하기 위한 권장사항을 제공합니다.

적응형 레이아웃의 디자인 원칙에 관한 자세한 내용은 디자인 안내를 참고하세요.

ProtoLayout을 사용하여 반응형 레이아웃 빌드

ProtoLayout Material 라이브러리는 카드를 빌드하는 데 도움이 되는 사전 정의된 레이아웃을 제공합니다. 이러한 레이아웃은 이미 화면 크기에 맞게 조정되도록 설계되었습니다.

사용 가능한 표준 레이아웃과 이를 사용하여 디자인을 빌드하는 방법을 보여주는 Figma 디자인 레이아웃을 참고하세요.

• PrimaryLayout
• EdgeContentLayout
• MultiButtonLayout
• MultiSlotLayout

대부분의 사용 사례에서는 PrimaryLayout 또는 EdgeContentLayout를 최상위 레이아웃으로 사용하는 것이 좋습니다. setResponsiveContentInsetEnabled를 사용하여 반응형 동작을 설정합니다. 예를 들면 다음과 같습니다.

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        // ...
    )
.build()

브레이크포인트를 통해 차별화된 환경 제공

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

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

materialScope(context, deviceConfiguration) {
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (deviceConfiguration.screenHeightDp >= 225) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}

디자인 가이드에서 추가 기회를 확인할 수 있습니다.

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

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

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildLayout()
        ).build()
    }
)

이렇게 하면 Android 스튜디오 내에서 직접 카드 레이아웃을 미리 볼 수 있습니다. 이전 중단점 예는 미리 볼 때 화면 공간이 허용하는 경우 추가 버튼이 표시되는 방식을 보여줍니다.

중단점의 효과를 보여주는 크고 작은 디스플레이

전체 예시는 GitHub의 미디어 카드 샘플을 참고하세요.