Carga datos de forma diferida con listas y Paging

Con la carga diferida y Paging, puedes admitir listas grandes de elementos, incluida una lista infinita, en tu app cargando y mostrando datos de forma incremental. Esta técnica te permite reducir los tiempos de carga iniciales y optimizar el uso de la memoria, lo que mejora el rendimiento.

Compatibilidad de versiones

Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.

Dependencias

Cómo mostrar contenido paginado

Con la biblioteca de Paging, puedes cargar y mostrar páginas de datos de un conjunto de datos más grande que se adquirió desde el almacenamiento local o a través de una red. Usa el siguiente código para mostrar una lista paginada que muestre una barra de progreso para indicarle al usuario que se están recuperando más datos:

@Composable
fun MessageList(
    modifier: Modifier,
    pager: Pager<Int, Message>
) {
    val lazyPagingItems = pager.flow.collectAsLazyPagingItems()

    LazyColumn {
        items(
            lazyPagingItems.itemCount,
            key = lazyPagingItems.itemKey { it.id }
        ) { index ->
            val message = lazyPagingItems[index]
            if (message != null) {
                MessageRow(message)
            } else {
                MessagePlaceholder()
            }
        }
    }
    @Composable
    fun MessagePlaceholder(modifier: Modifier) {
        Box(
            Modifier
                .fillMaxWidth()
                .height(48.dp)
        ) {
            CircularProgressIndicator()
        }
    }

    @Composable
    fun MessageRow(
        modifier: Modifier,
        message: Message
    ) {
        Card(modifier = Modifier.padding(8.dp)) {
            Column(
                modifier = Modifier.padding(8.dp),
                verticalArrangement = Arrangement.Center
            ) {
                Text(message.sender)
                Text(message.text)
            }
        }
    }
}
LazyListSnippets.kt

Puntos clave sobre el código

  • LazyColumn: Este elemento componible se usa para mostrar una gran lista de elementos (mensajes) de manera eficiente. Solo renderiza los elementos que son visibles en la pantalla, lo que ahorra recursos y memoria.
  • El objeto lazyPagingItems administra de manera eficiente la carga y presentación de datos paginados dentro de LazyColumn. Pasa LazyPagingItems a items en el elemento componible LazyColumn.
  • MessageRow(message: Text) es responsable de renderizar elementos de mensajes individuales, lo que probablemente muestre el remitente y el texto del mensaje dentro de una tarjeta.
  • MessagePlaceholder() proporciona un marcador de posición visual (un ícono giratorio de carga) mientras se recuperan los datos reales del mensaje, lo que mejora la experiencia del usuario.

Resultados

En el siguiente video, se muestra el comportamiento resultante de una lista grande que recupera datos mientras el usuario se desplaza.

Colecciones que contienen esta guía

Esta guía forma parte de estas colecciones de guías rápidas seleccionadas que abarcan objetivos más amplios de desarrollo de Android:

Las listas y las cuadrículas permiten que tu app muestre colecciones de una forma visualmente atractiva y fácil de consumir para los usuarios.
Colección de guías rápidas
Descubre cómo las funciones de componibilidad pueden ayudarte a crear fácilmente componentes de IU atractivos basados en el sistema de diseño de Material Design.
Colección de guías rápidas
En esta serie de videos, se presentan varias APIs de Compose y se muestra rápidamente lo que está disponible y cómo usarlo.
Colección de guías rápidas

Tienes preguntas o comentarios

Ve a nuestra página de preguntas frecuentes para obtener información sobre las guías rápidas o comunícate con nosotros para contarnos tu opinión.
Ir a las Preguntas frecuentes Enviar comentarios