スナップ スクロールを有効にするボタンを作成する

ボタンを表示して、ユーザーがリスト内の特定の位置にスクロールをスナップできるようにすると、時間を節約し、ユーザー エンゲージメントを高めることができます。

バージョンの互換性

この実装では、プロジェクトの minSDK を API レベル 21 以上に設定する必要があります。

依存関係

スナップ スクロールを有効にするボタンを作成する

次のコードを使用して、10 個のアイテムを含む垂直な遅延リストでスムーズなスナップ スクロールを行うボタンを作成します。

@Composable
fun MessageList(modifier: Modifier = Modifier) {
    val listState = rememberLazyListState()
    val coroutineScope = rememberCoroutineScope()

    LazyColumn(state = listState, modifier = Modifier.height(120.dp)) {
        items(10) { index ->
            Text(
                modifier = Modifier.height(40.dp),
                text = "Item $index"
            )
        }
    }

    Button(onClick = {
        coroutineScope.launch {
            listState.animateScrollToItem(index = 0)
        }
    }) {
        Text(text = "Go top")
    }
}

コードに関する主なポイント

  • listState オブジェクトを使用して、選択した位置に LazyColumn のスクロール状態を記憶します。
  • コルーチンを起動して listState.animateScrollToItem を呼び出します。これにより、スクロール アクションをアニメーション化しながら、インデックスに登録されたアイテムまでスクロールします。

結果

アクティブなボタンがある縦方向にスクロールするリスト
図 1.スナップ スクロール ボタン付きの垂直スクロール リスト。

このガイドを含むコレクション

このガイドは、Android 開発の幅広い目標を網羅する、厳選されたクイックガイド コレクションの一部です。

リストとグリッドを使用すると、アプリでコレクションを視覚的に魅力的でユーザーが使いやすい形式で表示できます。
コンポーズ可能な関数を使用して、マテリアル デザインのデザイン システムに基づいて美しい UI コンポーネントを簡単に作成する方法を学びます。
この動画シリーズでは、さまざまな Compose API を紹介し、利用可能な API とその使用方法を簡単に説明します。

ご質問やフィードバックがある場合

よくある質問のページでクイックガイドをご覧になるか、お問い合わせフォームからご意見をお寄せください。