リスト表示：LazyColumnとLazyRowの実装と活用法【Jetpack Compose入門⑦】

Jetpack Composeにおけるリスト表示
1. Jetpack Composeの特徴
LazyColumnの実装
LazyRowの実装
LazyColumnとLazyRowの組み合わせ
まとめ

Jetpack Composeにおけるリスト表示

Jetpack Composeの特徴

Jetpack Composeでは、リスト表示のためにRecyclerViewを使用する代わりに、LazyColumnとLazyRowというComposable関数を活用します。これらのコンポーネントを使うことで、効率的に大量のアイテムをスクロール可能なリストとして表示できます。

従来のRecyclerViewでは、AdapterやViewHolderを用いた複雑な実装が必要でしたが、LazyColumnとLazyRowを使うことで、シンプルなコードでリストUIを作成できます。

LazyColumnの実装

LazyColumnとは？

LazyColumnは縦方向にスクロールするリストを表示するためのコンポーネントです。通常のColumnと異なり、画面に表示されていないアイテムは描画されないため、パフォーマンスが向上します。

基本的なLazyColumnの実装

@Composable
fun SimpleLazyColumn() {
    LazyColumn {
        items(100) { index ->
            Text(text = "アイテム #$index", modifier = Modifier.padding(16.dp))
        }
    }
}

コードの解説

LazyColumn {} を使用してスクロール可能な縦リストを作成。
items(100) {} を用いて100個のアイテムをリストに追加。
Text(text = "アイテム #$index") で各アイテムを表示。
Modifier.padding(16.dp) を適用して各アイテムに余白を設定。

カスタムアイテムレイアウトの作成

テキストだけでなく、アイコンやボタンを含むカスタムアイテムを作成することも可能です。

@Composable
fun CustomLazyColumn() {
    val itemsList = listOf("アップル", "バナナ", "チェリー", "ドラゴンフルーツ")
    
    LazyColumn {
        items(itemsList) { item ->
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Icon(imageVector = Icons.Default.Favorite, contentDescription = null)
                Spacer(modifier = Modifier.width(8.dp))
                Text(text = item, fontSize = 20.sp)
            }
        }
    }
}

LazyRowの実装

LazyRowとは？

LazyRowは横方向にスクロールするリストを表示するためのコンポーネントです。LazyColumnと同じように、表示されていないアイテムは描画されません。

基本的なLazyRowの実装

@Composable
fun SimpleLazyRow() {
    LazyRow {
        items(10) { index ->
            Text(
                text = "アイテム #$index",
                modifier = Modifier
                    .padding(16.dp)
                    .background(Color.LightGray)
            )
        }
    }
}

コードの解説

LazyRow {} を使用してスクロール可能な横リストを作成。
items(10) {} を用いて10個のアイテムをリストに追加。
Text(text = "アイテム #$index") で各アイテムを表示。
Modifier.padding(16.dp) を適用して余白を設定。
Modifier.background(Color.LightGray) で背景色を設定。

カスタムアイテムの作成

アイコンや画像を含むカスタムレイアウトを作成することも可能です。

@Composable
fun CustomLazyRow() {
    val itemsList = listOf("🍎", "🍌", "🍒", "🍇", "🥭")
    
    LazyRow {
        items(itemsList) { item ->
            Box(
                modifier = Modifier
                    .size(80.dp)
                    .padding(8.dp)
                    .background(Color.Cyan),
                contentAlignment = Alignment.Center
            ) {
                Text(text = item, fontSize = 24.sp)
            }
        }
    }
}

LazyColumnとLazyRowの組み合わせ

LazyColumnとLazyRowを組み合わせることで、より複雑なレイアウトを作成できます。

@Composable
fun NestedLazyList() {
    LazyColumn {
        items(5) { rowIndex ->
            Text(text = "セクション $rowIndex", fontSize = 20.sp, modifier = Modifier.padding(8.dp))
            LazyRow {
                items(10) { itemIndex ->
                    Box(
                        modifier = Modifier
                            .size(80.dp)
                            .padding(4.dp)
                            .background(Color.Gray),
                        contentAlignment = Alignment.Center
                    ) {
                        Text(text = "$itemIndex", color = Color.White)
                    }
                }
            }
        }
    }
}

このコードでは、LazyColumnの各アイテム内にLazyRowを配置し、セクションごとに異なるアイテムを表示する構成になっています。