Wear OS용 Compose로 목록 사용

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

많은 Wear OS 기기가 원형 화면을 사용하므로 화면의 상단과 하단 근처에 표시되는 목록 항목을 보기가 어렵습니다. 이러한 이유로 Wear OS용 Compose에는 크기 조정 및 모핑 애니메이션을 지원하는 TransformingLazyColumn이라는 LazyColumn 클래스의 한 가지 버전이 포함되어 있습니다. 항목이 가장자리로 이동하면 항목이 작아지고 사라집니다.

크기 조절 및 스크롤 효과를 추가하려면 Modifier.transformedHeight를 사용하여 Compose가 항목이 화면을 스크롤할 때 높이 변경사항을 계산하도록 하고 transformation = SurfaceTransformation(transformationSpec)를 사용하여 이전 항목과 일치하도록 항목을 시각적으로 축소하는 등의 시각 효과를 적용합니다.

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

다음 코드 스니펫은 TransformingLazyColumn 레이아웃을 사용하여 목록을 만들어 다양한 Wear OS 화면 크기에서 잘 표시되는 콘텐츠를 만드는 방법을 보여줍니다. 예를 들어 다음 샘플 코드에서는 TransformingLazyColumn의 contentPadding에 설정된 목록의 첫 번째 및 마지막 요소에 필요한 패딩을 추가합니다. 스크롤 표시기가 표시되도록 하려면 ScreenScaffold와 TransformingLazyColumn 간에 columnState를 공유합니다.

val columnState = rememberTransformingLazyColumnState()
val contentPadding = rememberResponsiveColumnPadding(
    first = ColumnItemType.ListHeader,
    last = ColumnItemType.Button,
)
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState,
    contentPadding = contentPadding
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}
List.kt

맞추기 및 플링 효과 추가

스냅 및 플링 동작을 추가해야 하는 경우 ScalingLazyColumn를 사용하는 것이 좋습니다. 이 효과는 사용자가 목록의 항목을 더 정확하게 탐색하고 긴 목록에서 더 빠르게 이동하는 데 도움이 됩니다.

Horologist 버전의 ScalingLazyColumn에 이 효과를 추가하려면 다음 코드 스니펫과 같이 columnState의 rotaryMode 매개변수를 RotaryWithSnap로 설정합니다.

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