RecyclerView'u Lazy listesine taşıma

RecyclerView, büyük veri kümelerini verimli bir şekilde görüntülemeyi kolaylaştıran bir Görüntüleme bileşenidir. Veri kümesindeki her öğe için görünüm oluşturmak yerine, RecyclerView, bu öğelere göz atıp geri dönüşüme gönderebilirsiniz.

Oluşturma'da aynı işlemi gerçekleştirmek için Geç listeleri'ni kullanabilirsiniz. Bu sayfada, RecyclerView uygulamanızı Compose'da yavaş listeleri kullanmak üzere nasıl taşıyacağınız açıklanmaktadır.

Taşıma adımları

RecyclerView uygulamanızı Compose'a taşımak için aşağıdaki adımları izleyin:

  1. RecyclerView öğesini kullanıcı arayüzü hiyerarşinize yorumlayın veya kaldırın ve bir Hiyerarşide henüz herhangi bir değer yoksa bunu değiştirmek için ComposeView. Bu, ekleyeceğiniz Lazy listesinin kapsayıcısıdır:

          <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. Anahtar kelimelere göre ihtiyacınız olan tembel liste composable'ın türünü RecyclerView öğesinin düzen yöneticisi (aşağıdaki tabloya bakın). Seçtiğiniz composable öğesini, ComposeView önceki adım.

    LayoutManager

    Oluşturulabilir

    LinearLayoutManager

    LazyColumn veya LazyRow

    GridLayoutManager

    LazyVerticalGrid veya LazyHorizontalGrid

    StaggeredGridLayoutManager

    LazyVerticalStaggeredGrid veya 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. RecyclerView.Adapter uygulaması. Her görünüm türü genellikle bir ViewHolder alt sınıfıyla eşlenir ancak bu her zaman geçerli olmayabilir. Bu composable'lar, farklı içerik türlerinin kullanıcı arayüzü temsili olarak öğe seçin:

    @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 cihazınızın onCreateViewHolder() ve onBindViewHolder() yöntemleri bu composable'larla değiştirilecek ve sağlayacağınız konusunda da bilgi edinin. Oluşturma sayfasında, bir öğe için composable oluşturup verileri buna bağlama. Bu kavramlar, birleşti.

  4. Tembel listenin content yuvasında (son lambda parametresi), listenizin verilerini iterlemek için items() işlevini (veya eşdeğer bir aşırı yüklemeyi) kullanın. itemContent lambda dosyasında uygun verileriniz için derlenebilir öğe:

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

Yaygın kullanım alanları

Öğe süslemeleri

RecyclerView, bir ItemDecoration kavramına sahiptir ve bir özel çizimi seçin. Örneğin, öğeler arasına bölücü eklemek için ItemDecoration ekleyebilirsiniz:

val itemDecoration = DividerItemDecoration(recyclerView.context, LinearLayoutManager.VERTICAL)
recyclerView.addItemDecoration(itemDecoration)
MigrationCommonScenariosSnippets.kt

Oluşturma işleminde eşdeğer bir öğe süsleme kavramı yok. Bunun yerine listesindeki herhangi bir kullanıcı arayüzü süslemesini doğrudan besteye ekleyebilir. Örneğin, listeye ayırıcılar eklemek için, her bir ayırıcıdan sonra Divider composable'ı kullanabilirsiniz. öğe:

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

Öğe animasyonları

Görünümün animasyonunu yapmak için RecyclerView üzerinde bir ItemAnimator ayarlanabilir bağdaştırıcıda değişiklik yapıldıkça öğelere eklenir. Varsayılan olarak RecyclerView, kaldırma, ekleme ve taşıma etkinliklerinde temel animasyonlar sağlayan DefaultItemAnimator'yi kullanır.

Tembel listeler, animateItemPlacement değiştiricisi aracılığıyla benzer bir kavrama sahiptir. Daha fazla bilgi edinmek için Öğe animasyonları bölümüne bakın.

Ek kaynaklar

RecyclerView öğesini Compose'a taşıma hakkında daha fazla bilgi için şu kaynakları inceleyin: