RecyclerView
, büyük veri kümelerini verimli bir şekilde görüntülemeyi kolaylaştıran bir Görüntüleme bileşenidir. RecyclerView
, veri kümesindeki her öğe için görünüm oluşturmak yerine küçük bir görünüm havuzu tutarak ve bu öğeler arasında gezinirken bu görünümleri geri dönüştürerek uygulamanızın performansını artırır.
Oluşturma bölümünde, aynı işlemi yapmak için tembel listeleri kullanabilirsiniz. Bu sayfada, RecyclerView
uygulamanızı Compose'da yavaş listeler kullanmak üzere 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ı izleyin:
RecyclerView
öğesini kullanıcı arayüzü hiyerarşinizden yoruma alın veya kaldırın ve hiyerarşide henüz yoksa bunun yerine birComposeView
öğesi 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>
RecyclerView
'ün düzen yöneticisine göre hangi tür bir Lazy list composable'a ihtiyacınız olduğunu belirleyin (aşağıdaki tabloya bakın). Seçtiğiniz composable, önceki adımda eklediğinizComposeView
öğesinin en üst düzey composable'ı olacak.LayoutManager
Kompozit
LinearLayoutManager
LazyColumn
veyaLazyRow
GridLayoutManager
LazyVerticalGrid
veyaLazyHorizontalGrid
StaggeredGridLayoutManager
LazyVerticalStaggeredGrid
veyaLazyHorizontalStaggeredGrid
// recyclerView.layoutManager = LinearLayoutManager(context) composeView.setContent { LazyColumn(Modifier.fillMaxSize()) { // We use a LazyColumn since the layout manager of the RecyclerView is a vertical LinearLayoutManager } }
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 birViewHolder
alt sınıfıyla eşlenir ancak bu her zaman geçerli olmayabilir. Bu bileşenler, listenizdeki farklı öğe türleri için kullanıcı arayüzü gösterimi 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` } }
RecyclerView.Adapter
'ünonCreateViewHolder()
veonBindViewHolder()
yöntemlerindeki mantık, bu derlenebilir öğelerle ve onlara sağladığınız durumla değiştirilir. Oluşturma işleminde, bir öğe için bir bileşen oluşturma ve verileri bu öğeye bağlama işlemleri birbirinden ayrı değildir. Bu kavramlar birleştirilmiştir.Tembel listenin
content
yuvasında (son lambda parametresi), listenizin verilerini iterlemek içinitems()
işlevini (veya eşdeğer bir aşırı yüklemeyi) 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) } } }
Yaygın kullanım alanları
Öğe süslemeleri
RecyclerView
öğesinde, listedeki öğeler için özel bir çizim eklemek üzere kullanabileceğiniz bir ItemDecoration
kavramı vardır. Örneğin, öğeler arasına bölücü eklemek için ItemDecoration
ekleyebilirsiniz:
val itemDecoration = DividerItemDecoration(recyclerView.context, LinearLayoutManager.VERTICAL) recyclerView.addItemDecoration(itemDecoration)
Oluşturma'da öğe süslemelerine eşdeğer bir kavram yoktur. Bunun yerine, listedeki kullanıcı arayüzü süslemelerini doğrudan kompozisyona ekleyebilirsiniz. Örneğin, listeye ayırıcı eklemek için her öğenin ardından Divider
bileşenini kullanabilirsiniz:
LazyColumn(Modifier.fillMaxSize()) { itemsIndexed(data) { index, d -> ListItem(d) if (index != data.size - 1) { HorizontalDivider() } } }
Öğe animasyonları
Adaptörde değişiklik yapıldığında öğelerin görünümünü animasyonlu hale getirmek için bir RecyclerView
üzerinde ItemAnimator
ayarlanabilir. Varsayılan olarak RecyclerView
, kaldırma, ekleme ve taşıma etkinliklerinde temel animasyonlar sağlayan DefaultItemAnimator
'yi kullanır.
Tembel listeler, animateItemPlacement
değiştiricisi aracılığıyla benzer bir kavrama sahiptir.
Daha fazla bilgi için Öğe animasyonlarını inceleyin.
Ek kaynaklar
RecyclerView
öğesini Compose'a taşıma hakkında daha fazla bilgi edinmek için aşağıdaki kaynaklara göz atın:
- Listeler ve Izgaralar: Oluşturma'da listelerin ve ızgaraların nasıl uygulanacağına dair dokümanlar.
- Jetpack Compose birlikte çalışabilirliği: Compose'u RecyclerView'de kullanma:
Compose'u
RecyclerView
içinde verimli bir şekilde kullanmayla ilgili blog yayını.
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- Listeler ve ızgaralar
CoordinatorLayout
e-posta adresini Compose'a taşı- Dikkat edilmesi gereken diğer noktalar