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