RecyclerView を Lazy リストに移行する

RecyclerView は、大規模なデータセットを効率的に表示することを容易にする View コンポーネントです。RecyclerView は、データセット内の各アイテムにビューを作成するのではなく、ビューの小さなプールを保持し、アイテムをスクロールしながらリサイクルすることで、アプリのパフォーマンスを向上させます。

Compose では、Lazy リストを使用して同じことができます。このページでは、Compose で Lazy リストを使用するように RecyclerView 実装を移行する方法について説明します。

移行手順

RecyclerView の実装を Compose に移行する手順は次のとおりです。

  1. UI 階層に RecyclerView をコメントアウトするか削除し、階層にまだ存在しない場合は ComposeView を追加して置き換えます。これは、追加する Lazy リストのコンテナです。

          <FrameLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent">

  <!--    <androidx.recyclerview.widget.RecyclerView-->
  <!--            android:id="@+id/recycler_view"-->
  <!--            android:layout_width="match_parent"-->
  <!--            android:layout_height="match_parent />"-->

          <androidx.compose.ui.platform.ComposeView
              android:id="@+id/compose_view"
              android:layout_width="match_parent"
              android:layout_height="match_parent" />

      </FrameLayout>

  2. RecyclerView のレイアウト マネージャーに基づいて、必要な Lazy リスト コンポーザブルのタイプを決定します（下記の表を参照）。選択したコンポーザブルは、前の手順で追加した ComposeView の最上位のコンポーザブルになります。

    LayoutManager

    コンポーザブル

    LinearLayoutManager

    LazyColumn または LazyRow

    GridLayoutManager

    LazyVerticalGrid または LazyHorizontalGrid

    StaggeredGridLayoutManager

    LazyVerticalStaggeredGrid または LazyHorizontalStaggeredGrid

    		 

    // recyclerView.layoutManager = LinearLayoutManager(context)
composeView.setContent {
    LazyColumn(Modifier.fillMaxSize()) {
        // We use a LazyColumn since the layout manager of the RecyclerView is a vertical LinearLayoutManager
    }
}
    MigrationCommonScenariosSnippets.kt

  3. RecyclerView.Adapter 実装のビュータイプごとに、対応するコンポーザブルを作成します。各ビュータイプは通常、ViewHolder サブクラスにマッピングされますが、必ずしもそうとは限りません。これらのコンポーザブルは、リスト内のさまざまな種類の要素の UI 表現として使用されます。

    @Composable
fun ListItem(data: MyData, modifier: Modifier = Modifier) {
    Row(modifier.fillMaxWidth()) {
        Text(text = data.name)
        // … other composables required for displaying `data`
    }
}
    MigrationCommonScenariosSnippets.kt

    RecyclerView.Adapter の onCreateViewHolder() メソッドと onBindViewHolder() メソッド内のロジックは、これらのコンポーザブルと、それらのコンポーザブルに指定した状態に置き換えられます。Compose では、アイテムのコンポーザブルの作成とそれへのデータのバインディングが分離されません。これらのコンセプトは融合されています。

  4. Lazy リストの content スロット（後置ラムダ パラメータ）内で、items() 関数（または同等のオーバーロード）を使用して、リストのデータを反復処理します。itemContent ラムダで、データに適したコンポーズ可能なアイテムを呼び出します。

    val data = listOf<MyData>(/* ... */)
composeView.setContent {
    LazyColumn(Modifier.fillMaxSize()) {
        items(data) {
            ListItem(it)
        }
    }
}
    MigrationCommonScenariosSnippets.kt

一般的なユースケース

アイテムの装飾

RecyclerView には ItemDecoration のコンセプトがあります。これを使用すると、リスト内のアイテムに特別な描画を追加できます。たとえば、ItemDecoration を追加してアイテム間を区切ります。

val itemDecoration = DividerItemDecoration(recyclerView.context, LinearLayoutManager.VERTICAL)
recyclerView.addItemDecoration(itemDecoration)
MigrationCommonScenariosSnippets.kt

Compose には、アイテム デコレーションに相当する概念はありません。代わりに、リストの UI 装飾をコンポジションに直接追加できます。たとえば、リストに分割線を追加するには、各アイテムの後に Divider コンポーザブルを使用します。

LazyColumn(Modifier.fillMaxSize()) {
    itemsIndexed(data) { index, d ->
        ListItem(d)
        if (index != data.size - 1) {
            Divider()
        }
    }
}
MigrationCommonScenariosSnippets.kt

アイテム アニメーション

RecyclerView に ItemAnimator を設定すると、アダプターに変更が加えられたときにアイテムの外観がアニメーション表示されます。デフォルトでは、RecyclerView は DefaultItemAnimator を使用します。これは、イベントの削除、追加、移動の際に基本的なアニメーションを提供します。

遅延リストは、animateItemPlacement 修飾子を通じて同様の概念を持ちます。詳しくは、アイテムのアニメーションをご覧ください。

参考情報

RecyclerView から Compose への移行について詳しくは、以下のリソースをご覧ください。