RecyclerView
adalah komponen View yang memudahkan untuk menampilkan
kumpulan data dalam jumlah besar secara efisien. Daripada membuat tampilan untuk setiap item dalam set data,
RecyclerView
akan meningkatkan performa aplikasi Anda dengan mempertahankan sekumpulan kecil
tampilan dan mendaur ulang tampilan 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 sebagai komentar atau hapus
RecyclerView
dari hierarki UI dan tambahkanComposeView
untuk menggantikannya jika belum ada di 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 diperlukan berdasarkan pengelola tata letak
RecyclerView
(lihat tabel di bawah). Composable yang Anda pilih akan menjadi composable level teratas dariComposeView
yang Anda tambahkan pada 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 mungkin tidak selalu demikian. 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 oleh composable ini dan status yang Anda berikan. Di Compose, tidak ada pemisahan antara membuat composable untuk item dan mengikat data ke dalamnya—konsep ini digabungkan.Dalam slot
content
dari 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 antar-item:
val itemDecoration = DividerItemDecoration(recyclerView.context, LinearLayoutManager.VERTICAL) recyclerView.addItemDecoration(itemDecoration)
Compose tidak memiliki konsep dekorasi item yang setara. 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 disetel pada RecyclerView
untuk menganimasikan tampilan
item saat perubahan dilakukan pada adaptor. Secara default, RecyclerView
menggunakan
DefaultItemAnimator
yang menyediakan animasi dasar tentang peristiwa menghapus, menambahkan, dan
memindahkan.
Daftar lambat memiliki konsep serupa melalui pengubah animateItemPlacement
.
Lihat Animasi item untuk mempelajari lebih lanjut.
Referensi tambahan
Untuk informasi selengkapnya tentang memigrasikan RecyclerView
ke Compose, lihat
referensi berikut:
- Daftar dan Petak: Dokumentasi tentang cara mengimplementasikan 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