RecyclerView を Lazy リストに移行する

RecyclerView は、簡単に効率的に表示できるようにする View コンポーネント 学習します。データセットのアイテムごとにビューを作成するのではなく RecyclerView は、少数のプールを保持することでアプリのパフォーマンスを向上させます スクロールしてアイテムを探し出してリサイクルするのもよいでしょう。

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. 以下に基づいて、必要な Lazy リスト コンポーザブルのタイプを RecyclerView のレイアウト マネージャー（下記の表を参照）。選択したコンポーザブルは 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 では、2 つのエンティティが アイテムのコンポーザブルを作成し、それにデータをバインドします。これらのコンセプトは、 できます。

  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 コンポーザブルを使用します。 item:

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

アイテム アニメーション

RecyclerView に ItemAnimator を設定すると、 アダプターに変更が加えられたときに通知を受け取れます。デフォルトでは、RecyclerView は以下を使用します。 DefaultItemAnimator: 削除、追加、削除の際の基本的なアニメーションを提供します。 移動します。

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

参考情報

RecyclerView を Compose に移行する方法については、以下をご覧ください。 次のリソースをご覧ください。