Wear OS 向け Compose でのリスト

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

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

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

次のコード スニペットは、各アイテムのテキストを含むリストを作成する方法を示しています。

val contentModifier = Modifier
    .fillMaxWidth()
    .padding(bottom = 8.dp)

@Composable
fun WearApp() {
    WearAppTheme {
        // Hoist the list state to remember scroll position across compositions.
        val listState = rememberScalingLazyListState()

        ScalingLazyColumn(
            modifier = Modifier.fillMaxSize(),
            autoCentering = AutoCenteringParams(itemIndex = 0),
            state = listState
        ) {
            item { TextItem(contentModifier, stringResource(R.string.first)) }
            item { TextItem(contentModifier, stringResource(R.string.second)) }
        }
    }
}

@Composable
fun TextItem(modifier: Modifier = Modifier, contents: String) {
    Text(
        modifier = modifier,
        textAlign = TextAlign.Center,
        text = contents
    )
}

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

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

このエフェクトをアプリのリストまたは選択ツールに追加するには、次のコード スニペットに示すように、ScalingLazyColumn の定義に flingBehavior パラメータを含めます。

ScalingLazyColumn(
    modifier = modifier ...,
    flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(
        state = listState,
        snapOffset = 0
        // Exponential decay by default. You can also explicitly define a
        // DecayAnimationSpec.
    ) {
        // Contents of the list here.
}

同様のスナップ＆フリング動作を、ユーザーがロータリー ダイヤルを操作するときに ScalingLazyColumn に適用するには、GitHub の Horologist で入手できる RotaryWithSnap を使用します。