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. RecyclerView, veri kümesindeki her öğe için görünüm oluşturmak yerine küçük bir görünüm havuzu tutarak ve bu öğeler arasında gezinirken bu görünümleri geri dönüştürerek uygulamanızın performansını artırır.

Oluşturma bölümünde, aynı işlemi yapmak için tembel listeleri kullanabilirsiniz. Bu sayfada, RecyclerView uygulamanızı Compose'da yavaş listeler 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şinizden yoruma alın veya kaldırın ve hiyerarşide henüz yoksa bunun yerine bir ComposeView öğesi ekleyin. 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. RecyclerView'ün düzen yöneticisine göre hangi tür bir Lazy list composable'a ihtiyacınız olduğunu belirleyin (aşağıdaki tabloya bakın). Seçtiğiniz composable, önceki adımda eklediğiniz ComposeView öğesinin en üst düzey composable'ı olacak.

    LayoutManager

    Kompozit

    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
        }
    }

  3. RecyclerView.Adapter uygulamanızdaki her görünüm türü için karşılık gelen bir composable oluşturun. 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 bileşenler, listenizdeki farklı öğe türleri için kullanıcı arayüzü gösterimi olarak kullanılır:

    @Composable
    fun ListItem(data: MyData, modifier: Modifier = Modifier) {
        Row(modifier.fillMaxWidth()) {
            Text(text = data.name)
            // … other composables required for displaying `data`
        }
    }

    RecyclerView.Adapter'ün onCreateViewHolder() ve onBindViewHolder() yöntemlerindeki mantık, bu derlenebilir öğelerle ve onlara sağladığınız durumla değiştirilir. Oluşturma işleminde, bir öğe için bir bileşen oluşturma ve verileri bu öğeye bağlama işlemleri birbirinden ayrı değildir. Bu kavramlar birleştirilmiştir.

  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 öğesinde, verileriniz için uygun composable öğesini çağırın:

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

Yaygın kullanım alanları

Öğe süslemeleri

RecyclerView öğesinde, listedeki öğeler için özel bir çizim eklemek üzere kullanabileceğiniz bir ItemDecoration kavramı vardır. Örneğin, öğeler arasına bölücü eklemek için ItemDecoration ekleyebilirsiniz:

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

Oluşturma'da öğe süslemelerine eşdeğer bir kavram yoktur. Bunun yerine, listedeki kullanıcı arayüzü süslemelerini doğrudan kompozisyona ekleyebilirsiniz. Örneğin, listeye ayırıcı eklemek için her öğenin ardından Divider bileşenini kullanabilirsiniz:

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

Öğe animasyonları

Adaptörde değişiklik yapıldığında öğelerin görünümünü animasyonlu hale getirmek için bir RecyclerView üzerinde ItemAnimator ayarlanabilir. 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 için Öğe animasyonlarını inceleyin.

Ek kaynaklar

RecyclerView öğesini Compose'a taşıma hakkında daha fazla bilgi edinmek için aşağıdaki kaynaklara göz atın: