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:
Kullanıcı arayüzü hiyerarşinizde
RecyclerView
için yorum yapın veyaRecyclerView
öğesini kaldırın ve henüz hiyerarşide yoksa bunun yerine koymak üzere birComposeView
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>
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ğinizComposeView
ile üst düzey composable olacaktır.LayoutManager
Oluşturulabilir
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ş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` } }
RecyclerView.Adapter
öğenizinonCreateViewHolder()
veonBindViewHolder()
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.Geç listenin
content
alanında (sondaki lambda parametresi) listenizin verilerinde yineleme yapmak içinitems()
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) } } }
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)
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() } } }
Öğ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:
- Listeler ve Izgaralar: Oluşturma'da liste ve ızgara uygulama belgeleri.
- Jetpack Compose Interop: Compose'u RecyclerView'da Kullanma:
RecyclerView
içinde Compose'u verimli bir şekilde kullanmayla ilgili blog yayını.
Sizin için önerilenler
- Not: Bağlantı metni JavaScript kapalıyken görüntülenir
- Listeler ve ızgaralar
CoordinatorLayout
öğesini Compose'a taşıyın- Dikkat edilmesi gereken diğer noktalar