Wear OS 向け Compose でのリスト

リストを使用すると、Wear OS デバイス上でユーザーが選択肢の中からアイテムを選択できるようになります。

多くの Wear OS デバイスは円形の画面であるため、画面の上部や下部付近に表示されるリストアイテムが見づらくなっています。このため、Wear OS 向け Compose には、スケーリングおよびフェード エフェクトをサポートする ScalingLazyColumn という LazyColumn クラスのバージョンが含まれています。アイテムが画面の中央に向かって移動すると、アイテムはより大きくなり、不透明度も上がります。

次のアニメーションは、画面に沿って要素のサイズと透明度がどのように変化するかを示しています。

次のコード スニペットは、Horologist の ScalingLazyColumn レイアウトのバージョンを使用して、 さまざまな Wear OS の画面サイズで適切に表示される（例: 以下の例では、最初と最後の要素に必要なパディングが追加されます。 ScalingLazyColumn の scrollState に設定されているリストの次の形式にします。

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ScalingLazyColumnDefaults.ItemType.Text,
        last = ScalingLazyColumnDefaults.ItemType.SingleButton
    )
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                imageVector = Icons.Default.Build,
                contentDescription = "Example Button",
                onClick = { }
            )
        }
    }
}
List.kt

スナップ＆フリング エフェクトを追加する

ユーザーが ScalingLazyColumn オブジェクトに適用するフィンガー ジェスチャーに、スナップ＆フリング動作を追加できます。このエフェクトにより、ユーザーはリスト内のアイテム間をより正確に移動できるだけでなく、長いリスト内をより素早く移動できるようになります。

この効果を Horologist バージョンの ScalingLazyColumn に追加するには、 columnState の rotaryMode パラメータを以下に設定します。 RotaryWithSnap のコード スニペットのとおりです。

val columnState = rememberResponsiveColumnState(
    // ...
    // ...
    rotaryMode = ScalingLazyColumnState.RotaryMode.Snap
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        // ...
        // ...
    }
}
List.kt