Android Academy · レッスン

LazyColumnによるリスト

スクロール可能なリストを効率よく表示します

レッスン 4/413 ステップ

「LazyColumnによるリスト」はCoddyKit上の無料Android Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAndroid Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Android Academyコースには全4レッスンが含まれています。

Column だけではいけない理由

Column は子要素をすべて一度にコンポーズします。長いリストやスクロールするリストでは、メモリを無駄に使い、UI の動作も遅くなります。表示中の項目だけを構築するリストが必要です。

LazyColumn の登場

LazyColumn はスクロール可能な縦方向のリストで、現在画面上に表示されている項目だけをコンポーズします。以前の RecyclerView に似ていますが、はるかにシンプルです。

LazyColumn {
    items(messages) { msg ->
        Text(text = msg)
    }
}

items() 関数

LazyColumn の lambda 内で items(list) を呼び出し、各要素用の Composable を渡します。Compose はユーザーのスクロールに応じて、必要なときに呼び出します。

LazyColumn {
    items(users) { user ->
        Text(text = user.name)
    }
}

通常のループではありません

LazyColumn の中で通常の for ループを使わないでください。それでは遅延処理の利点が失われます。Compose が必要に応じて項目を構築できるよう、必ず items()(または itemsIndexed())を使います。

単一のヘッダー項目

item { }(単数形)を使うと、ループする項目の前にヘッダーなどの固定要素を 1 つ追加できます。

LazyColumn {
    item { Text("Header") }
    items(data) { Text(it) }
}

itemsIndexed

位置が必要な場合は itemsIndexed を使うと、インデックスと要素の両方を取得できます。

LazyColumn {
    itemsIndexed(data) { index, value ->
        Text(text = "$index: $value")
    }
}

安定性のためのキー

各項目に安定した key を指定すると、リストが変更されたときも Compose が項目を正しく追跡できます。パフォーマンスとアニメーションの改善にもつながります。

items(users, key = { it.id }) { user ->
    Text(user.name)
}

項目間の間隔

LazyColumn では verticalArrangement と contentPadding を使って、項目間の間隔やリストの端のパディングを設定できます。

LazyColumn(
    verticalArrangement = Arrangement.spacedBy(8.dp),
    contentPadding = PaddingValues(16.dp)
) {
    items(data) { Text(it) }
}

LazyRow

横方向にスクロールするリストには LazyRow もあります。API は同じで、方向だけが異なります。カードのカルーセルに便利です。

LazyRow {
    items(images) { img ->
        Image(painter = img, contentDescription = null)
    }
}

スクロール機能を内蔵

LazyColumn にスクロール用 Modifier を追加する必要はありません。自動的にスクロールできます。verticalScroll を追加すると競合してクラッシュします。Lazy リストは自身でスクロールを処理します。

まとめ

ヘッダー、キー、間隔を設定した項目のリストです。

@Composable
fun MessageList(messages: List<Message>) {
    LazyColumn(
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        item { Text("Inbox") }
        items(messages, key = { it.id }) { msg ->
            Text(text = msg.text)
        }
    }
}

クイックチェック

スクロール可能な Column と比べた LazyColumn の主な利点は何ですか?

まとめ

LazyColumn:

  • 表示中の項目だけを構築するため、長いリストでも効率的です。
  • for ループではなく、items() / itemsIndexed() を使います。
  • 安定性のために key を追加し、ヘッダーには item { } を使います。
  • 自動的にスクロールするため、スクロール用 Modifier は不要です。LazyRow は横方向のバージョンです。
無料で開始

AI チューターと学ぶ Kotlin — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース
36
レッスン
152

よくある質問

「LazyColumnによるリスト」レッスンは無料ですか?

はい。「LazyColumnによるリスト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Android Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Android Academyコースには全4レッスンが含まれています。

「LazyColumnによるリスト」で何を学びますか?

スクロール可能なリストを効率よく表示します ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Android Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのAndroid Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「LazyColumnによるリスト」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAndroid Academyレッスンでコードを書いて実行できますか?

はい。すべてのAndroid Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Column、Row、Box
  2. Modifierシステム
  3. 配置と整列
  4. LazyColumnによるリスト
← Android Academyに戻る