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

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

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

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

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

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

                    android:layout_width="match_parent"
          android:layout_height="match_parent">

  
  
  
  

                        android:id="@+id/compose_view"
              android:layout_width="match_parent"
              android:layout_height="match_parent" />

  2. Определите, какой тип Lazy list composable вам нужен на основе менеджера макета вашего RecyclerView (см. таблицу ниже). Выбранный вами composable будет top-level composable для 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(/* ... */)
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 composable после каждого элемента: 

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

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

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

Ленивые списки имеют похожую концепцию через модификатор animateItemPlacement . Смотрите Анимации элементов , чтобы узнать больше.

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

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

{% дословно %} {% endverbatim %} {% дословно %} {% endverbatim %}