RecyclerView'u Lazy listesine taşıma

RecyclerView, büyük veri kümelerini verimli bir şekilde görüntülemeyi kolaylaştıran bir View bileşenidir. Veri kümesindeki her öğe için görünüm oluşturmak yerine, RecyclerViewküçük bir görünüm havuzu tutarak ve bu öğeler arasında gezinirken bunları geri dönüştürerek uygulamanızın performansını artırır.

Compose'da aynı şeyi yapmak için Lazy listeleri kullanabilirsiniz. Bu sayfada, Compose'da Lazy listeleri kullanmak için RecyclerView uygulamanızı 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. Kullanıcı arayüzü hiyerarşinizdeki RecyclerView öğesini açıklama satırı yapın veya kaldırın ve hiyerarşide henüz yoksa bunun yerine bir ComposeView 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'inizin 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	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 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 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'inizin 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 buna veri bağlama arasında bir ayrım yoktur. Bu kavramlar birleştirilmiştir.

4. Lazy list'in content alanında (sondaki lambda parametresi), listenizdeki verileri yinelemek için items() işlevini (veya eşdeğer bir aşırı yüklemeyi) 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: Temel veriler için benzersiz bir anahtar sağlamak üzere key parametresini kullanın. Böylece, öğeler değiştiğinde kaydırma konumu korunur. Temel veriler için bir içerik türü belirtmek üzere contentType parametresini kullanın (Bu, RecyclerView görünüm türlerine benzer bir kavramdır.). Böylece, öğe kompozisyonlarını daha verimli bir şekilde yeniden kullanabilirsiniz.

Yaygın kullanım alanları

Öğe süslemeleri

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

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

Compose'da öğe süslemeleriyle eşdeğer bir kavram yoktur. Bunun yerine, listedeki tüm kullanıcı arayüzü süslemelerini doğrudan oluşturmaya ekleyebilirsiniz. Örneğin, listeye ayırıcı eklemek için her öğeden sonra Divider composable'ını kullanabilirsiniz:

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

Öğe animasyonları

Adaptörde değişiklikler yapıldıkça öğelerin görünümüne animasyon eklemek için RecyclerView üzerinde bir ItemAnimator ayarlanabilir. RecyclerView varsayılan olarak 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ı bölümüne bakın.

Ek kaynaklar

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

• Listeler ve Izgaralar: Compose'da listelerin ve ızgaraların nasıl uygulanacağına dair dokümanlar.
• Jetpack Compose Birlikte Çalışabilirliği: RecyclerView'da Compose Kullanma: RecyclerView içinde Compose'u verimli bir şekilde kullanma hakkında blog yayını.