Cómo migrar RecyclerView a lista diferida

RecyclerView es un componente de vista que facilita mostrar de manera eficiente. en grandes conjuntos de datos. En lugar de crear vistas para cada elemento del conjunto de datos, RecyclerView mejora el rendimiento de tu app, ya que mantiene un grupo pequeño de y reciclarlas a medida que te desplazas por esos elementos.

En Compose, puedes usar listas diferidas para lograr lo mismo. Esta página se describe cómo puedes migrar tu implementación de RecyclerView para usar listas diferidas en Compose.

Pasos de la migración

Para migrar tu implementación de RecyclerView a Compose, sigue estos pasos:

  1. Marca como comentario o quita el elemento RecyclerView de la jerarquía de tu IU y agrega un elemento ComposeView para reemplazarlo si aún no hay ninguno presente en la jerarquía. Esta es el contenedor de la lista diferida que agregarás:

          <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. Determina qué tipo de lista diferida componible necesitas según tu Administrador de diseño de RecyclerView (consulta la tabla que aparece más abajo) El elemento componible que seleccionas será el elemento componible de nivel superior del ComposeView que agregaste en el paso anterior.

    LayoutManager

    Componible

    LinearLayoutManager

    LazyColumn o LazyRow

    GridLayoutManager

    LazyVerticalGrid o LazyHorizontalGrid

    StaggeredGridLayoutManager

    LazyVerticalStaggeredGrid o 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. Crea un elemento componible correspondiente para cada tipo de vista en tu Implementación de RecyclerView.Adapter. Cada tipo de vista generalmente se asigna a un ViewHolder, aunque no siempre será así. Estos de elementos componibles se usarán como representación de la IU para diferentes tipos de elementos en tu lista:

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

    La lógica de tu onCreateViewHolder() de RecyclerView.Adapter y Se reemplazarán los métodos onBindViewHolder() por estos elementos componibles y el estado que les proporcionas. En Compose, no hay separación entre crear un elemento componible para un elemento y vincular datos a él, estos conceptos son se combinan.

  4. Dentro del espacio content de la lista diferida (el parámetro lambda final), usa la función items() (o una sobrecarga equivalente) para iterar a través del datos para tu lista. En la lambda itemContent, invoca el elemento elemento componible para tus datos:

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

Casos de uso comunes

Decoración de artículos

RecyclerView tiene el concepto de ItemDecoration, que puedes usar para agregar un dibujo especial para los elementos de la lista. Por ejemplo, puedes agregar ItemDecoration para agregar divisores entre los elementos:

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

Compose no tiene un concepto equivalente de decoraciones de elementos. En cambio, puedes agregar cualquier decoración de IU en la lista directamente en la composición. Por ejemplo: Para agregar divisores a la lista, puedes usar el elemento Divider componible después de cada elemento:

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

Animaciones de elementos

Se puede configurar un ItemAnimator en un RecyclerView para animar la apariencia de elementos a medida que se realizan cambios en el adaptador. De forma predeterminada, RecyclerView usa DefaultItemAnimator, que proporciona animaciones básicas para quitar, agregar y mover eventos.

Las listas diferidas tienen un concepto similar a través del modificador animateItemPlacement. Consulta Animaciones de elementos para obtener más información.

Recursos adicionales

Si quieres obtener más información para migrar un objeto RecyclerView a Compose, consulta el siguiente vínculo: los siguientes recursos: