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

    Bileşenlere ayrılabilir

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

Yaygın kullanım alanları

Öğe süslemeleri

RecyclerView, listedeki öğelere özel çizim eklemek için 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 tüm 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 öğesini Compose'a taşıma hakkında daha fazla bilgi için aşağıdaki kaynaklara bakın: