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