앱 타일은 모든 크기의 Wear OS 기기에서 잘 작동하면서 가능한 경우 추가 공간을 활용하고 작은 화면에서도 멋지게 표시되어야 합니다. 이 가이드에서는 이러한 사용자 환경을 달성하기 위한 권장사항을 제공합니다.
적응형 레이아웃의 디자인 원칙에 관한 자세한 내용은 디자인 안내를 참고하세요.
ProtoLayout을 사용하여 반응형 레이아웃 빌드
ProtoLayout Material 라이브러리는 카드를 빌드하는 데 도움이 되는 사전 정의된 레이아웃을 제공합니다. 이러한 레이아웃은 이미 화면 크기에 맞게 조정되도록 설계되었습니다.
사용 가능한 표준 레이아웃과 이를 사용하여 디자인을 빌드하는 방법을 보여주는 Figma 디자인 레이아웃을 참고하세요.
대부분의 사용 사례에서는 PrimaryLayout 또는 EdgeContentLayout를 최상위 레이아웃으로 사용하는 것이 좋습니다. setResponsiveContentInsetEnabled를 사용하여 반응형 동작을 설정합니다. 예를 들면 다음과 같습니다.
PrimaryLayout.Builder(deviceParameters)
.setResponsiveContentInsetEnabled(true)
.setContent(
// ...
)
.build()
중단점을 통해 차별화된 환경 제공
대형 디스플레이를 사용하면 추가 콘텐츠와 기능을 도입할 수 있습니다. 이러한 종류의 차별화된 환경을 구현하려면 화면 크기가 225dp를 초과할 때 다른 레이아웃을 표시하는 화면 크기 중단점을 사용합니다.
PrimaryLayout.Builder(deviceParameters)
.setResponsiveContentInsetEnabled(true)
.setContent(
MultiButtonLayout.Builder()
.addButtonContent(button1)
.addButtonContent(button2)
.addButtonContent(button3)
.apply {
if (deviceParameters.screenHeightDp >= 225) {
addButtonContent(button4)
addButtonContent(button5)
}
}
.build()
)
.setPrimaryLabelTextContent(label)
.setPrimaryChipContent(compactChip)
.build()
설계 안내에서 추가적인 기회를 확인할 수 있습니다.
미리보기를 사용하여 다양한 화면 크기에서 카드 테스트
다양한 화면 크기에서 레이아웃을 테스트하는 것이 중요합니다. TilePreviewHelper 및 TilePreviewData 클래스와 함께 카드 미리보기 주석을 사용하세요.
@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
onTileRequest = { request ->
TilePreviewHelper.singleTimelineEntryTileBuilder(
buildLayout()
).build()
}
)
이를 통해 Android 스튜디오에서 바로 카드 레이아웃을 미리 볼 수 있습니다. 이전의 중단점 예는 화면 공간이 허용될 때(미리보기 시) 추가 버튼이 표시되는 방식을 보여줍니다.
중단점 효과를 보여주는 소형 및 대형 디스플레이
전체 예는 GitHub의 미디어 타일 샘플을 참고하세요.