앱 타일은 모든 크기의 Wear OS 기기에서 잘 작동해야 하며, 가능한 경우 추가 공간을 활용하고 작은 화면에서도 멋지게 보이도록 사용할 수 있습니다. 이 가이드에서는 이 사용자를 달성하기 위한 권장사항을 제공합니다. 경험해 볼 수 있습니다
적응형 레이아웃의 디자인 원칙에 관해 자세히 알아보려면 디자인 안내를 참고하세요.
ProtoLayout을 사용하여 반응형 레이아웃 빌드
ProtoLayout Material 라이브러리는 사전 정의된 레이아웃을 제공하여 타일을 만들 수 있습니다. 이러한 레이아웃은 화면에 맞게 조정되도록 이미 설계되어 있습니다. 있습니다.
Figma 디자인 레이아웃은 표준 사용 가능한 레이아웃과 이를 사용하여 디자인을 빌드하는 방법을 알아보세요.
최상위 수준으로는 PrimaryLayout 또는 EdgeContentLayout을(를) 사용하는 것이 좋습니다.
대부분의 사용 사례에 적합한 레이아웃을 제공합니다. 다음을 사용하여 반응형 동작을 설정합니다.
setResponsiveContentInsetEnabled 예를 들면 다음과 같습니다.
PrimaryLayout.Builder(deviceParameters)
.setResponsiveContentInsetEnabled(true)
.setContent(
// ...
)
.build()
중단점을 통해 차별화된 환경 제공
ProtoLayout Material 라이브러리의 레이아웃은 이미 반응형이며 올바른 요소 배치와 가시성을 처리해야 합니다. 그러나 경우에 따라 최상의 결과를 얻으려면 표시되는 요소의 수를 변경하는 것이 좋습니다. 대상 예를 들어 작은 디스플레이에 3개의 버튼, 큰 디스플레이에 5개의 버튼을 배치할 수 있습니다. 디스플레이.
이와 같이 차별화된 환경을 구현하려면 화면 크기 중단점. 화면 크기가 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의 미디어 타일 샘플을 참고하세요.