Przenoszenie widoku RecyclerView do listy Leniwo

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:

  1. Zmień w komentarz lub usuń element RecyclerView z hierarchii UI i dodaj ComposeView, 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>

  2. 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 funkcji ComposeView dodanej w poprzednim kroku.

    LayoutManager

    Składane

    LinearLayoutManager

    LazyColumn lub LazyRow

    GridLayoutManager

    LazyVerticalGrid lub LazyHorizontalGrid

    StaggeredGridLayoutManager

    LazyVerticalStaggeredGrid lub 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. 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`
    }
}
    MigrationCommonScenariosSnippets.kt

    Logika w metodach onCreateViewHolder() i onBindViewHolder() w RecyclerView.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ą.

  4. W boksie content listy Lazy (końcowy parametr lambda) użyj funkcji items() (lub jej odpowiednika), aby iterować dane na liście. W funkcji lambda itemContent wywołaj odpowiedni element kompozycyjny dla swoich danych:

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

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)
MigrationCommonScenariosSnippets.kt

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()
        }
    }
}
MigrationCommonScenariosSnippets.kt

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: