앱은 모든 크기의 Wear OS 기기에서 잘 작동해야 하며, 다음과 같은 이점을 누릴 수 있어야 합니다. 공간이 더 넓고 작은 화면에서도 보기 좋게 표시됩니다. 이 가이드에서는 이러한 사용자 경험을 달성하기 위한 권장사항을 제공합니다.
적응형 레이아웃의 디자인 원칙에 관해 자세히 알아보려면 디자인 안내를 참고하세요.
Horologist를 사용하여 반응형 레이아웃 빌드
레이아웃에는 백분율 기반 여백이 있어야 합니다. Compose는 를 절댓값으로 사용하려면 Horologist 라이브러리: 다음과 같은 기능을 제공합니다.
- 가로 여백이 기기 화면의 비율에 따라 올바르게 설정됩니다. 있습니다.
- 상단 및 하단 간격이 올바르게 설정되었습니다. 이는 특히 어려움이
권장되는 상단 및 하단 간격은 현재 사용 중인 구성 요소에 따라
있습니다. 예를 들어
Chip
의 간격은Text
와 달라야 합니다. 구성요소 내에 있어야 합니다. TimeText
여백이 올바르게 설정되었습니다.
다음 코드 스니펫은 Horologist의 버전을 사용하여
다양한 기기에서 멋지게 보이는 콘텐츠를 만들 수 있는 ScalingLazyColumn
레이아웃
Wear OS 화면 크기:
val columnState = rememberResponsiveColumnState( contentPadding = ScalingLazyColumnDefaults.padding( first = ScalingLazyColumnDefaults.ItemType.Text, last = ScalingLazyColumnDefaults.ItemType.SingleButton ) ) ScreenScaffold(scrollState = columnState) { ScalingLazyColumn( columnState = columnState ) { item { ResponsiveListHeader(contentPadding = firstItemPadding()) { Text(text = "Header") } } // ... other items item { Button( imageVector = Icons.Default.Build, contentDescription = "Example Button", onClick = { } ) } } }
이 예에서는 ScreenScaffold
및 AppScaffold
도 보여줍니다.
앱과 개별 화면 간의 이러한 좌표
(탐색 경로)를 통해 올바른 스크롤 동작을 보장하고
TimeText
포지셔닝
상단 및 하단 패딩의 경우 다음을 참고하세요.
- 첫 번째와 마지막
ItemType
의 사양으로 패딩. - 목록의 첫 번째 항목에
ResponsiveListHeader
를 사용합니다.Text
헤더에 패딩이 있어서는 안 됩니다.
전체 사양은 Figma 디자인 키트에서 확인할 수 있습니다. 자세한 내용은 자세한 내용과 예는 다음을 참조하세요.
- Horologist 라이브러리: 빌드에 도움이 되는 구성요소 제공 Wear OS에 맞게 최적화되고 차별화된 앱을 개발하였습니다.
- ComposeStarter 샘플 - 이 가이드에 요약되어 있는 원칙을 설명합니다
- JetCaster 샘플 - 더 복잡한 예로서 Horologist 라이브러리를 사용하여 다양한 화면 크기에서 작동할 수 있습니다.
앱에서 스크롤 레이아웃 사용
이 페이지의 앞부분에 표시된 스크롤 레이아웃을 기본 선택으로 사용 살펴봤습니다 이렇게 하면 사용자가 앱의 구성요소에 도달할 수 있습니다. 디스플레이 환경설정이나 Wear OS 기기 화면 크기와 관계없이
다양한 기기 크기의 영향 글꼴 크기 조정 등이 있습니다
대화상자
대화상자는 스크롤이 가능해야 합니다. 별다른 이유가 없는 한 스크롤이 가능해야 합니다.
Horologist에서 제공하는 ResponsiveDialog
구성요소는
있습니다.
- 기본적으로 스크롤.
- 백분율 기반 여백을 수정했습니다.
- 여유 공간이 있는 경우 너비를 조정하는 버튼으로, 너비를 넓히고 탭 타겟.
스크롤을 기본으로 제공하고 상황에 맞게 조정되는 버튼을 제공하는 반응형 대화상자 확보할 수 있습니다
맞춤 화면에 스크롤되지 않는 레이아웃이 필요할 수 있음
일부 화면은 스크롤되지 않는 레이아웃에 적합할 수도 있습니다. 몇 가지 예 미디어 앱에는 기본 플레이어 화면을, 미디어 앱에는 운동 화면을 피트니스 앱
이러한 경우 Figma 디자인 키트를 사용해 보고 크기에 반응하는 디자인을 구현합니다. 적절한 여백을 사용하여 이미지를 조정합니다.
중단점을 통해 차별화된 환경 제공
대형 디스플레이를 사용하면 추가 콘텐츠와 기능을 도입할 수 있습니다. 받는사람 이러한 종류의 차별화된 환경을 구현하고 화면 크기 중단점을 사용하세요. 화면 크기가 225dp를 초과할 때 다른 레이아웃 표시:
const val LARGE_DISPLAY_BREAKPOINT = 225
@Composable
fun isLargeDisplay() = LocalConfiguration.current.screenWidthDp >= LARGE_DISPLAY_BREAKPOINT
// ... use in your Composables:
if (isLargeDisplay()) {
// Show additional content.
} else {
// Show content only for smaller displays.
}
설계 안내에서 더 많은 기회를 확인할 수 있습니다.
미리보기를 사용하여 화면 및 글꼴 크기의 조합 테스트
Compose 미리보기를 사용하면 다양한 Wear OS 화면 크기에 맞게 개발할 수 있습니다. 기기와 글꼴 크기 조정 미리보기 정의를 모두 사용하여 다음을 확인하세요.
- 화면 크기 조정의 최대치(예: 가장 큰 글꼴) 가장 작은 화면과 페어링됩니다.
- 차별화된 환경이 중단점에서 작동하는 방식
WearPreviewDevices
및
WearPreviewFontScales
: 앱의 모든 화면에 적용됩니다.
@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ListScreenPreview() {
ListScreen()
}
스크린샷 테스트
미리보기 테스트 외에도 스크린샷 테스트를 사용하면 확장될 수 있습니다 이것은 특히 이러한 장치들이 바로 사용할 수 없는 문제이며 사용할 수 있습니다.
스크린샷 테스트는 또한 테스트 결과 제공합니다
샘플에서는 스크린샷 테스트에 Roborazzi를 사용합니다.
- 사용할 프로젝트 및 앱
build.gradle
파일 구성 로보라찌. - 앱에 있는 각 화면의 스크린샷 테스트를 만듭니다. 예를 들어
ComposeStarter 샘플에서
GreetingScreen
테스트는 다음과 같습니다.GreetingScreenTest
에 표시된 대로 구현됩니다.
@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
override val tolerance = 0.02f
@Test
fun greetingScreenTest() = runTest {
AppScaffold(
timeText = { ResponsiveTimeText(timeSource = FixedTimeSource) }
) {
GreetingScreen(greetingName = "screenshot", onShowList = {})
}
}
companion object {
@JvmStatic
@ParameterizedRobolectricTestRunner.Parameters
fun devices() = WearDevice.entries
}
}
몇 가지 중요한 참고사항은 다음과 같습니다.
FixedTimeSource
를 사용하면TimeText
가 생성되지 않은 경우 스크린샷을 생성할 수 있습니다. 의도치 않게 테스트가 실패할 수 있습니다WearDevice.entries
에는 가장 많이 사용되는 Wear OS 기기에 관한 정의가 포함되어 있으므로 일반적인 범위의 화면 크기에서 테스트가 실행되는지 확인합니다.
골든 이미지 생성
화면용 이미지를 생성하려면 터미널에서 다음 명령어를 실행합니다.
./gradlew recordRoborazziDebug
이미지 확인
기존 이미지에 대한 변경사항을 확인하려면 터미널:
./gradlew verifyRoborazziDebug
스크린샷 테스트의 전체 예는 ComposeStarter 샘플을 참고하세요.