Creación de Componentes UI en Jetpack Compose: Summary y Task Item

¿Cómo crear componentes visuales en Compose?

Al desarrollar una aplicación con Compose, es vital estructurar de manera efectiva los componentes visuales, permitiendo una experiencia de usuario fluida y atractiva. Aquí te guiaré a través de los pasos para crear dos componentes funcionales: un resumen de tareas y un ítem de tareas dentro de una lista. Empezaremos a construir desde los elementos más simples para llegar a una interfaz funcional.

¿Cómo se implementa el componente Summary Info?

El componente Summary Info es crucial para mostrar la información resumida de las tareas, incluyendo fecha y estado de tareas completas e incompletas. Aquí te muestro cómo crear este Composable:

@Composable
fun SummaryInfo(modifier: Modifier) {
    Column(
        modifier = Modifier
            .padding(16.dp)
    ) {
        Text(
            text = "24/05/2024", // Esto será dinámico
            style = MaterialTheme.typography.headlineLarge,
            color = MaterialTheme.colorScheme.onBackground,
            fontWeight = FontWeight.Bold
        )
        Text(
            text = "5 incompletas y 5 completas",
            style = MaterialTheme.typography.titleSmall,
            color = MaterialTheme.colorScheme.onSurface
        )
    }
}

Este componente se declara utilizando la anotación @Composable, y lo organizamos verticalmente utilizando la estructura Column, la cual permite alinear elementos de forma eficiente.

¿Cómo se trabaja con Row y Column en el ítem de tarea?

El componente TaskItem es un poco más complejo, ya que incorpora elementos clickeables e interactivos como un Checkbox. Aquí está su estructura:

@Composable
fun TaskItem(
    modifier: Modifier,
    task: Task,
    onDelete: () -> Unit,
    onToggle: (Boolean) -> Unit
) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .background(MaterialTheme.colorScheme.surface)
            .padding(horizontal = 8.dp)
            .clickable { /* Acción al clicar */ }
    ) {
        Checkbox(
            checked = task.isCompleted,
            onCheckedChange = { onToggle(it) }
        )
        Column(
            modifier = Modifier
                .padding(8.dp)
                .weight(1f),
            horizontalAlignment = Alignment.Start,
            verticalArrangement = Arrangement.spacedBy(4.dp)
        ) {
            Text(
                text = task.title,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
                style = MaterialTheme.typography.titleSmall,
                fontWeight = FontWeight.Bold
            )
            Text(
                text = task.description ?: "",
                maxLines = 2,
                overflow = TextOverflow.Ellipsis,
                style = MaterialTheme.typography.bodySmall
            )
        }
        Icon(
            imageVector = Icons.Default.Delete,
            contentDescription = "Eliminar",
            tint = MaterialTheme.colorScheme.onSurfaceVariant,
            modifier = Modifier.clickable { onDelete() }
        )
    }
}

Este código demuestra cómo combinar Row y Column para alinear los elementos de tarea de forma horizontal y vertical respectivamente. Estamos usando propiedades como alignment y arrangement para dar espacio y alineación adecuada a los componentes internos.

¿Cómo optimizar los componentes para la previsualización?

Para garantizar que los componentes se muestren correctamente durante el desarrollo, es importante habilitar la previsualización. Aquí te dejo el ejemplo de cómo hacerlo para el TaskItem:

@Preview(showBackground = true)
@Composable
fun TaskItemPreview() {
    TaskItem(
        task = Task(title = "Example Task", description = "Task description", isCompleted = false),
        onDelete = {},
        onToggle = {}
    )
}

Este preview permite visualizar rápidamente en el entorno de desarrollo cómo se verá el componente en la aplicación final, asegurando que los colores y estilos estén acorde al tema aplicado.

Recomendaciones finales

Al crear estos componentes:

• Prueba diversas configuraciones de tamaño y color para encontrar la mejor combinación visual.
• Ajusta el padding y los pesos (weight) para que los elementos se distribuyan de manera lógica y estética.
• Explora las diferentes alineaciones y separaciones para hacer de la interfaz algo intuitivo y limpio.

Métete a fondo con Compose, experimenta con sus posibilidades y no olvides adaptar estos ejemplos a tus propias necesidades.