Wear OS용 Compose로 목록 사용

목록을 사용하면 사용자는 Wear OS 기기에서 여러 선택 항목 중 하나를 고를 수 있습니다.

많은 Wear OS 기기가 원형 화면을 사용하므로 화면의 상단과 하단 근처에 표시되는 목록 항목을 보기가 어렵습니다. 이러한 이유로 Wear OS용 Compose에는 크기 조정 및 페이딩 효과를 지원하는 ScalingLazyColumn이라는 LazyColumn 클래스의 한 가지 버전이 포함되어 있습니다. 항목이 화면 중앙으로 이동하면 항목이 더 크고 불투명해집니다.

다음 애니메이션은 요소가 화면에서 움직일 때 크기와 투명도가 어떻게 변경되는지 보여줍니다.

다음 코드 스니펫은 Horologist의 ScalingLazyColumn 레이아웃의 버전을 사용해 다양한 Wear OS 화면 크기에서 보기 좋게 표시됨(예: 첫 번째와 마지막 요소에 필요한 패딩을 추가합니다. ScalingLazyColumn의 scrollState에 설정된 목록의 예입니다.

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

맞추기 및 플링 효과 추가

사용자가 ScalingLazyColumn 객체에 적용하는 손가락 동작에 맞추기 및 플링 동작을 추가할 수 있습니다. 이 효과는 사용자가 목록의 항목을 더 정확하게 탐색하고 긴 목록에서 더 빠르게 이동하는 데 도움이 됩니다.

이 효과를 Horologist의 ScalingLazyColumn 버전에 추가하려면 다음 안내를 따르세요. columnState의 rotaryMode 매개변수를 RotaryWithSnap를 사용해야 합니다.

val columnState = rememberResponsiveColumnState(
    // ...
    // ...
    rotaryMode = ScalingLazyColumnState.RotaryMode.Snap
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        // ...
        // ...
    }
}
List.kt