Przenoszenie widoku RecyclerView do listy Leniwo

RecyclerView to komponent widoku, który ułatwia skuteczne wyświetlanie dużych zbiorów danych. Zamiast tworzyć widoki dla każdego elementu w zbiorze danych, RecyclerView poprawia wydajność aplikacji, utrzymując niewielką pulę widoków danych i powtórzając je podczas przewijania.

W funkcji tworzenia wiadomości możesz używać leniwych list, aby uzyskać to samo. Na tej stronie opisujemy, jak możesz przenieść implementację RecyclerView, aby używać leniwch list w usłudze Compose.

Etapy migracji

Aby przenieść implementację RecyclerView do tworzenia wiadomości, wykonaj te czynności:

  1. Zmień w komentarze lub usuń element RecyclerView z hierarchii interfejsu użytkownika i dodaj element ComposeView, aby go zastąpić, jeśli w hierarchii jeszcze go nie ma. To jest kontener na listę Leniwo, 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 kompozycyjnej Lazy list, której potrzebujesz, na podstawie menedżera układu RecyclerView (patrz tabela poniżej). Wybrany przez Ciebie element kompozycyjny będzie nadrzędnym elementem kompozycyjnym elementu ComposeView dodanego w poprzednim kroku.

    LayoutManager

    Funkcja kompozycyjna

    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 element kompozycyjny dla każdego typu widoku w implementacji RecyclerView.Adapter. 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 metod onCreateViewHolder() i onBindViewHolder() w obiekcie RecyclerView.Adapter zostanie zastąpiona tymi obiektami kompozycyjnymi i stanem, który je podasz. W przypadku tworzenia nie ma rozdzielenia między tworzeniem funkcji kompozycyjnej dla elementu a powiązaniem z nią danych – te koncepcje są ze sobą połączone.

  4. W boksie content listy Leniwa (końcowego parametru lambda) użyj funkcji items() (lub odpowiadającego mu przeciążenia), aby iterować dane na potrzeby listy. W wyniku lambda itemContent wywołaj odpowiedni element kompozycyjny odpowiadający Twoim danym:

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

Typowe przypadki użycia

Dekoracje elementów

W RecyclerView działa ItemDecoration, którego możesz użyć, by dodać specjalny rysunek do elementów na liście. Możesz na przykład dodać ItemDecoration, aby dodać rozgraniczenia między elementami:

val itemDecoration = DividerItemDecoration(recyclerView.context, LinearLayoutManager.VERTICAL)
recyclerView.addItemDecoration(itemDecoration)
MigrationCommonScenariosSnippets.kt

Tworzenie nie ma podobnego pojęcia dekoracji elementów. Dekoracje interfejsu możesz dodać bezpośrednio do kompozycji. Aby na przykład dodać separatory do listy, możesz użyć funkcji Divider kompozycyjnej po każdym elemencie:

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

Animacje elementów

Element ItemAnimator można ustawić w RecyclerView, aby animować wygląd elementów po wprowadzeniu zmian w adapterze. Domyślnie RecyclerView używa funkcji DefaultItemAnimator, która udostępnia podstawowe animacje podczas usuwania, dodawania i przenoszenia zdarzeń.

Leniwe listy działają podobnie dzięki modyfikatorowi animateItemPlacement. Więcej informacji znajdziesz w artykule Animacje elementów.

Dodatkowe materiały

Więcej informacji o przenoszeniu elementu RecyclerView do interfejsu Compose znajdziesz w tych materiałach: