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üntüleme oluşturmak yerine RecyclerView, küçük bir görüntüleme havuzu tutarak ve bu öğeler arasında gezinirken bu havuzdaki görüntülemeleri yeniden kullanarak 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ş 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ı uygulayın:

  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 derlenebilir, önceki adımda eklediğiniz ComposeView öğesinin üst düzey derlenebilir öğesi olur.

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

  3. RecyclerView.Adapter uygulamanızdaki her görüntüleme türü için karşılık gelen bir derlenebilir öğe 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ü temsili 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`
    }
}
    MigrationCommonScenariosSnippets.kt

    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 işlevinde, verileriniz için uygun birleştirilebilir öğeyi çağırın:

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

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

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

Öğ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ı başlıklı makaleyi inceleyin.

Ek kaynaklar

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