Listas y Animaciones en Jetpack Compose

Jetpack Compose simplifica la implementación de listas y animaciones dentro de las aplicaciones Android, ofreciendo un enfoque más declarativo y flexible comparado con las técnicas tradicionales.

Vamos a explorar cómo trabajar con LazyColumn para listas y cómo integrar animaciones sutiles para mejorar la experiencia del usuario.

Creación de Listas con LazyColumn

LazyColumn es el equivalente de RecyclerView en Jetpack Compose, diseñado para mostrar listas de elementos de manera eficiente.

A continuación, un ejemplo básico de cómo utilizar LazyColumn para mostrar una lista de elementos:

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

@Composable
fun ListExample() {
    val itemList = listOf("Item 1", "Item 2", "Item 3")

    LazyColumn {
        items(itemList) { item ->
            Text(text = item, modifier = androidx.compose.ui.Modifier.padding(8.dp))
        }
    }
}

Este ejemplo muestra cómo LazyColumn puede ser utilizado para renderizar una lista simple de strings.

Integración de Animaciones Básicas

Las animaciones pueden mejorar significativamente la interacción del usuario, haciendo las transiciones más suaves y visuales. Jetpack Compose ofrece varios utilitarios para animaciones, como animateContentSize para animar cambios en el tamaño del contenido:

import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.layout.Box
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.*

@Composable
fun AnimationExample() {
    var expanded by remember { mutableStateOf(false) }

    Box(modifier = androidx.compose.ui.Modifier.animateContentSize()) {
        Button(onClick = { expanded = !expanded }) {
            Text(if (expanded) "Click to collapse" else "Click to expand")
        }
    }
}

Este código crea un botón que cambia su texto y tamaño de manera animada cuando se hace clic.

Combinando Listas y Animaciones

Podemos combinar LazyColumn con animaciones para crear listas dinámicas donde los elementos se expanden o colapsan.

Aquí un ejemplo avanzado:

@Composable
fun AnimatedListExample() {
    val items = List(5) { "Item ${it + 1}" }
    LazyColumn {
        items(items) { item ->
            var expanded by remember { mutableStateOf(false) }
            Button(onClick = { expanded = !expanded }) {
                Text(if (expanded) "$item - Click to collapse" else "$item - Click to expand", modifier = androidx.compose.ui.Modifier.animateContentSize().padding(8.dp))
            }
        }
    }
}

Este ejemplo muestra una lista donde cada elemento es un botón que puede expandirse para mostrar más texto.