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

Compose'da aynı işlemi yapmak için Geç listeleri de kullanabilirsiniz. Bu sayfada, Compose'da geç 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şinizde RecyclerView için yorum yapın veya RecyclerView öğesini kaldırın ve henüz hiyerarşide yoksa bunun yerine koymak üzere bir ComposeView ekleyin. Bu, ekleyeceğiniz Geç listenin 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 cihazınızın düzen yöneticisine göre ne tür bir geç liste composable'a ihtiyacınız olduğunu belirleyin (aşağıdaki tabloya bakın). Seçtiğiniz composable, önceki adımda eklediğiniz ComposeView ile üst düzey composable olacaktır.

    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şleşir ancak bu her zaman geçerli olmayabilir. Bu composable'lar, 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 öğenizin onCreateViewHolder() ve onBindViewHolder() yöntemlerindeki mantık, bu composable'lar ve onlara sağladığınız durum ile değiştirilecek. Compose'da bir öğe için composable oluşturmak ile verileri bu öğeye bağlamak arasında ayrım yoktur. Bu kavramlar birleştirilir.

  4. Geç listenin content alanında (sondaki lambda parametresi) listenizin verilerinde yineleme yapmak için items() işlevini (veya eşdeğer bir aşırı yük) kullanın. itemContent lambda'da 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 öğeler için özel bir çizim eklemek üzere kullanabileceğiniz ItemDecoration kavramına sahiptir. Örneğin, öğeler arasına ayırıcılar eklemek için ItemDecoration ekleyebilirsiniz:

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

Oluştur, öğe süslemeleri için eşdeğer bir kavrama sahip değil. Bunun yerine, listeye doğrudan bestenin içindeki kullanıcı arayüzü süslemelerini 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) {
            Divider()
        }
    }
}
MigrationCommonScenariosSnippets.kt

Öğe animasyonları

Bağdaştırıcıda değişiklik yapılırken öğelerin görünümünü canlandırmak için RecyclerView üzerinde bir ItemAnimator ayarlanabilir. Varsayılan olarak RecyclerView, kaldırma, ekleme ve taşıma etkinlikleriyle ilgili temel animasyonlar sağlayan DefaultItemAnimator hizmetini kullanır.

Tembel listeler, animateItemPlacement değiştiricisiyle benzer bir konsepte sahiptir. Daha fazla bilgi edinmek 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 bakın: