リストを使用すると、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 = { } ) } } }
スナップ&フリング エフェクトを追加する
ユーザーが ScalingLazyColumn
オブジェクトに適用するフィンガー ジェスチャーに、スナップ&フリング動作を追加できます。このエフェクトにより、ユーザーはリスト内のアイテム間をより正確に移動できるだけでなく、長いリスト内をより素早く移動できるようになります。
このエフェクトを Horologist の ScalingLazyColumn
バージョンに追加するには、次のコード スニペットに示すように、columnState
の rotaryMode
パラメータを RotaryWithSnap
に設定します。
val columnState = rememberResponsiveColumnState( // ... // ... rotaryMode = ScalingLazyColumnState.RotaryMode.Snap ) ScreenScaffold(scrollState = columnState) { ScalingLazyColumn( columnState = columnState ) { // ... // ... } }
あなたへのおすすめ
- 注: JavaScript がオフになっている場合はリンクテキストが表示されます
- Wear OS 向け Compose の Codelab
- リストとグリッド
- Compose でビューを使用する