Wear OS용 Compose를 사용한 목록

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

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

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

다음 코드 스니펫은 각 항목의 텍스트를 포함하는 목록을 만드는 방법을 보여줍니다.

val contentModifier = Modifier
    .fillMaxWidth()
    .padding(bottom = 8.dp)

@Composable
fun WearApp() {
    WearAppTheme {
        // Hoist the list state to remember scroll position across compositions.
        val listState = rememberScalingLazyListState()

        ScalingLazyColumn(
            modifier = Modifier.fillMaxSize(),
            autoCentering = AutoCenteringParams(itemIndex = 0),
            state = listState
        ) {
            item { TextItem(contentModifier, stringResource(R.string.first)) }
            item { TextItem(contentModifier, stringResource(R.string.second)) }
        }
    }
}

@Composable
fun TextItem(modifier: Modifier = Modifier, contents: String) {
    Text(
        modifier = modifier,
        textAlign = TextAlign.Center,
        text = contents
    )
}

맞추기 및 플링 효과 추가

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

이 효과를 앱의 목록 또는 선택 도구에 추가하려면 다음 코드 스니펫과 같이 ScalingLazyColumn 정의에 flingBehavior 매개변수를 포함합니다.

ScalingLazyColumn(
    modifier = modifier ...,
    flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(
        state = listState,
        snapOffset = 0
        // Exponential decay by default. You can also explicitly define a
        // DecayAnimationSpec.
    ) {
        // Contents of the list here.
}

사용자가 로터리 다이얼과 상호작용할 때 ScalingLazyColumn에 이와 비슷한 맞추기 및 플링 동작을 적용하려면 GitHub의 Horologist에서 사용할 수 있는 RotaryWithSnap을 사용합니다.