リストとページングを使用してデータを遅延読み込みする

遅延読み込みとページングを使用すると、データを段階的に読み込んで表示することで、アプリでアイテムの大量のリスト(無限リストを含む)をサポートできます。この手法により、初期読み込み時間を短縮し、メモリ使用量を最適化してパフォーマンスを向上させることができます。

バージョンの互換性

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

依存関係

ページングされたコンテンツを表示する

ページング ライブラリを使用すると、ローカル ストレージまたはネットワーク経由で取得した大規模なデータセットからデータのページを読み込んで表示できます。次のコードを使用して、ページネーションされたリストを表示し、進行状況バーを表示して、さらにデータが取得されていることをユーザーに示します。

@Composable
fun MessageList(
    modifier: Modifier,
    pager: Pager<Int, Message>
) {
    val lazyPagingItems = pager.flow.collectAsLazyPagingItems()

    LazyColumn {
        items(
            lazyPagingItems.itemCount,
            key = lazyPagingItems.itemKey { it.id }
        ) { index ->
            val message = lazyPagingItems[index]
            if (message != null) {
                MessageRow(message)
            } else {
                MessagePlaceholder()
            }
        }
    }
    @Composable
    fun MessagePlaceholder(modifier: Modifier) {
        Box(
            Modifier
                .fillMaxWidth()
                .height(48.dp)
        ) {
            CircularProgressIndicator()
        }
    }

    @Composable
    fun MessageRow(
        modifier: Modifier,
        message: Message
    ) {
        Card(modifier = Modifier.padding(8.dp)) {
            Column(
                modifier = Modifier.padding(8.dp),
                verticalArrangement = Arrangement.Center
            ) {
                Text(message.sender)
                Text(message.text)
            }
        }
    }
}

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

  • LazyColumn: このコンポーザブルは、アイテム(メッセージ)の大きなリストを効率的に表示するために使用されます。画面に表示されているアイテムのみをレンダリングするため、リソースとメモリを節約できます。
  • lazyPagingItems オブジェクトは、LazyColumn 内のページング データの読み込みと表示を効率的に管理します。LazyPagingItemsLazyColumn コンポーザブルの items に渡します。
  • MessageRow(message: Text) は個々のメッセージ アイテムのレンダリングを担当します。カード内に送信者とメッセージのテキストを表示します。
  • MessagePlaceholder() は、実際のメッセージ データが取得されている間、視覚的なプレースホルダ(読み込みスピナー)を表示して、ユーザー エクスペリエンスを向上させます。

結果

次の動画は、ユーザーがスクロールするときに大きなリストがデータを取得する結果の動作を示しています。

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

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

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

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

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