RecyclerView
は、大規模なデータセットを効率的に表示するための View コンポーネントです。RecyclerView
を使用すると、データセット内のアイテムごとにビューを作成する代わりに、小さなビュープールを保持し、アイテムをスクロールする際にそれらのビューをリサイクルすることで、アプリのパフォーマンスを向上させます。
Compose では、Lazy リストを使用して同じことを実現できます。このページでは、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>
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 } }
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` } }
RecyclerView.Adapter
のonCreateViewHolder()
メソッドとonBindViewHolder()
メソッドのロジックは、これらのコンポーザブルと、コンポーザブルに指定した状態に置き換えられます。Compose では、アイテムのコンポーザブルの作成とそれへのデータのバインドは分離されません。これらのコンセプトは統合されています。Lazy リストの
content
スロット(後置ラムダ パラメータ)内で、items()
関数(または同等のオーバーロード)を使用してリストのデータを反復処理します。itemContent
ラムダで、データに適したコンポーザブル アイテムを呼び出します。val data = listOf<MyData>(/* ... */) composeView.setContent { LazyColumn(Modifier.fillMaxSize()) { items(data) { ListItem(it) } } }
一般的なユースケース
アイテムの装飾
RecyclerView
には ItemDecoration
という概念があり、これを使用するとリスト内のアイテムに特別な描画を追加できます。たとえば、ItemDecoration
を追加してアイテム間に分割線を追加できます。
val itemDecoration = DividerItemDecoration(recyclerView.context, LinearLayoutManager.VERTICAL) recyclerView.addItemDecoration(itemDecoration)
Compose には、アイテム デコレーションに相当するコンセプトはありません。代わりに、リスト内の UI 装飾をコンポジションに直接追加できます。たとえば、リストに分割線を追加するには、各アイテムの後に Divider
コンポーザブルを使用します。
LazyColumn(Modifier.fillMaxSize()) { itemsIndexed(data) { index, d -> ListItem(d) if (index != data.size - 1) { Divider() } } }
アイテム アニメーション
ItemAnimator
を RecyclerView
に設定すると、アダプターに変更が加えられたときにアイテムの外観をアニメーション化できます。デフォルトでは、RecyclerView
は DefaultItemAnimator
を使用します。これは、削除、追加、移動のイベントに関する基本的なアニメーションを提供します。
Lazy リストには、animateItemPlacement
修飾子を使った同様の概念があります。詳しくは、アイテム アニメーションをご覧ください。
参考情報
RecyclerView
を Compose に移行する方法について詳しくは、次のリソースをご覧ください。
- リストとグリッド: Compose でリストとグリッドを実装する方法に関するドキュメント。
- Jetpack Compose の相互運用: RecyclerView で Compose を使用する:
RecyclerView
内で Compose を効率的に使用するためのブログ投稿。
あなたへのおすすめ
- 注: JavaScript がオフになっている場合はリンクテキストが表示されます
- リストとグリッド
CoordinatorLayout
を Compose に移行する- その他の考慮事項