이 페이지는 Cloud Translation API를 통해 번역되었습니다.

다양한 화면 크기에 맞게 개발

앱은 모든 크기의 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 = { }
            )
        }
    }
}List.kt

이 예에서는 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.
    }
    // ...List.kt

설계 안내에서 더 많은 기회를 확인할 수 있습니다.

미리보기를 사용하여 화면 및 글꼴 크기의 조합 테스트

Compose 미리보기를 사용하면 다양한 Wear OS 화면 크기에 맞게 개발할 수 있습니다. 기기와 글꼴 크기 조정 미리보기 정의를 모두 사용하여 다음을 확인하세요.

화면 크기 조정의 최대치(예: 가장 큰 글꼴) 가장 작은 화면과 페어링됩니다.
차별화된 환경이 중단점에서 작동하는 방식

WearPreviewDevices 및 WearPreviewFontScales: 앱의 모든 화면에 적용됩니다.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}List.kt

스크린샷 테스트

미리보기 테스트 외에도 스크린샷 테스트를 사용하면 확장될 수 있습니다 이것은 특히 이러한 장치들이 바로 사용할 수 없는 문제이며 사용할 수 있습니다.

스크린샷 테스트는 또한 테스트 결과 제공합니다

샘플에서는 스크린샷 테스트에 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 샘플을 참고하세요.