Una forma mejor de crear vistas Android con JetPackCompose

Un poco de historia

Los usuarios interactúan con las aplicaciones móviles a través de varias pantallas, normalmente compuestas por múltiples Vistas. La forma en que los desarrolladores tratan estas interacciones con el usuario ha cambiado mucho durante la vida de la plataforma Android mediante el uso de múltiples patrones. Al principio, los desarrolladores utilizaban el patrón Modelo-Vista-Controlador, después el patrón Modelo-Vista-Presentador (o Modelo-Vista-Intento). Finalmente, pasamos al patrón Modelo-Vista-Vista-Modelo recomendado por Google. El "gestor de vistas" ha evolucionado (Controlador/Presentador/VistaModelo), pero la parte "Vista" en sí no ha cambiado tanto. El cambio más significativo fue el uso de fragmentos como bloques de construcción para la interfaz de usuario en lugar de actividades como en los primeros días.

Durante todo este tiempo, hemos utilizado principalmente XML para definir los diseños de las vistas de la aplicación. Por supuesto, podríamos definir estas vistas utilizando sólo código, pero este enfoque tiene sus desventajas. Normalmente, las aplicaciones pueden tener pocas vistas complejas y dinámicas definidas en código, pero hoy en día la mayoría de los diseños de las aplicaciones se siguen definiendo en archivos XML.

Mientras tanto, el lenguaje Kotin fue introducido y tenía esta característica genial que permitía definir vistas usando Kotln DSL personalizado. Esta característica era un concepto interesante, pero nunca ha ganado suficiente atención de la comunidad de desarrolladores de Android. Tenía sus problemas, pero los mayores eran que no soportaba casos de uso avanzados y carecía de soporte oficial por parte de Android Studio.

Por qué JetPack Compose

Hace algún tiempo, Google decidió unificar la forma de desarrollar aplicaciones para Android. Como parte de JetPack Google unificó muchos aspectos de la creación de aplicaciones Android. Desde la navegación, pasando por el acceso a la base de datos, hasta los trabajos en segundo plano, y mucho más. Además, Google ha proporcionado una base sólida para ayudar a los desarrolladores a seguir las mejores prácticas y reducir el código repetitivo. Como parte de esta familia viene el JetPack Compose - una nueva forma de tratar la interfaz de usuario. JetPack Compose utiliza Kotlin y un lenguaje DSL personalizado para configurar diseños de pantalla, definir temas, gestionar el estado de las vistas y añadir animaciones a la interfaz de usuario. Todo esto se consigue a través de un enfoque declarativo que ya está ampliamente extendido en ReactNative, Flutter y aplicaciones iOS.

JetPack Compose en la práctica

Tenemos un poco de antecedentes, así que ahora vamos a echar un vistazo rápido a cómo podemos utilizar JetPack Compose y lo que podemos hacer con este conjunto de herramientas. En primer lugar, tenemos que utilizar Android Studio Arctic Fox 2020.3.1 (o más reciente). Luego tenemos que crear un nuevo proyecto Android (ventana Select a Project Template, seleccionar Empty Compose Activity y hacer click en Next).

Encontrará instrucciones detalladas aquí.

Abra MainActivity y observe que Activity extiende ComponentActivity:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // … view
    }
}

En lugar de utilizar archivos XML para definir vistas, definiremos vistas en el método setContent lambda (método personalizado definido en Kotlin) que es un bloque de construcción principal para el JetPack Compose DSL:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            // … view
        }
    }
}

En lugar de utilizar etiquetas XML para definir vistas, utilizaremos los diseños y vistas personalizados que proporciona JetPack Compose - Column, Row, Box, etc.:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            Column {
                Text("Alfred Sisley")
                Text("3 minutes ago")
              }
        }
    }

    @Preview
    @Composable
    fun SampleView() {
        
    }
}

El código anterior crea una única columna con "dos filas" (cada fila contiene una única vista con el Texto).

Dentro de un rato aprenderemos a generar la vista previa.

Cada componente puede definir su jerarquía de vistas para permitir la creación directa de vistas más complejas. El código de nuestras vistas puede extraerse en "componentes" Comosable creando un método anotado con la anotación Composable:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            SampleView()
        }
    }

    @Composable
    fun SampleView () {
        Column {
            Text("Apple Juice")
            Text("100 ml")
        }
    }
}

Estos métodos (anotados con Composable ) proporcionan bloques de construcción básicos para la interfaz de usuario de Applications. Para poder ver la vista previa en Android Studio debemos anotar un método con la anotación Preview y construir la aplicación:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            SampleView()
        }
    }

    @Preview
    @Composable
    fun SampleView () {
        Column {
            Text("Apple Juice")
            Text("100 ml")
        }
    }
}

También podemos aplicar cambios a las propiedades de elementos individuales. Cambiemos los colores de fondo de cada línea del texto:

@Preview
@Composable
fun SampleView() {
    Column {
        Box(
            Modifier.background(Color.Green)
        ) {
            Text("Apple Juice")
        }
        Box(
            Modifier.background(Color.Blue)
        ) {
            Text("100 ml")
        }
    }
}

También podemos añadir parámetros a estas vistas para que el nombre del jugo y el volumen sean dinámicos:

@Composable
fun SampleView(name: String, volume: Int) {
    Column {
        Box(
            Modifier.background(Color.Green)
        ) {
            Text(name)
        }
        Box(
            Modifier.background(Color.Blue)
        ) {
            Text("$volume ml")
        }
    }
}

Desafortunadamente, no podemos previsualizar vistas parametrizadas, así que tenemos que crear otra vista para habilitar la previsualización. Ahora SampleViewPreview está anotada con la anotación Preview, y utiliza la vista previamente definida SampleView:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            SampleViewPreview()
        }
    }

    @Preview
    @Composable
    fun SampleViewPreview() {
        SampleView("Orange Juice", 50)
    }

    @Composable
    fun SampleView(name: String, volume: Int) {
        Column {
            Box(
                Modifier.background(Color.Green)
            ) {
                Text(name)
            }
            Box(
                Modifier.background(Color.Blue)
            ) {
                Text("$volume ml")
            }
        }
    }
}

JetPack Compose se basa en la composición, por lo que podemos utilizar fácilmente más de una instancia de nuestro SampleView:

@Preview
@Composable
fun SampleViewPreview() {
    Column {
        SampleView("Orange Juice", 50)
        SampleView("Mango Juice", 100)
    }
}

Resumen

JetPack Compose es fácil de usar y tiene un gran potencial. Puedes usarlo para construir UIs modernas, interactivas y dinámicas. Incluso puedes usarlo para construir UI de escritorio para las aplicaciones (aún alfa). El único inconveniente es que JetPack Compose aún no es estable (a junio de 2021), pero esto cambiará pronto, y lo más probable es que se convierta en un nuevo estándar para la interfaz de usuario de Android. Aprender JetPack Compose requiere un poco de cambio de mentalidad, pero con una interfaz de usuario cada vez más dinámica, este enfoque de estado hará la vida de cada desarrollador más fácil.

Enlaces

• JetPack Componer

• Componer muestras

• Ejemplos de JetBrains Compose