tutoriales.com

¡Poder y Flexibilidad! Construyendo Componentes Reutilizables en Android con Jetpack Compose y Modificadores Personalizados

Este tutorial te guiará paso a paso en la creación de componentes de interfaz de usuario (UI) en Android utilizando Jetpack Compose. Descubre cómo aprovechar los Modificadores y el Patrón Builder para construir elementos UI altamente personalizables y reutilizables, elevando la calidad y eficiencia de tus aplicaciones.

Intermedio25 min de lectura19 views
Reportar error
¡Poder y Flexibilidad! Construyendo Componentes Reutilizables en Android con Jetpack Compose y Modificadores Personalizados

🚀 Introducción al Desarrollo de Componentes Reutilizables en Compose

En el mundo del desarrollo de aplicaciones, la reutilización de código es una piedra angular para construir aplicaciones eficientes, mantenibles y escalables. Cuando hablamos de la interfaz de usuario (UI), crear componentes reutilizables no solo acelera el desarrollo, sino que también garantiza una consistencia visual y de comportamiento en toda la aplicación. Jetpack Compose, el moderno toolkit declarativo de Android para construir UI, nos ofrece herramientas poderosas para lograr esto.

En este tutorial, exploraremos a fondo cómo podemos construir componentes UI de manera inteligente en Compose, centrándonos en el uso de Modificadores Personalizados y la implementación del Patrón Builder para maximizar la flexibilidad y la facilidad de uso. Prepárate para llevar tus habilidades de Compose al siguiente nivel y transformar la forma en que construyes interfaces de usuario.

¿Por qué la Reutilización de Componentes es Crucial? 🤔

  • Consistencia: Asegura que todos los elementos de la UI se vean y se comporten de la misma manera en toda la aplicación, reforzando la marca y la experiencia de usuario.
  • Eficiencia: Reduce el tiempo de desarrollo al no tener que reescribir código para elementos comunes.
  • Mantenibilidad: Los cambios en un componente se propagan automáticamente a todas sus instancias, simplificando las actualizaciones y correcciones de errores.
  • Escalabilidad: Facilita la expansión de la aplicación, ya que los nuevos desarrolladores pueden usar componentes existentes sin tener que reinventar la rueda.
  • Legibilidad: El código se vuelve más limpio y fácil de entender cuando se compone de piezas bien definidas.

🛠️ Entendiendo los Fundamentos de Jetpack Compose para Componentes

Antes de sumergirnos en la creación de componentes personalizados, es vital comprender cómo Compose gestiona y construye la UI. La clave está en las Composable Functions y los Modificadores.

Composable Functions: Los Bloques Constructores 🧱

Una Composable Function es el corazón de Compose. Son funciones regulares que están anotadas con @Composable y que describen la estructura de tu UI. A diferencia de las vistas tradicionales de Android (XML), las funciones Composable son declarativas: describes qué quieres ver en pantalla, y Compose se encarga de cómo dibujarlo.

@Composable
fun MySimpleButton(text: String, onClick: () -> Unit) {
    Button(onClick = onClick) {
        Text(text = text)
    }
}

Este es un ejemplo de un componente Composable muy básico. Sin embargo, para que sea verdaderamente reutilizable, necesitamos una forma de personalizar su apariencia y comportamiento de manera externa.

Los Modificadores: El Poder de la Personalización 💪

Los Modificadores son objetos que te permiten decorar o aumentar las funciones Composable. Se utilizan para añadir atributos como el tamaño, el padding, el background, la interactividad, y mucho más. Son increíblemente potentes porque se pueden encadenar, aplicando múltiples transformaciones a un solo Composable.

@Composable
fun MyCustomText(text: String, modifier: Modifier = Modifier) {
    Text(
        text = text,
        modifier = modifier
            .padding(16.dp)
            .background(Color.LightGray)
    )
}

// Uso:
@Composable
fun MyScreen() {
    MyCustomText(
        text = "Hola Compose!",
        modifier = Modifier
            .fillMaxWidth()
            .clickable { /* ... */ }
    )
}
💡 Consejo: Siempre expón un parámetro `modifier: Modifier = Modifier` en tus Composable Functions reutilizables. Esto permite a los usuarios de tu componente aplicar sus propios modificadores, aumentando la flexibilidad.

✨ Creando un Componente Reutilizable: El Botón de Acción Personalizado

Vamos a construir un componente práctico: un ActionButton que puede tener diferentes estilos (primario, secundario, de alerta), iconos opcionales y tamaños variables. Este componente nos permitirá explorar el uso de modificadores personalizados y el patrón Builder.

Paso 1: Definir los Estados y Estilos Base 🎨

Primero, definamos los posibles estilos y tamaños que nuestro botón puede tener. Esto lo haremos con clases sealed o enums para mayor seguridad y claridad.

package com.example.customcomponents.ui.components

import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

sealed class ActionButtonType {
    object Primary : ActionButtonType()
    object Secondary : ActionButtonType()
    object Warning : ActionButtonType()
}

sealed class ActionButtonSize {
    object Small : ActionButtonSize()
    object Medium : ActionButtonSize()
    object Large : ActionButtonSize()
}

data class ActionButtonColors(
    val background: Color,
    val content: Color
)

@Composable
fun getActionButtonColors(type: ActionButtonType): ActionButtonColors {
    return when (type) {
        ActionButtonType.Primary -> ActionButtonColors(Color(0xFF6200EE), Color.White)
        ActionButtonType.Secondary -> ActionButtonColors(Color(0xFF03DAC5), Color.Black)
        ActionButtonType.Warning -> ActionButtonColors(Color(0xFFFF0000), Color.White)
    }
}

@Composable
fun getActionButtonPadding(size: ActionButtonSize): Dp {
    return when (size) {
        ActionButtonSize.Small -> 8.dp
        ActionButtonSize.Medium -> 16.dp
        ActionButtonSize.Large -> 24.dp
    }
}

@Composable
fun getActionButtonFontSize(size: ActionButtonSize): Dp {
    return when (size) {
        ActionButtonSize.Small -> 14.dp
        ActionButtonSize.Medium -> 16.dp
        ActionButtonSize.Large -> 18.dp
    }
}

Paso 2: La Composable Básica del ActionButton 🖼️

Ahora crearemos la función Composable que encapsulará la lógica y la UI de nuestro botón.

package com.example.customcomponents.ui.components

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Info
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun ActionButton(
    modifier: Modifier = Modifier,
    text: String,
    onClick: () -> Unit,
    type: ActionButtonType = ActionButtonType.Primary,
    size: ActionButtonSize = ActionButtonSize.Medium,
    icon: ImageVector? = null,
    enabled: Boolean = true
) {
    val buttonColors = getActionButtonColors(type)
    val buttonPadding = getActionButtonPadding(size)
    val buttonFontSize = getActionButtonFontSize(size)

    val actualModifier = modifier
        .clip(RoundedCornerShape(8.dp))
        .background(if (enabled) buttonColors.background else Color.Gray)
        .border(
            border = BorderStroke(1.dp, if (enabled) Color.DarkGray else Color.LightGray),
            shape = RoundedCornerShape(8.dp)
        )
        .clickable(enabled = enabled, onClick = onClick)
        .padding(horizontal = buttonPadding * 1.5f, vertical = buttonPadding)

    Row(
        modifier = actualModifier,
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically
    ) {
        icon?.let {
            Icon(
                imageVector = it,
                contentDescription = null,
                tint = if (enabled) buttonColors.content else Color.White,
                modifier = Modifier.size(buttonFontSize * 1.5f)
            )
            Spacer(modifier = Modifier.width(8.dp))
        }
        Text(
            text = text,
            color = if (enabled) buttonColors.content else Color.White,
            fontSize = buttonFontSize.sp
        )
    }
}
📌 Nota: Aquí hemos expuesto todos los parámetros de personalización directamente en la función Composable. Esto funciona, pero puede volverse engorroso con muchos parámetros. ¡Aquí es donde entra el patrón Builder!

💡 El Poder de los Modificadores Personalizados

Los modificadores son el principal mecanismo de Compose para personalizar la apariencia y el comportamiento de las Composable. Podemos crear nuestros propios modificadores personalizados para encapsular lógica de estilo o comportamiento específica de nuestro componente. Esto nos permite aplicar estilos complejos de forma concisa y declarativa.

Creando un Modificador de Estilo de Botón ✨

Vamos a refactorizar nuestro ActionButton para que parte de su lógica de estilo se aplique a través de un modificador personalizado.

package com.example.customcomponents.ui.components

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

fun Modifier.actionButtonConfig(
    type: ActionButtonType = ActionButtonType.Primary,
    size: ActionButtonSize = ActionButtonSize.Medium,
    enabled: Boolean = true,
    onClick: () -> Unit
) = composed {
    val buttonColors = getActionButtonColors(type)
    val buttonPadding = getActionButtonPadding(size)

    this
        .clip(RoundedCornerShape(8.dp))
        .background(if (enabled) buttonColors.background else Color.Gray)
        .border(
            border = BorderStroke(1.dp, if (enabled) Color.DarkGray else Color.LightGray),
            shape = RoundedCornerShape(8.dp)
        )
        .clickable(enabled = enabled, onClick = onClick)
        .padding(horizontal = buttonPadding * 1.5f, vertical = buttonPadding)
}

Con este modificador, podemos simplificar nuestra ActionButton Composable:

package com.example.customcomponents.ui.components

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.unit.sp

@Composable
fun ActionButton(
    modifier: Modifier = Modifier,
    text: String,
    onClick: () -> Unit,
    type: ActionButtonType = ActionButtonType.Primary,
    size: ActionButtonSize = ActionButtonSize.Medium,
    icon: ImageVector? = null,
    enabled: Boolean = true
) {
    val buttonColors = getActionButtonColors(type)
    val buttonFontSize = getActionButtonFontSize(size)

    Row(
        modifier = modifier.actionButtonConfig(type, size, enabled, onClick),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically
    ) {
        icon?.let {
            Icon(
                imageVector = it,
                contentDescription = null,
                tint = if (enabled) buttonColors.content else Color.White,
                modifier = Modifier.size(buttonFontSize * 1.5f)
            )
            Spacer(modifier = Modifier.width(8.dp))
        }
        Text(
            text = text,
            color = if (enabled) buttonColors.content else Color.White,
            fontSize = buttonFontSize.sp
        )
    }
}

Ahora, el uso es más limpio:

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Settings
// ...

@Composable
fun MyScreen() {
    Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally) {
        ActionButton(
            text = "Guardar Cambios",
            onClick = { /* ... */ },
            type = ActionButtonType.Primary,
            size = ActionButtonSize.Large,
            icon = Icons.Default.Settings
        )
        Spacer(modifier = Modifier.height(16.dp))
        ActionButton(
            text = "Cancelar",
            onClick = { /* ... */ },
            type = ActionButtonType.Secondary,
            size = ActionButtonSize.Medium
        )
    }
}
🔥 Importante: Usa `Modifier.composed` para modificadores que necesitan acceder al Composition local o al contexto de Composable, como colores del tema o tamaños dinámicos.

🎯 Implementando el Patrón Builder para Máxima Flexibilidad

Cuando un componente tiene muchas opciones de configuración, pasar todos los parámetros directamente a la función Composable puede volverse complicado. El Patrón Builder es una solución elegante para construir objetos complejos paso a paso, proporcionando una API fluida y legible. Podemos adaptar este patrón para nuestros componentes Composable.

Concepto del Builder para Composable 👷

En lugar de un builder que crea un objeto final, nuestro builder Composable será un object o class que contendrá las funciones Composable y quizás modificadores de extensión que apliquen configuraciones específicas.

Vamos a crear un ActionButtonBuilder.

package com.example.customcomponents.ui.components

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.unit.sp

// Objeto Builder para ActionButton
object ActionButtonBuilder {

    @Composable
    fun Standard(
        modifier: Modifier = Modifier,
        text: String,
        onClick: () -> Unit,
        type: ActionButtonType = ActionButtonType.Primary,
        size: ActionButtonSize = ActionButtonSize.Medium,
        icon: ImageVector? = null,
        enabled: Boolean = true
    ) {
        val buttonColors = getActionButtonColors(type)
        val buttonFontSize = getActionButtonFontSize(size)

        Row(
            modifier = modifier.actionButtonConfig(type, size, enabled, onClick),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
            icon?.let {
                Icon(
                    imageVector = it,
                    contentDescription = null,
                    tint = if (enabled) buttonColors.content else Color.White,
                    modifier = Modifier.size(buttonFontSize * 1.5f)
                )
                Spacer(modifier = Modifier.width(8.dp))
            }
            Text(
                text = text,
                color = if (enabled) buttonColors.content else Color.White,
                fontSize = buttonFontSize.sp
            )
        }
    }

    @Composable
    fun IconOnly(
        modifier: Modifier = Modifier,
        onClick: () -> Unit,
        icon: ImageVector,
        contentDescription: String?,
        type: ActionButtonType = ActionButtonType.Primary,
        size: ActionButtonSize = ActionButtonSize.Medium,
        enabled: Boolean = true
    ) {
        val buttonColors = getActionButtonColors(type)
        val buttonFontSize = getActionButtonFontSize(size)

        Row(
            modifier = modifier.actionButtonConfig(type, size, enabled, onClick),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(
                imageVector = icon,
                contentDescription = contentDescription,
                tint = if (enabled) buttonColors.content else Color.White,
                modifier = Modifier.size(buttonFontSize * 1.5f)
            )
        }
    }
}

Ahora, podemos usar nuestro ActionButtonBuilder para instanciar diferentes variantes de nuestro botón de una manera más organizada:

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material.icons.filled.Send
// ...

@Composable
fun MyScreenWithBuilder() {
    Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally) {
        ActionButtonBuilder.Standard(
            text = "Enviar Datos",
            onClick = { /* ... */ },
            type = ActionButtonType.Primary,
            icon = Icons.Default.Send
        )
        Spacer(modifier = Modifier.height(16.dp))
        ActionButtonBuilder.IconOnly(
            onClick = { /* ... */ },
            icon = Icons.Default.Delete,
            contentDescription = "Eliminar elemento",
            type = ActionButtonType.Warning,
            size = ActionButtonSize.Small
        )
        Spacer(modifier = Modifier.height(16.dp))
        ActionButtonBuilder.Standard(
            text = "Botón Deshabilitado",
            onClick = { /* No se ejecutará */ },
            enabled = false,
            type = ActionButtonType.Secondary
        )
    }
}
💡 Consejo: El patrón Builder es especialmente útil cuando tienes componentes que pueden presentarse de varias formas distintas, cada una con un conjunto diferente (pero relacionado) de parámetros.

Beneficios del Patrón Builder en Compose 📈

  • Claridad: Cada método del builder (ej. Standard, IconOnly) representa una configuración específica del componente, haciendo el código más legible.
  • Organización: Agrupa todas las variantes de un componente bajo un único punto de entrada (ActionButtonBuilder).
  • Flexibilidad: Permite añadir nuevas variantes del componente sin modificar la función ActionButton original, siguiendo el principio Abierto/Cerrado.
  • Descubribilidad: Los desarrolladores pueden ver fácilmente las diferentes formas en que pueden construir el componente a través de las funciones del builder.

📚 Casos de Uso Avanzados y Buenas Prácticas

Ahora que hemos cubierto lo básico, veamos algunos escenarios más avanzados y buenas prácticas para la creación de componentes reutilizables.

Slots para Contenido Personalizado 🧩

Compose fomenta el uso de slots (espacios) para permitir que el contenido interno de un Composable sea definido por el caller. Esto es clave para componentes que actúan como contenedores o que tienen partes variables.

Modifiquemos nuestro ActionButton para usar un slot para el contenido en lugar de solo texto e icono:

package com.example.customcomponents.ui.components

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier

@Composable
fun CustomContentActionButton(
    modifier: Modifier = Modifier,
    onClick: () -> Unit,
    type: ActionButtonType = ActionButtonType.Primary,
    size: ActionButtonSize = ActionButtonSize.Medium,
    enabled: Boolean = true,
    content: @Composable RowScope.() -> Unit // El slot para el contenido
) {
    Row(
        modifier = modifier.actionButtonConfig(type, size, enabled, onClick),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically,
        content = content // Pasamos el content lambda al Row
    )
}

// Uso:
@Composable
fun MyScreenWithSlotButton() {
    Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally) {
        CustomContentActionButton(
            onClick = { /* ... */ },
            type = ActionButtonType.Primary
        ) {
            Icon(
                imageVector = Icons.Default.Info,
                contentDescription = null,
                tint = Color.White,
                modifier = Modifier.size(24.dp)
            )
            Spacer(modifier = Modifier.width(8.dp))
            Text("Información Detallada", color = Color.White)
        }
    }
}

El content: @Composable RowScope.() -> Unit es un Trailing Lambda que permite al usuario del componente definir cualquier Composable dentro del botón, con el contexto de RowScope para usar modificadores de layout como alignByBaseline.

CustomContentActionButton Lógica del Padre: val modifier = Modifier.padding(16.dp) val color = Color.Blue Slot: content() Espacio definido por el padre Componente Hijo Row { Icon(...) ; Text(...) } (Lambda pasable) Provee Modificadores Inyecta contenido RENDER Concepto de Slot: 1. Padre reserva espacio 2. Hijo define qué va dentro

Tematización y Estilización 💅

Para componentes verdaderamente reutilizables, es fundamental que se adapten al tema de tu aplicación. Utiliza MaterialTheme y sus propiedades (colores, tipografía, formas) para construir tus componentes.

import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@Composable
fun ThemedButton(text: String, onClick: () -> Unit, modifier: Modifier = Modifier) {
    Button(
        onClick = onClick,
        modifier = modifier,
        colors = ButtonDefaults.buttonColors(backgroundColor = MaterialTheme.colors.primary)
    ) {
        Text(text = text, color = MaterialTheme.colors.onPrimary)
    }
}

Esto garantiza que tu ThemedButton siempre se vea coherente con el esquema de color primario de tu aplicación.

Documentación y Ejemplos 📖

Un componente no está realmente terminado hasta que está bien documentado. Utiliza KDoc para explicar el propósito del componente, sus parámetros y cómo usarlo. Incluye ejemplos de uso (@sample) para que otros desarrolladores puedan entenderlo rápidamente.

/**
 * Un botón de acción altamente personalizable que soporta diferentes tipos, tamaños e iconos.
 *
 * @param modifier El [Modifier] a aplicar a este componente.
 * @param text El texto a mostrar en el botón.
 * @param onClick La acción a realizar cuando se hace clic en el botón.
 * @param type El estilo visual del botón (e.g., [ActionButtonType.Primary], [ActionButtonType.Warning]).
 * @param size El tamaño predefinido del botón (e.g., [ActionButtonSize.Small], [ActionButtonSize.Large]).
 * @param icon Un [ImageVector] opcional para mostrar un icono junto al texto.
 * @param enabled Si el botón está habilitado o deshabilitado.
 *
 * @sample com.example.customcomponents.ui.components.ActionButtonSample
 */
@Composable
fun ActionButton(
    // ... parámetros ...
) { /* ... */ }

// En un archivo de muestras o en la misma clase si es pequeña
@Composable
private fun ActionButtonSample() {
    ActionButton(
        text = "Guardar",
        onClick = { /* ... */ },
        type = ActionButtonType.Primary,
        icon = Icons.Default.Save
    )
}
⚠️ Advertencia: Evita la sobre-ingeniería. No intentes hacer que un componente haga *todo*. Si un componente comienza a tener demasiados parámetros o lógica condicional compleja, considera dividirlo en componentes más pequeños o usar el patrón Builder para sus variantes.

Pruebas Unitarias y de UI 🧪

Para asegurar la calidad y el comportamiento correcto de tus componentes reutilizables, es esencial escribir pruebas. Utiliza las herramientas de prueba de Compose para verificar que tus componentes se renderizan correctamente, responden a los eventos de usuario y aplican los modificadores según lo esperado.

package com.example.customcomponents.ui

import androidx.compose.ui.test.assertIsDisplayed
import androidx.compose.ui.test.junit4.createComposeRule
import androidx.compose.ui.test.onNodeWithText
import androidx.compose.ui.test.performClick
import com.example.customcomponents.ui.components.ActionButton
import org.junit.Rule
import org.junit.Test
import org.mockito.kotlin.mock
import org.mockito.kotlin.verify

class ActionButtonTest {

    @get:Rule
    val composeTestRule = createComposeRule()

    @Test
    fun actionButton_displaysTextAndPerformsClick() {
        var clicked = false
        composeTestRule.setContent {
            ActionButton(
                text = "Test Button",
                onClick = { clicked = true }
            )
        }

        composeTestRule.onNodeWithText("Test Button").assertIsDisplayed()
        composeTestRule.onNodeWithText("Test Button").performClick()

        assert(clicked) { "El botón no realizó el click esperado" }
    }

    @Test
    fun actionButton_disabled_doesNotPerformClick() {
        val mockOnClick = mock<() -> Unit>()
        composeTestRule.setContent {
            ActionButton(
                text = "Disabled Button",
                onClick = mockOnClick,
                enabled = false
            )
        }

        composeTestRule.onNodeWithText("Disabled Button").assertIsDisplayed()
        composeTestRule.onNodeWithText("Disabled Button").performClick()

        verify(mockOnClick, org.mockito.kotlin.never()).invoke()
    }
}

🏁 Conclusión: El Camino hacia una UI Modular y Potente

Hemos recorrido un camino completo, desde los fundamentos de Jetpack Compose hasta la construcción de componentes reutilizables y altamente personalizables utilizando Modificadores y el Patrón Builder. Comprender y aplicar estos conceptos te permitirá construir interfaces de usuario en Android que no solo son visualmente atractivas, sino también robustas, fáciles de mantener y escalar.

Recuerda la importancia de:

  • Exponer siempre un Modifier en tus Composable functions.
  • Utilizar modificadores personalizados (Modifier.composed) para encapsular lógica de estilo compleja.
  • Considerar el Patrón Builder para componentes con múltiples variantes o muchas opciones de configuración.
  • Aprovechar los slots para contenido personalizado flexible.
  • Adherirte a la tematización de Material Design.
  • Documentar y probar exhaustivamente tus componentes.

Al dominar estas técnicas, no solo mejorarás la calidad de tu propio código, sino que también contribuirás a la creación de una base de código más saludable y productiva para cualquier equipo de desarrollo. ¡Ahora sal y construye interfaces de usuario increíbles con Jetpack Compose!

Tutoriales relacionados

Comentarios (0)

Aún no hay comentarios. ¡Sé el primero!