Wear OS용 Compose로 목록 사용

Wear OS용 Compose Material 버전 2.5 3

---

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

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

확대/축소 및 스크롤 효과를 추가하려면 Modifier.transformedHeight를 사용하여 항목이 화면을 스크롤할 때 Compose가 높이 변화를 계산하도록 하고 transformation = SurfaceTransformation(transformationSpec)를 사용하여 이전 항목과 일치하도록 항목을 시각적으로 축소하는 등 시각 효과를 적용합니다. transformation를 매개변수로 사용하지 않는 구성요소(예: Text)에는 맞춤 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