RecyclerView
to komponent widoku danych, który ułatwia efektywne wyświetlanie dużych zbiorów danych. Zamiast tworzyć widoki dla każdego elementu w zbiorze danych, funkcja RecyclerView
poprawia wydajność aplikacji, wyświetlając niewielką pulę widoków i odtwarzając je podczas przewijania tych elementów.
W funkcji tworzenia możesz używać leniwych list, by osiągnąć to samo. Z tego artykułu dowiesz się, jak przenieść implementację RecyclerView
, aby używać leniwego list w tworzeniu.
Etapy migracji
Aby przenieść implementację RecyclerView
do Compose, wykonaj te czynności:
Zmień w komentarz lub usuń element
RecyclerView
z hierarchii UI i dodajComposeView
, aby go zastąpić, jeśli w hierarchii jeszcze nie ma żadnej wartości. To jest kontener na listę Lazy, którą dodasz:<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>
Określ typ funkcji leniwego komponowania listy, której potrzebujesz, korzystając z menedżera układu
RecyclerView
(patrz tabela poniżej). Wybrany element kompozycyjny będzie najwyższego poziomu na podstawie funkcjiComposeView
dodanej w poprzednim kroku.LayoutManager
Składane
LinearLayoutManager
LazyColumn
lubLazyRow
GridLayoutManager
LazyVerticalGrid
lubLazyHorizontalGrid
StaggeredGridLayoutManager
LazyVerticalStaggeredGrid
lubLazyHorizontalStaggeredGrid
// recyclerView.layoutManager = LinearLayoutManager(context) composeView.setContent { LazyColumn(Modifier.fillMaxSize()) { // We use a LazyColumn since the layout manager of the RecyclerView is a vertical LinearLayoutManager } }
Utwórz w swojej implementacji
RecyclerView.Adapter
odpowiedni element kompozycyjny dla każdego typu widoku. Każdy typ widoku jest zwykle mapowany na podklasęViewHolder
, ale nie zawsze tak jest. Te elementy kompozycyjne będą używane jako reprezentacja interfejsu dla różnych typów elementów na liście:@Composable fun ListItem(data: MyData, modifier: Modifier = Modifier) { Row(modifier.fillMaxWidth()) { Text(text = data.name) // … other composables required for displaying `data` } }
Logika w metodach
onCreateViewHolder()
ionBindViewHolder()
wRecyclerView.Adapter
zostanie zastąpiona tymi elementami kompozycyjnymi oraz stanem, który im podasz. W funkcji Compose nie ma rozdzielenia między tworzeniem elementu kompozycyjnego dla elementu a powiązaniem z nim danych – te koncepcje się ze sobą łączą.W boksie
content
listy Lazy (końcowy parametr lambda) użyj funkcjiitems()
(lub jej odpowiednika), aby iterować dane na liście. W funkcji lambdaitemContent
wywołaj odpowiedni element kompozycyjny dla swoich danych:val data = listOf<MyData>(/* ... */) composeView.setContent { LazyColumn(Modifier.fillMaxSize()) { items(data) { ListItem(it) } } }
Częste zastosowania
Dekoracje produktów
W RecyclerView
obowiązuje standard ItemDecoration
, którego możesz użyć, aby dodać specjalny rysunek dla elementów na liście. Możesz na przykład dodać ItemDecoration
, aby dodać separatory między elementami:
val itemDecoration = DividerItemDecoration(recyclerView.context, LinearLayoutManager.VERTICAL) recyclerView.addItemDecoration(itemDecoration)
W funkcji Compose nie ma odpowiednika dekoracji produktu. Zamiast tego możesz dodawać dowolne dekoracje interfejsu z listy bezpośrednio w kompozycji. Aby na przykład dodać separatory do listy, możesz użyć funkcji kompozycyjnej Divider
po każdym elemencie:
LazyColumn(Modifier.fillMaxSize()) { itemsIndexed(data) { index, d -> ListItem(d) if (index != data.size - 1) { Divider() } } }
Animacje elementów
Aby animować wygląd elementów po wprowadzeniu zmian w adapterze, można ustawić ItemAnimator
w elemencie RecyclerView
. Domyślnie RecyclerView
używa komponentu DefaultItemAnimator
, który udostępnia podstawowe animacje zdarzeń usuwania, dodawania i przenoszenia.
Leniwe listy działają podobnie za pomocą modyfikatora animateItemPlacement
.
Więcej informacji znajdziesz w sekcji Animacje elementów.
Dodatkowe materiały
Więcej informacji na temat migracji elementu RecyclerView
do Compose znajdziesz w tych materiałach:
- Listy i siatki: dokumentacja implementacji list i siatek w tworzeniu wiadomości.
- Jetpack Compose Interop: korzystanie z funkcji tworzenia wiadomości w widoku RecyclerView: post na blogu dotyczący wydajnego korzystania z funkcji tworzenia wiadomości w komponencie
RecyclerView
.
Polecane dla Ciebie
- Uwaga: tekst linku wyświetla się, gdy JavaScript jest wyłączony
- Listy i siatki
- Migracja usługi
CoordinatorLayout
do Compose - Inne uwagi