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

Aynı işlemi Compose'da Lazy lists ile yapabilirsiniz. Bu sayfada, RecyclerView uygulamanızı Compose'da Lazy list'leri kullanacak şekilde nasıl taşıyabileceğiniz açıklanmaktadır.

Taşıma adımları

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

1. Kullanıcı arayüzü hiyerarşinizdeki RecyclerView öğesini yorum satırı haline getirin veya kaldırın ve hiyerarşide henüz yoksa yerine ComposeView öğesini ekleyin. Ekleyeceğiniz tembel liste kapsayıcısı:

         <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ızın düzen yöneticisine göre hangi tür 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 üst düzey composable'ı olur.

   LayoutManager	Composable
   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. Uygulamanızdaki her görünüm türü için karşılık gelen bir composable oluşturun. RecyclerView.Adapter Her görünüm türü genellikle bir ViewHolder alt sınıfıyla eşlenir ancak bu durum her zaman geçerli olmayabilir. Bu composable'lar, listenizdeki farklı öğe türlerinin 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ın onCreateViewHolder() ve onBindViewHolder() yöntemlerindeki mantık, bu composable'lar ve onlara sağladığınız durumla değiştirilir. Compose'da bir öğe için composable oluşturma ve verileri buna bağlama arasında bir ayrım yoktur. Bu kavramlar birleştirilmiştir.

4. Lazy listesinin content yuvasında (sondaki lambda parametresi), listenizin verileri arasında yineleme yapmak için items() işlevini (veya eşdeğer bir aşırı yükleme) kullanın. itemContent lambda'sında verileriniz için uygun composable öğeyi çağırın:

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

İpucu: Listenizi optimize etmek için items() öğesine ek parametreler sağlayın: Öğeler değiştiğinde kaydırma konumunun korunması için temel verilerle ilgili benzersiz bir anahtar sağlamak üzere key parametresini kullanın veya öğe kompozisyonlarını daha verimli bir şekilde yeniden kullanabilmek için temel verilerle ilgili bir içerik türü belirtmek üzere contentType parametresini kullanın (bu, RecyclerView öğesinin görünüm türlerine benzer bir kavramdır).

Yaygın kullanım alanları

Öğe süslemeleri

RecyclerView, listedeki öğeler için özel bir çizim eklemek üzere kullanabileceğiniz ItemDecoration kavramına sahiptir. Örneğin, öğeler arasına ayırıcı eklemek için ItemDecoration simgesini kullanabilirsiniz:

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

Compose'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 öğeden sonra Divider composable'ı kullanabilirsiniz:

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

Öğe animasyonları

Öğelerin görünümünü, bağdaştırıcıda değişiklikler yapıldıkça canlandırmak için RecyclerView üzerinde ItemAnimator ayarlanabilir. Varsayılan olarak RecyclerView, kaldırma, ekleme ve taşıma etkinliklerinde temel animasyonlar sağlayan DefaultItemAnimator kullanır.

Lazy listeler, animateItemPlacement değiştiricisi aracılığıyla benzer bir konsepte sahiptir. Daha fazla bilgi için Öğe animasyonları başlıklı makaleyi inceleyin.

Ek kaynaklar

RecyclerView uygulamasını Compose'a taşıma hakkında daha fazla bilgi için aşağıdaki kaynaklara bakın:

• Listeler ve Izgaralar: Listelerin ve ızgaraların Compose'da nasıl uygulanacağına dair dokümanlar.
• Jetpack Compose Interop: Using Compose in a RecyclerView: Compose'u RecyclerView içinde verimli bir şekilde kullanmayla ilgili blog yayını.