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