RecyclerView
adalah komponen View yang memudahkan Anda menampilkan
kumpulan data besar secara efisien. Daripada membuat tampilan untuk setiap item dalam set data,
RecyclerView
akan meningkatkan performa aplikasi dengan menyimpan kumpulan kecil
tampilan dan mendaur ulangnya saat Anda men-scroll item tersebut.
Di Compose, Anda dapat menggunakan daftar Lambat untuk melakukan hal yang sama. Halaman ini
menjelaskan cara memigrasikan implementasi RecyclerView
untuk menggunakan daftar Lambat
di Compose.
Langkah migrasi
Untuk memigrasikan implementasi RecyclerView
ke Compose, ikuti langkah-langkah berikut:
Jadikan
RecyclerView
sebagai komentar atau hapus dari hierarki UI dan tambahkanComposeView
untuk menggantinya jika belum ada dalam hierarki. Ini adalah penampung untuk daftar Lambat yang akan Anda tambahkan:<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>
Tentukan jenis composable daftar Lambat yang Anda butuhkan berdasarkan pengelola tata letak
RecyclerView
(lihat tabel di bawah). Composable yang Anda pilih akan menjadi composable level atas dariComposeView
yang Anda tambahkan di langkah sebelumnya.LayoutManager
Composable
LinearLayoutManager
LazyColumn
atauLazyRow
GridLayoutManager
LazyVerticalGrid
atauLazyHorizontalGrid
StaggeredGridLayoutManager
LazyVerticalStaggeredGrid
atauLazyHorizontalStaggeredGrid
// recyclerView.layoutManager = LinearLayoutManager(context) composeView.setContent { LazyColumn(Modifier.fillMaxSize()) { // We use a LazyColumn since the layout manager of the RecyclerView is a vertical LinearLayoutManager } }
Buat composable yang sesuai untuk setiap jenis tampilan dalam implementasi
RecyclerView.Adapter
Anda. Setiap jenis tampilan biasanya dipetakan ke subclassViewHolder
, meskipun hal ini mungkin tidak selalu terjadi. Composable ini akan digunakan sebagai representasi UI untuk berbagai jenis elemen dalam daftar Anda:@Composable fun ListItem(data: MyData, modifier: Modifier = Modifier) { Row(modifier.fillMaxWidth()) { Text(text = data.name) // … other composables required for displaying `data` } }
Logika dalam metode
onCreateViewHolder()
danonBindViewHolder()
RecyclerView.Adapter
akan diganti dengan composable ini dan status yang Anda berikan. Di Compose, tidak ada pemisahan antara membuat composable untuk item dan mengikat data ke dalamnya—konsep ini disatukan.Dalam slot
content
daftar Lambat (parameter lambda akhir), gunakan fungsiitems()
(atau overload yang setara) untuk melakukan iterasi melalui data untuk daftar Anda. Di lambdaitemContent
, panggil item composable yang sesuai untuk data Anda:val data = listOf<MyData>(/* ... */) composeView.setContent { LazyColumn(Modifier.fillMaxSize()) { items(data) { ListItem(it) } } }
Kasus penggunaan umum
Dekorasi item
RecyclerView
memiliki konsep ItemDecoration
yang dapat Anda gunakan untuk menambahkan
gambar khusus untuk item dalam daftar. Misalnya, Anda dapat menambahkan
ItemDecoration
untuk menambahkan pemisah di antara item:
val itemDecoration = DividerItemDecoration(recyclerView.context, LinearLayoutManager.VERTICAL) recyclerView.addItemDecoration(itemDecoration)
Compose tidak memiliki konsep yang setara tentang dekorasi item. Sebagai gantinya, Anda
dapat menambahkan dekorasi UI apa pun dalam daftar secara langsung dalam komposisi. Misalnya,
untuk menambahkan pemisah ke daftar, Anda dapat menggunakan composable Divider
setelah setiap
item:
LazyColumn(Modifier.fillMaxSize()) { itemsIndexed(data) { index, d -> ListItem(d) if (index != data.size - 1) { Divider() } } }
Animasi item
ItemAnimator
dapat ditetapkan pada RecyclerView
untuk menganimasikan tampilan
item saat perubahan dilakukan pada adaptor. Secara default, RecyclerView
menggunakan
DefaultItemAnimator
yang menyediakan animasi dasar tentang penghapusan, penambahan, dan
pemindahan peristiwa.
Daftar lambat memiliki konsep serupa melalui pengubah animateItemPlacement
.
Lihat Animasi item untuk mempelajari lebih lanjut.
Referensi lainnya
Untuk informasi selengkapnya tentang memigrasikan RecyclerView
ke Compose, lihat
referensi berikut:
- Daftar dan Petak: Dokumentasi tentang cara menerapkan daftar dan petak di Compose.
- Interop Jetpack Compose: Menggunakan Compose di RecyclerView:
Postingan blog untuk menggunakan Compose secara efisien dalam
RecyclerView
.
Direkomendasikan untuk Anda
- Catatan: teks link ditampilkan saat JavaScript nonaktif
- Daftar dan petak
- Memigrasikan
CoordinatorLayout
ke Compose - Pertimbangan lainnya