このページは Cloud Translation API によって翻訳されました。

RecyclerView を Lazy リストに移行する

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

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

移行手順

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

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>

以下に基づいて、必要な 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

ビュータイプごとに、対応するコンポーザブルを 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 つのエンティティがアイテムのコンポーザブルを作成し、それにデータをバインドします。これらのコンセプトは、できます。
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 に移行する方法については、以下をご覧ください。次のリソースをご覧ください。

リストとグリッド: 作成。
Jetpack Compose の相互運用: RecyclerView で Compose を使用する: RecyclerView 内で Compose を効率的に使用するためのブログ投稿。

あなたへのおすすめ

注: JavaScript がオフになっている場合はリンクテキストが表示されます
リストとグリッド
CoordinatorLayout を Compose に移行する
その他の考慮事項