RecyclerView'u Lazy listesine taşıma

RecyclerView, büyük veri gruplarını 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, siz bu öğeler arasında gezinirken küçük bir görüntüleme havuzu tutarak ve geri dönüşüm sağlayarak uygulamanızın performansını iyileştirir.

Oluşturma'da aynı işlemi gerçekleştirmek için Geç listeleri'ni kullanabilirsiniz. Bu sayfada, Compose'da Geç listeleri kullanmak üzere RecyclerView uygulamanızı 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ı izleyin:

  1. RecyclerView öğesini kullanıcı arayüzü hiyerarşinize yorum ekleyin veya kaldırın. Hiyerarşide henüz herhangi bir değer yoksa değiştirmek için ComposeView ekleyin. Bu, ekleyeceğiniz Tembel 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 öğesinin en üst düzey composable'ı olacak.

    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ü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ığı, bu composable'larla ve bunları sağladığınız durumla değiştirir. Compose'da bir öğe için composable oluşturma ile verileri bu öğeye bağlama arasında ayrım yoktur. Bu kavramlar bir araya getirilmiştir.

  4. Tembel listesinin content alanında (sonraki lambda parametresi) listenizin verilerini yinelemek için items() işlevini (veya eşdeğer bir aşırı yükleme) kullanın. itemContent lambda öğesinde, verileriniz için uygun composable öğesini ç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şturma işleminde eşdeğer bir öğe süsleme kavramı yok. Bunun yerine, listedeki kullanıcı arayüzü süslerini doğrudan besteye ekleyebilirsiniz. Örneğin, listeye ayırıcılar 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ı

Adaptörde değişiklik yapılırken öğelerin görünümüne animasyon eklemek için RecyclerView üzerinde ItemAnimator ayarlanabilir. Varsayılan olarak RecyclerView, kaldırma, ekleme ve taşıma etkinlikleri için temel animasyonlar sağlayan DefaultItemAnimator kullanır.

Tembel listeler, animateItemPlacement değiştirici ile benzer bir kavrama 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 edinmek için aşağıdaki kaynaklara göz atın: