Carga datos de forma diferida con listas y Paging

Con la carga diferida y la paginación, 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 memoria, lo que mejora el rendimiento.

Resultados

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

Compatibilidad de versiones

Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o uno 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 adquirido desde el almacenamiento local o por una red. Usa el siguiente código para mostrar una lista paginada que incluya una barra de progreso que indique 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)
            }
        }
    }
}

Puntos clave sobre el código

  • LazyColumn: Este elemento componible se usa para mostrar una lista grande 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 la 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.

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 para desarrolladores de Android:

Las listas y cuadrículas permiten que tu app muestre colecciones de una forma visualmente agradable y fácil de consumir para los usuarios.
Colección de guías rápidas
Aprende cómo las funciones de componibilidad te permiten 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 qué hay disponible y cómo usarlas.
Colección de guías rápidas

¿Tienes preguntas o comentarios?

Visita nuestra página de preguntas frecuentes y obtén información sobre las guías rápidas, o bien comunícate con nosotros y cuéntanos tu opinión.
Ir a las Preguntas frecuentes Enviar comentarios