RecyclerView'u Lazy listesine taşıma

RecyclerView, etkili bir şekilde görüntülemeyi kolaylaştıran bir Görünüm bileşenidir büyük veri kümeleridir. Veri kümesindeki her öğe için görünüm oluşturmak yerine, RecyclerView, bu öğelere göz atıp geri dönüşüme gönderebilirsiniz.

Oluşturma'da aynı işlemi gerçekleştirmek için Geç listeleri'ni kullanabilirsiniz. Bu sayfa Geç listeleri kullanmak için RecyclerView uygulamanızı nasıl taşıyabileceğinizi açıklar oluşturabilirsiniz.

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 yorumlayın veya kaldırın ve bir Hiyerarşide henüz herhangi bir değer yoksa bunu değiştirmek için ComposeView. 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. Anahtar kelimelere göre ihtiyacınız olan tembel liste composable'ın türünü RecyclerView öğesinin düzen yöneticisi (aşağıdaki tabloya bakın). Seçtiğiniz composable öğesini, ComposeView önceki adım.

    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 uygulaması. Her görünüm türü, genelde ViewHolder alt sınıfı vardır ancak bu her zaman geçerli olmayabilir. Bu composable'lar, farklı içerik türlerinin kullanıcı arayüzü temsili olarak öğe seçin:

    @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 cihazınızın onCreateViewHolder() ve onBindViewHolder() yöntemleri bu composable'larla değiştirilecek ve her bir görev için önemlidir. Oluşturma sayfasında, bir öğe için composable oluşturup verileri buna bağlama. Bu kavramlar, birleşti.

  4. Tembel listenin (sondaki lambda parametresi) content alanında işlemi yinelemek için items() işlevini (veya eşdeğer bir aşırı yük) verileriniz. itemContent lambda dosyasında uygun verileriniz için derlenebilir öğe:

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

ziyaret edin.

Yaygın kullanım alanları

Öğe süslemeleri

RecyclerView, bir ItemDecoration kavramına sahiptir ve bir özel çizimi seçin. Örneğin, Arkadaş Bitkiler uygulamasına bir Öğeler arasında ayırıcılar eklemek için ItemDecoration:

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 listesindeki herhangi bir kullanıcı arayüzü süslemesini doğrudan besteye ekleyebilir. Örneğin, listeye ayırıcılar eklemek için, her bir ayırıcıdan sonra Divider composable'ı kullanabilirsiniz. öğe:

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

Öğe animasyonları

Görünümün animasyonunu yapmak için RecyclerView üzerinde bir ItemAnimator ayarlanabilir bağdaştırıcıda değişiklik yapıldıkça öğelere eklenir. Varsayılan olarak, RecyclerView Kaldırma, ekleme ve silme işlemleri için temel animasyonlar sağlayan DefaultItemAnimator taşıma etkinlikleri.

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 için şu kaynakları inceleyin:

ziyaret edin. ziyaret edin.