Wear OS 向け Compose でのリスト

リストを使用すると、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