Memigrasikan RecyclerView ke daftar Lambat

RecyclerView adalah komponen View yang memudahkan tampilan secara efisien yang besar. Alih-alih membuat tampilan untuk setiap item dalam {i>dataset<i}, RecyclerView meningkatkan performa aplikasi Anda dengan mempertahankan sejumlah kecil dilihat dan didaur ulang melalui item-item tersebut saat Anda men-scroll item-item tersebut.

Di Compose, Anda dapat menggunakan Daftar lambat untuk melakukan hal yang sama. Halaman ini menjelaskan cara memigrasikan penerapan RecyclerView untuk menggunakan daftar Lambat di Compose.

Langkah migrasi

Untuk memigrasikan implementasi RecyclerView ke Compose, ikuti langkah-langkah berikut:

  1. Jadikan sebagai komentar atau hapus RecyclerView dari hierarki UI Anda dan tambahkan ComposeView untuk menggantinya 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>

  2. Tentukan jenis composable daftar Lambat yang diperlukan berdasarkan Pengelola tata letak RecyclerView (lihat tabel di bawah). Composable yang Anda pilih akan menjadi composable tingkat atas dari ComposeView yang Anda tambahkan di langkah sebelumnya.

    LayoutManager

    Composable

    LinearLayoutManager

    LazyColumn atau LazyRow

    GridLayoutManager

    LazyVerticalGrid atau LazyHorizontalGrid

    StaggeredGridLayoutManager

    LazyVerticalStaggeredGrid atau 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. Buat composable yang sesuai untuk setiap jenis tampilan di Implementasi RecyclerView.Adapter. Setiap jenis tampilan biasanya dipetakan ke subclass ViewHolder, meskipun mungkin tidak selalu demikian. Ini composable 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`
    }
}
    MigrationCommonScenariosSnippets.kt

    Logika di onCreateViewHolder() dan RecyclerView.Adapter Anda Metode onBindViewHolder() 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 adalah bersatu.

  4. Dalam slot content dari daftar Lambat (parameter lambda di akhir), gunakan fungsi items() (atau overload yang setara) untuk melakukan iterasi melalui data untuk daftar Anda. Di lambda itemContent, panggil fungsi yang sesuai item composable untuk data Anda:

    val data = listOf<MyData>(/* ... */)
composeView.setContent {
    LazyColumn(Modifier.fillMaxSize()) {
        items(data) {
            ListItem(it)
        }
    }
}
    MigrationCommonScenariosSnippets.kt

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)
MigrationCommonScenariosSnippets.kt

Compose tidak memiliki konsep dekorasi item yang setara. Sebaliknya, Anda dapat dapat menambahkan dekorasi UI apa pun dalam daftar secara langsung dalam komposisi. Misalnya, untuk menambahkan pemisah ke daftar, Anda dapat menggunakan composable Divider setelah masing-masing item:

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

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 menghapus, menambah, dan peristiwa pemindahan.

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 dokumentasi referensi berikut: