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, RecyclerView poprawia wydajność Twojej aplikacji, zostawiając niewielką pulę można je przejrzeć i poddać recyklingowi podczas ich przewijania.

W funkcji tworzenia możesz używać leniwych list, by osiągnąć to samo. Ta strona opisuje, jak przeprowadzić migrację implementacji RecyclerView, aby używać list Lazy. w sekcji Utwórz.

Etapy migracji

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

  1. Zmień w komentarzu element RecyclerView lub usuń go z hierarchii interfejsu i dodaj ComposeView, aby ją zastąpić, jeśli w hierarchii nie ma jeszcze żadnej. Ten to 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 na podstawie Menedżer układu strony RecyclerView (patrz tabela poniżej). wybrany element kompozycyjny. będzie kompozycją najwyższego poziomu z bazy danych ComposeView dodanej w poprzedniego 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 odpowiednią funkcję kompozycyjną dla każdego typu widoku w Implementacja RecyclerView.Adapter. Każdy typ widoku jest zazwyczaj mapowany na ViewHolder, choć nie zawsze tak jest. Te będą używane jako reprezentacja interfejsu dla różnych typów elementy listy:

    @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 onCreateViewHolder() i RecyclerView.Adapter Metody onBindViewHolder() zostaną zastąpione tymi elementami kompozycyjnymi, a metoda jakie mu udostępnisz. W funkcji tworzenia wiadomości nie ma rozdziału między tworząc kompozycję dla elementu i wiążąc z nim dane. Takie koncepcje połączone.

  4. W boksie content listy Lazy (końcowy parametr lambda) użyj funkcji items() (lub równoważnego przeciążenia), aby iterować dane dotyczące listy. W funkcji lambda itemContent wywołaj odpowiednie element kompozycyjny dla 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 koncepcja ItemDecoration, której można użyć do dodania specjalny rysunek dla elementów na liście. Na przykład możesz 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. Przykład: aby dodać separatory do listy, użyj funkcji kompozycyjnej Divider za każdym razem, element:

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 elemencie RecyclerView, aby animować wygląd kolejne pozycje, jakie są wprowadzane w adapterze. Domyślnie RecyclerView używa DefaultItemAnimator – zawiera podstawowe animacje dotyczące usuwania, dodawania wydarzeń.

Leniwe listy działają podobnie za pomocą modyfikatora animateItemPlacement. Więcej informacji znajdziesz w sekcji Animacje elementów.

Dodatkowe materiały

Więcej informacji o migracji wiadomości RecyclerView do Compose znajdziesz w następujące zasoby:

. .