Перенос RecyclerView в ленивый список

RecyclerView — это компонент View, который упрощает эффективное отображение больших наборов данных. Вместо того, чтобы создавать представления для каждого элемента в наборе данных, RecyclerView повышает производительность вашего приложения, поддерживая небольшой набор представлений и циклически переключаясь между ними при прокрутке элементов.

В Compose вы можете использовать ленивые списки для достижения той же цели. На этой странице описывается, как перенести реализацию RecyclerView для использования ленивых списков в Compose.

Этапы миграции

Чтобы перенести реализацию RecyclerView в Compose, выполните следующие действия:

1. Закомментируйте или удалите RecyclerView из иерархии пользовательского интерфейса и добавьте ComposeView для его замены, если его ещё нет в иерархии. Это контейнер для ленивого списка, который вы добавите:

         <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. Определите, какой тип компонуемого элемента «Ленивый список» вам нужен, используя менеджер компоновки вашего RecyclerView (см. таблицу ниже). Выбранный вами компонуемый элемент будет компонуемым элементом верхнего уровня для ComposeView , добавленного на предыдущем шаге.

   LayoutManager	Композитный
   LinearLayoutManager	LazyColumn или LazyRow
   GridLayoutManager	LazyVerticalGrid или LazyHorizontalGrid
   StaggeredGridLayoutManager	LazyVerticalStaggeredGrid или 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. Создайте соответствующий компонуемый элемент для каждого типа представления в вашей реализации RecyclerView.Adapter . Каждый тип представления обычно соответствует подклассу ViewHolder , хотя это может быть не всегда так. Эти компонуемые элементы будут использоваться в качестве пользовательского интерфейса для различных типов элементов в вашем списке:

   @Composable
   fun ListItem(data: MyData, modifier: Modifier = Modifier) {
       Row(modifier.fillMaxWidth()) {
           Text(text = data.name)
           // … other composables required for displaying `data`
       }
   }
   MigrationCommonScenariosSnippets.kt

   Логика методов onCreateViewHolder() и onBindViewHolder() вашего RecyclerView.Adapter будет заменена этими компонуемыми объектами и состоянием, которое вы им предоставите. В Compose нет разделения между созданием компонуемого объекта для элемента и привязкой к нему данных — эти концепции объединены.

4. В слоте content списка Lazy (завершающий лямбда-параметр) используйте функцию items() (или эквивалентную перегрузку) для итерации по данным списка. В лямбда- itemContent вызовите соответствующий компонуемый элемент для ваших данных:

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

Распространенные варианты использования

Украшения предметов

RecyclerView реализована концепция ItemDecoration , которую можно использовать для добавления специального оформления к элементам в списке. Например, можно добавить ItemDecoration для создания разделителей между элементами:

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

В Compose нет аналогичной концепции оформления элементов. Вместо этого вы можете добавлять любые элементы пользовательского интерфейса в список непосредственно в процессе композиции. Например, чтобы добавить разделители в список, можно использовать компонуемый Divider после каждого элемента:

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

Анимации предметов

Для RecyclerView можно настроить ItemAnimator для анимации внешнего вида элементов при внесении изменений в адаптер. По умолчанию RecyclerView использует DefaultItemAnimator , который обеспечивает базовую анимацию при удалении, добавлении и перемещении.

В ленивых списках используется аналогичная концепция благодаря модификатору animateItemPlacement . Подробнее см. в разделе «Анимация элементов» .

Дополнительные ресурсы

Дополнительную информацию о переносе RecyclerView в Compose можно найти в следующих ресурсах:

• Списки и сетки : документация по реализации списков и сеток в Compose.
• Взаимодействие с Jetpack Compose: использование Compose в RecyclerView : запись в блоге об эффективном использовании Compose в RecyclerView .