Wear OS용 Compose로 목록 사용

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

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

권장되는 크기 조정 및 스크롤 효과를 적용하려면 다음 단계를 따르세요.

  1. Modifier.transformedHeight를 사용하여 항목이 화면을 스크롤할 때 Compose가 높이 변화를 계산하도록 허용합니다.
  2. transformation = SurfaceTransformation(transformationSpec)을 사용하여 항목 콘텐츠 축소 등 시각적 효과를 적용합니다.
  3. `Text`와 같이 ` transformation`을 매개변수로 사용하지 않는 구성요소에 맞춤 `TransformationSpec`을 사용합니다.

다음 애니메이션은 목록 요소가 화면의 상단과 하단에 접근할 때 크기가 조정되고 모양이 변경되는 방식을 보여줍니다.

다음 코드 스니펫은 TransformingLazyColumn 레이아웃을 사용하여 다양한 Wear OS 화면 크기에서 멋지게 보이는 콘텐츠를 만드는 목록을 만드는 방법을 보여줍니다.

이 스니펫은 목록의 상단과 하단에 올바른 패딩을 적용하기 위해 목록 항목에 설정해야 하는 minimumVerticalContentPadding 수정자의 사용법도 보여줍니다.

스크롤 표시기를 표시하려면 ScreenScaffold와 TransformingLazyColumn 간에 columnState를 공유합니다.

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

맞추기 및 플링 효과 추가

맞추기 및 플링 동작을 추가해야 하는 경우 다음 코드 스니펫과 같이 flingBehavior 매개변수를 TransformingLazyColumnDefaults.snapFlingBehavior(columnState)로 설정합니다. 
val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(scrollState = columnState) {
    TransformingLazyColumn(
        state = columnState,
        flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(columnState)
    ) {
        // ...
        // ...
    }
}
List.kt