Jetpack ComposeのLazyRow — 概要、プロパティ、動作方法

Jetpack ComposeのLazyRowとは

LazyRow — は、要素を遅延読み込みする水平スクロール可能リストを実装するコンポーザブル関数です。すべての子要素を同時にレンダリングするRowとは異なり、LazyRowはビューポート内の表示要素のみを作成します。

LazyRowはLazyColumnと同じ原理で動作しますが、要素を水平に配置します。左右にスクロールすると、ビューポートから外れた要素が再利用されて新しい要素が表示されます。これは、多数の画像を含むギャラリーや長いカテゴリリストにとって非常に重要です。

Android Developers Blog, 2024によると、LazyRowはLazyColumnと同じLazyListアーキテクチャを使用しており、LazyListState、Poolによる再利用メカニズム、異なる要素タイプのサポートが含まれています。最大の効率は、要素の高さを固定することで達成されます。

LazyRowの基本シグネチャ

LazyRow は、modifier、state、contentPadding、reverseLayout、horizontalArrangement、verticalAlignmentのパラメータを受け入れます。コンテンツはLazyColumnと同様にDSL関数itemsとitemで定義されます。

@Composable
fun SimpleLazyRow() {
    val items = (1..50).toList()
    LazyRow(
        modifier = Modifier.fillMaxWidth().height(100.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        contentPadding = PaddingValues(start = 16.dp, end = 16.dp)
    ) {
        items(items) { item ->
            Box(
                modifier = Modifier.size(80.dp).background(Color.Gray)
            ) {
                Text(text = "$item", modifier = Modifier.align(Alignment.Center))
            }
        }
    }
}

LazyRowのプロパティ: horizontalArrangementとcontentPadding

horizontalArrangement は、LazyRow内の水平軸に沿った要素の分布を管理します。Rowと同じArrangement値が使用可能です: Start、Center、End、SpaceBetween、SpaceEvenly、SpaceAround、およびカスタム間隔のspacedBy。

contentPadding は、LazyRowコンテナの端にパディングを追加します。Modifier.paddingとは異なり、contentPaddingはスクロール時に考慮されます。最初の要素は左端から、最後の要素は右端からパディングが適用されます。Material Design Guidelines, 2025によると、カルーセルやギャラリーでは、最初と最後の要素が画面端に張り付かないようにcontentPaddingが必須です。

verticalAlignment は、LazyRow内で要素を垂直に整列します。デフォルトではAlignment.Topが使用されます。異なる高さの要素を中央揃えにするには、Alignment.CenterVerticallyを使用します。これは、異なるアスペクト比の画像を含むカルーセルに便利です。

LazyRowパラメータテーブル

LazyListStateによる水平スクロール管理

LazyListState はLazyRowの場合もLazyColumnと同様に機能します。最初の表示要素、オフセット、全体的なスクロール位置を追跡します。状態はrememberLazyListState()で作成され、stateパラメータに渡されます。

LazyRow のプログラムによるスクロール制御は同じメソッドで行われます。スムーズなアニメーションにはanimateScrollToItem、即時スクロールにはscrollToItemを使用します。どちらもコルーチン内で呼び出されます。これは、左右ボタン付きのカルーセルや自動スクロールに便利です。

Android Developers, 2024によると、LazyRowはSnapFlingBehaviorもサポートしています — これは、要素間ではなく最も近い要素で停止する高速スクロール動作です。これにより、カルーセルやギャラリーでおなじみのスナップ効果が生まれます。

@Composable
fun CarouselWithSnap() {
    val listState = rememberLazyListState()
    val scope = rememberCoroutineScope()
    val items = listOf("A", "B", "C", "D", "E")

    Column {
        LazyRow(
            state = listState,
            flingBehavior = SnapFlingBehavior(listState),
            horizontalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(items) { item ->
                Card(modifier = Modifier.width(150.dp)) {
                    Text(text = item, modifier = Modifier.padding(16.dp))
                }
            }
        }

        Row(modifier = Modifier.fillMaxWidth()) {
            Button(onClick = {
                scope.launch {
                    listState.animateScrollToItem(0)
                }
            }) { Text("開始するには") }
        }
    }
}

インターフェースでのLazyRowの使用例

最初の例 — プレビュー付き画像ギャラリー用のLazyRow。各要素は画像とキャプションを含むBoxです。LazyRowは数十から数百の画像を効率的に処理し、表示されているものだけを読み込みます。

@Composable
fun ImageGallery(images: List<String>) {
    LazyRow(
        contentPadding = PaddingValues(start = 16.dp, end = 16.dp),
        horizontalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        items(images, key = { it }) { url ->
            AsyncImage(
                model = url,
                contentDescription = "Image",
                modifier = Modifier.size(120.dp)
            )
        }
    }
}

2番目の例 — アイコン付きカテゴリリスト用のLazyRow。カテゴリはチップとして表示され、ユーザーは水平にスクロールできます。spacedByとcontentPaddingを備えたLazyRowは、カテゴリ間と端に間隔を作成します。

@Composable
fun CategoryChips(categories: List<String>) {
    LazyRow(
        contentPadding = PaddingValues(horizontal = 16.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(categories, key = { it }) { category ->
            AssistChip(
                onClick = {},
                label = { Text(category) }
            )
        }
    }
}

LazyRow vs Row: どちらを選ぶべきか

LazyRow とRowの選択は要素数によって異なります。Rowは常に画面に表示される5–10個の要素に適しています。LazyRowは要素が多い場合や数が動的な場合に必要です。

Row はすべての要素を一度にレンダリングするため、要素数が多いと遅延が発生します。LazyRowは表示要素のみをレンダリングするため、スクロール可能なリストに適しています。Android Developers Blog, 2024によると、閾値は約10要素です。それ以上の要素がある場合はLazyRowを使用してください。

LazyRow はアニメーション、SnapFlingBehavior、セパレータによるグループ化もサポートしており、複雑なインターフェースにより柔軟に対応できます。RowはよりシンプルでLazyListStateを必要としませんが、長いリストには最適化されていません。

• Row — スクロールなしの5–10個の静的要素用
• LazyRow — 水平スクロール付きの10+要素用
• LazyRow — カルーセル、ギャラリー、動的リスト用