Tema 0: Introducción a Kotlin

Diapositivas

Objetivos de este tema

• Comprender los fundamentos del lenguaje Kotlin, sus características y ventajas frente a otros lenguajes como Java.
• Escribir y ejecutar programas básicos en Kotlin, utilizando la función principal main.
• Diferenciar entre variables mutables (var) e inmutables (val) y comprender su importancia para la gestión de la inmutabilidad.
• Aplicar el manejo seguro de nulos (null safety) para prevenir errores comunes como NullPointerException.
• Definir y utilizar clases, incluidas data class, sealed class, y clases con constructores primarios y secundarios.
• Entender y utilizar objetos (object) y los companion object para crear singletons y miembros estáticos.
• Declarar y trabajar con funciones, incluidas las funciones de extensión.
• Gestionar colecciones (listas, mapas y conjuntos) tanto inmutables como mutables.
• Crear y utilizar enumerados (enum) para definir conjuntos de constantes con propiedades asociadas.
• Comprender el uso del operador Elvis (?:) y el manejo de estructuras de control como when.
• Desarrollar un pensamiento crítico y seguro al escribir código Kotlin, utilizando prácticas modernas y efectivas.

0.1. Introducción

Kotlin es un lenguaje moderno y conciso, diseñado para ser seguro y fácil de usar. Es el lenguaje oficial de Android y combina perfectamente con Java.

0.2. Primer programa en Kotlin

1fun main(args: Array<String>) {
2    println("Hello World!")
3}

• La función main es el punto de entrada.
• println imprime un mensaje en consola.

0.3. Expresividad

Kotlin reduce de manera significativa el código repetitivo de Java.

Java:

 1public class Artista {
 2    private long id;
 3    private String nombre;
 4    private String url;
 5    private String mbid;
 6
 7    public long getId() { return id; }
 8    public void setId(long id) { this.id = id; }
 9
10    public String getNombre() { return nombre; }
11    public void setNombre(String nombre) { this.nombre = nombre; }
12
13    public String getUrl() { return url; }
14    public void setUrl(String url) { this.url = url; }
15
16    public String getMbid() { return mbid; }
17    public void setMbid(String mbid) { this.mbid = mbid; }
18
19    @Override
20    public String toString() {
21        return "Artista{id=" + id + ", nombre='" + nombre + '\'' +
22               ", url='" + url + '\'' + ", mbid='" + mbid + '\'' + '}';
23    }
24}

Kotlin:

1data class Artista(
2    var id: Long,
3    var nombre: String,
4    var url: String,
5    var mbid: String
6)

• Una data class genera de manera automática los métodos toString, equals, hashCode, copy, etc.

0.4. Variables y tipos

1val i: Int = 42      // Constante inmutable
2var mutableNum = 10  // Variable mutable
3val d: Double = i.toDouble()
4val c: Char = 'c'
5val iFromChar = c.code

• val define constantes, var permite cambios.
• Los tipos se infieren de manera automática, es decir, no siempre es necesario declararlos.

Operaciones bitwise (bit a bit)

1val bitwiseOr = FLAG1 or FLAG2
2val bitwiseAnd = FLAG1 and FLAG2

• En Kotlin se usan operadores simbólicos.

Acceso y recorrido de cadenas

1val s = "Ejemplo"
2val c = s[3]  // Accede a 'm'
3val s2 = "Example"
4for (c2 in s2) print(c2)  // Recorre cada carácter

Null safety

En Java, el código generalmente es defensivo, por lo que se debe comprobar en todo momento que no se produzca un null y prevenir NullPointerException. Kotlin, en cambio, es null safety, lo que significa que se puede definir si un objeto puede o no ser null utilizando para ello el operador ?. Fíjate en los siguientes ejemplos.

 1fun main(args: Array<String>) {
 2    // No compilaría, Artista no puede ser nulo.
 3    var notNullArtista: Artista = null
 4
 5    // Artista puede ser nulo.
 6    val artista: Artista? = null
 7
 8    // No compilará, artista podría ser nulo.
 9    artista.toString()
10
11    // Mostrará por pantalla artista si es distinto de nulo.
12    artista?.toString()
13
14    // No necesitaríamos utilizar el operador ? si previamente
15    // comprobamos si es nulo.
16    if (artista != null) {
17        artista.toString()
18    }
19    // Esta operación la utilizaremos si estamos completamente seguros
20    // que no será nulo. En caso contrario se producirá una excepción.
21    artista!!.toString()
22
23    // También podríamos utilizar el operador Elvis (?:) para dar
24    // una alternativa en caso que el objeto sea nulo.
25    val nombre = artista?.nombre ?: "vacío"
26}

• La doble exclamación (!!) se utiliza para indicar al compilador que ese objeto no será nulo, evitando así posibles comprobraciones.

0.5. Control de flujo en Kotlin

Kotlin incluye diversas estructuras de control de flujo, como todos los lenguajes, que permiten gestionar la ejecución del código según condiciones, repeticiones o casos específicos.

if - else

Forma básica:

1val a = 5
2val b = 10
3if (a > b) {
4    println("a es mayor que b")
5} else {
6    println("a no es mayor que b")
7}

Como expresión, devolviendo un valor:

1val max = if (a > b) a else b
2println("El máximo es $max")

when

La sentencia when podría decirse que es el equivalente de switch en Java, aunque con algunas diferencias:

• when no necesita la sentencia break, switch sí.
• when se puede utilizar para comprobar datos de un rango (1..6), switch no.
• when es más flexible que switch.
• when permite la verificación de tipos, switch no.
• when permite diferentes tipos de verificación de tipos de datos, switch no.
• switch tiene limitaciones y solo admite tipos primitivos, enum y string, when no.

Forma básica:

1val x = 3
2when (x) {
3    1 -> println("Uno")
4    2 -> println("Dos")
5    3 -> println("Tres")
6    else -> println("Otro número")
7}

Con múltiples condiciones y rangos:

1when (x) {
2    1, 2 -> println("Uno o Dos")
3    in 3..5 -> println("Entre 3 y 5")
4    else -> println("Otro")
5}

Como expresión (devolviendo un valor):

1val mensaje = when (x) {
2    1 -> "Uno"
3    2 -> "Dos"
4    else -> "Otro"
5}
6println(mensaje)

for

Recorrer una lista:

1val lista = listOf("A", "B", "C")
2for (item in lista) {
3    println(item)
4}

Recorrer un rango:

1for (i in 1..5) {
2    println(i)
3}

Con índices:

1for ((index, value) in lista.withIndex()) {
2    println("Elemento $index: $value")
3}

while

1var contador = 0
2while (contador < 3) {
3    println("Contador: $contador")
4    contador++
5}

do-while

1var numero = 0
2do {
3    println("Número: $numero")
4    numero++
5} while (numero < 3)

Otras sentencias útiles

• break: Sale de un bucle:

1for (i in 1..5) {
2    if (i == 3) break
3    println(i)
4}

• continue: Salta a la siguiente iteración:

1for (i in 1..5) {
2    if (i == 3) continue
3    println(i)
4}

• return: Finaliza la ejecución de una función y devuelve un valor:

1fun obtenerValor(x: Int): String {
2    if (x < 0) return "Negativo"
3    return "No negativo"
4}

0.6. Clases y constructores

 1class Persona(nombre: String, apellido: String) {
 2    var nombre: String = nombre
 3        set(value) { field = if (value.isEmpty()) "Sin nombre" else value }
 4        get() = "Nombre: $field"
 5
 6    var apellido: String = apellido
 7        set(value) { field = if (value.isEmpty()) "Sin apellido" else value }
 8        get() = "Apellido: " + field.uppercase()
 9
10    var edad: Int = 0
11        set(value) { field = if (value < 0) 0 else value }
12
13    var anyo: Int = 0
14
15    constructor(nombre: String, apellido: String, edad: Int) : this(nombre, apellido) { this.edad = edad }
16    constructor(nombre: String, apellido: String, edad: Int, anyo: Int) : this(nombre, apellido, edad) { this.anyo = anyo }
17}

• El uso de constructor permite definir constructores primarios y secundarios. El uso de this en el contructor tras los dos puntos (:) invoca al constructor en línea de la clase.
• field accede al respaldo interno de la propiedad cuando se sobrecargan los getters y setters.

init

También se dispone en Kotlin del bloque init, es un inicializador que se ejecutará de manera automática al crearse una instancia de la clase, inmediatamente después del constructor primario. Es especialmente útil para realizar operaciones de inicialización complejas, validaciones o cálculos adicionales con los parámetros del constructor. Se puede declarar más de un bloque init, y se ejecutarán en el orden en que aparecen en el código. Aunque las propiedades pueden inicializarse directamente, init permite incluir lógica adicional.

 1class Persona(nombre: String, apellido: String) {
 2    var nombreCompleto: String
 3
 4    init {
 5        // Se ejecutará tras el constructor primario
 6        nombreCompleto = "$nombre $apellido"
 7        println("Inicializando Persona: $nombreCompleto")
 8    }
 9}
10
11fun main() {
12    val persona = Persona("Patricia", "Aracil")
13    println(persona.nombreCompleto)
14}

Salida esperada:

1Inicializando Persona: Patricia Aracil
2Patricia Aracil

Herencia

Por defecto, las clases en Kotlin son final, es decir, no se pueden heredar. Para permitir la herencia, se debe marcar explícitamente con open.

 1open class Persona(val nombre: String) {
 2    fun presentarse() = println("Hola, soy $nombre")
 3}
 4
 5class Estudiante(nombre: String, val curso: String) : Persona(nombre) {
 6    fun mostrarCurso() = println("Curso: $curso")
 7}
 8
 9fun main() {
10    val estudiante = Estudiante("Carlos", "2º DAM")
11    estudiante.presentarse()      // Hereda de Persona
12    estudiante.mostrarCurso()
13}

• open class permite que otra clase herede de Persona.
• Estudiante heredará las propiedades y funciones públicas de Persona.

0.7. Data classes y desestructuración

1data class Person(val name: String, val surname: String, val age: Int)
2val (nombre, apellido, edad) = Person("Javier", "Carrasco", 45)

• La desestructuración permite extraer valores fácilmente.

0.8. Sealed classes

 1sealed class Vehiculo(var nRuedas: Int)
 2data class Motocicleta(var ruedas: Int = 2) : Vehiculo(ruedas)
 3data class Turismo(var ruedas: Int = 4, var puertas: Int = 2) : Vehiculo(ruedas)
 4
 5fun tipoVehiculo(vehiculo: Vehiculo): String {
 6    return when (vehiculo) {
 7        is Motocicleta -> "Es del tipo Motocicleta"
 8        is Turismo -> "Es del tipo Turismo"
 9    }
10}

Las sealed classes en Kotlin permiten restringir el número de subclases que una clase puede tener (heredar), asegurando así, que todas las subclases se declaren en el mismo archivo. Esto proporciona mayor seguridad en tiempo de compilación, ya que el compilador sabe todos los posibles tipos de subclases y puede verificar el uso exhaustivo de estas en expresiones como when. Son ideales para representar jerarquías cerradas, donde cada tipo o variante está bien definido y no se puede extender fuera del contexto previsto. Un ejemplo común es cuando se desea modelar un estado finito o conjunto limitado de resultados como una respuesta de red o un tipo de mensaje.

0.9. Pair

1val parUno = Pair("Hola", "Mundo")
2val parDos = Pair("Adiós amigos", 150)
3val (usuario, contrasenya) = Pair("javier", "kotlin")

• Útil para devolver dos valores.

0.10. Funciones

1fun sayHello() = "Hi!"  // Compacta
2fun sayHello(name: String, surname: String) = "Hello $name $surname"

Extensiones

1fun Fragment.toast(message: CharSequence, duration: Int = Toast.LENGTH_SHORT) {
2    Toast.makeText(this.context, message, duration).show()
3}

• Permite extender clases sin heredar.

0.11. Colecciones

Listas

1val list = listOf("A", "B", "C")  // Inmutable
2val mutableList = mutableListOf("A", "B")
3mutableList.add("C")

Mapas

1val map = mapOf(1 to "Uno", 2 to "Dos")
2val mutableMap = mutableMapOf(1 to "Uno")
3mutableMap[2] = "Dos"

Sets

1val set = setOf(1, 2, 3)
2val mutableSet = mutableSetOf(1, 2)
3mutableSet.add(3)

0.12. Enumerados

 1enum class DiasSemana(val numero: Int, val estado: String) {
 2    LUNES(1, "Trabajando"),
 3    MARTES(2, "Trabajando"),
 4    MIERCOLES(3, "Trabajando"),
 5    JUEVES(4, "Trabajando"),
 6    VIERNES(5, "Trabajando"),
 7    SABADO(6, "Descanso"),
 8    DOMINGO(7, "Descanso")
 9}
10DiasSemana.values().forEach { println("${it.numero} - ${it.name} - ${it.estado}") }

0.13. Objetos y Companion Object

Un object permite declarar un objeto como una única instancia (singleton) sin necesidad de definir una clase y crear instancias separadas. Es ideal para definir constantes, utilidades, o estructuras que no requieran múltiples copias. Los objetos también pueden tener propiedades, funciones, inicializadores (init) e incluso implementar interfaces. Además, se pueden utilizar para definir companion objects, que actuarán como miembros estáticos compartidos entre todas las instancias de una clase. Esto facilita organizar código relacionado y compartirlo de forma global, sin perder las ventajas del enfoque orientado a objetos de Kotlin.

1object MiObjeto {
2    val usuario = "Javier"
3    val base_URL = "https://miweb.com"
4    fun mostrar() = println("Función de MiObjeto")
5}

Los companion object son un objeto declarado dentro de una clase que permite definir miembros estáticos, es decir, propiedades y métodos compartidos por todas las instancias de la clase. Funciona como acompañante (de ahí el nombre) a la clase que lo contiene, y permite acceder a sus miembros directamente a través del nombre de la clase, sin necesidad de crear instancias de esta. Puede resultar útil para crear, constantes o utilidades comunes, manteniendo una sintaxis clara.

1class Empleados(val nombre: String, val apellido: String) {
2    var idEmpleado: Int
3    init { println("Init clase Empleado"); idEmpleado = numEmpleados++ }
4    companion object { var numEmpleados = 0 }
5}

0.14. Funciones avanzadas para colecciones en Kotlin

Kotlin ofrece potentes herramientas funcionales para manipular colecciones de forma eficiente, legible y concisa. A continuación, se muestran las funciones más relevantes con ejemplos detallados.

filter

Filtra elementos que cumplan una condición específica.

1val numeros = listOf(1, 2, 3, 4, 5)
2val pares = numeros.filter { it % 2 == 0 }
3println(pares) // [2, 4]

Descripción: Selecciona elementos para los que la condición es verdadera.

map

Transforma cada elemento.

1val nombres = listOf("Ana", "Luis", "Eva")
2val mayusculas = nombres.map { it.uppercase() }
3println(mayusculas) // [ANA, LUIS, EVA]

Descripción: Aplica una transformación a cada elemento.

sortedBy y sortedDescending

Ordena elementos por un criterio.

1val personas = listOf(Persona("Ana", "Pérez"), Persona("Luis", "Gómez"))
2val ordenadas = personas.sortedBy { it.nombre }

Descripción: Ordena ascendente o descendente por una clave.

groupBy

Agrupa elementos por una clave.

1val animales = listOf("gato", "perro", "gallina", "caballo")
2val agrupados = animales.groupBy { it.first() }

Descripción: Agrupa por el resultado de una función clave.

any y all

Comprueba condiciones.

1val edades = listOf(18, 20, 25)
2println(edades.any { it >= 21 }) // true
3println(edades.all { it >= 18 }) // true

Descripción: any verifica si alguno cumple, all si todos cumplen.

count

Cuenta elementos que cumplen una condición.

1println(edades.count { it >= 21 }) // 1

distinct y distinctBy

Elimina duplicados.

1val duplicados = listOf(1, 2, 2, 3, 3, 3)
2println(duplicados.distinct()) // [1, 2, 3]

take y drop

Selecciona o descarta elementos.

1val lista = listOf(1, 2, 3, 4, 5)
2println(lista.take(3)) // [1, 2, 3]
3println(lista.drop(2)) // [3, 4, 5]

zip y unzip

Combina listas.

1val nombres = listOf("Ana", "Luis")
2val edades = listOf(25, 30)
3val combinados = nombres.zip(edades)
4println(combinados) // [(Ana, 25), (Luis, 30)]

flatten

Aplana listas de listas, es decir, convierte una lista de listas (colección anidada) en una única lista.

1val listas = listOf(listOf(1, 2), listOf(3, 4))
2println(listas.flatten()) // [1, 2, 3, 4]

reduce y fold

Acumulan elementos.

1val suma = numeros.reduce { acc, num -> acc + num }
2val sumaConInicial = numeros.fold(10) { acc, num -> acc + num }

Ejemplo combinando funciones avanzadas

Ahora se combinarán varias funciones para transformar una lista de números:

 1val numeros = listOf(5, 3, 8, 1, 9, 2)
 2
 3val resultado = numeros
 4    .filter { it % 2 != 0 }           // Solo impares
 5    .sortedDescending()               // Orden descendente
 6    .map { it * 2 }                   // Multiplica por 2
 7    .take(2)                          // Toma los dos primeros
 8    .fold(0) { acc, num -> acc + num } // Suma acumulativa
 9
10println("Resultado: $resultado")

• Lista inicial: [5, 3, 8, 1, 9, 2]
• Paso 1 (filter): [5, 3, 1, 9]
• Paso 2 (sortedDescending): [9, 5, 3, 1]
• Paso 3 (map): [18, 10, 6, 2]
• Paso 4 (take): [18, 10]
• Paso 5 (fold): 0 + 18 + 10 = 28

Resultado final: 28

Fuentes

• Kotlin Docs

Tema 1: Introducción a Jetpack Compose

Diapositivas

Objetivos de este tema

• Conocer Jetpack Compose y las diferencias con el sistema tradicional basado en vistas (XML).
• Identificar las ventajas de utilizar Jetpack Compose para el desarrollo de interfaces.
• Explorar y comprender la relación entre Kotlin y Jetpack Compose.
• Establecer la estructura básica de un proyecto Compose.
• Distinguir el flujo de trabajo del compilador y el runtime en la composición de interfaces.
• Construir interfaces básicas utilizando funciones Composables y layouts principales.
• Entender el proceso de recomposición y cómo se gestiona el estado en Compose.

1.1. Fundamentos de Compose

1.1.1. ¿Qué es Jetpack Compose?

Jetpack Compose es el framework moderno de Android que permite construir interfaces de usuario de forma declarativa. Diseñado para escribir UI de forma más intuitiva, menos propenso a errores y totalmente integrable con el lenguaje de programación Kotlin.

Se basa en tres ideas clave:

• UI declarativa: la idea es describir qué se quiere mostrar, en lugar de dibujarlo con XML.
• Reactividad: se actualiza automáticamente cuando los datos cambian.
• Menos código: no se utiliza XML ni findViewById.

1.1.2. Diferencias entre el sistema basado en vistas y Jetpack Compose

1.1.3. Ventajas de Jetpack Compose

• Declarativo: se define la UI como función del estado, esto significa que la interfaz de usuario se crea a partir del estado de los datos actuales, si estos cambian la UI se actualiza.
• Menos código: elimina gran parte del boilerplate.
• Testing más sencillo: las funciones Composables pueden probarse directamente.
• Integración total con Kotlin.
• Mejora el rendimiento en muchos casos gracias a la recomposición eficiente.
• Animaciones fáciles de implementar.
• Migración progresiva: puede utilizarse junto con el sistema de vistas tradicional.

Ejemplo 1.1. UI reactiva con estado

Este ejemplo muestra un saludo reactivo. Al pulsar el botón, el estado (nombre) cambia y Compose actualiza automáticamente la interfaz, mostrando “Hola, Patricia” sin que haya que modificar directamente el Text.

 1import android.os.Bundle
 2import androidx.activity.ComponentActivity
 3import androidx.activity.compose.setContent
 4import androidx.activity.enableEdgeToEdge
 5import androidx.compose.foundation.layout.Arrangement
 6import androidx.compose.foundation.layout.Column
 7import androidx.compose.foundation.layout.Spacer
 8import androidx.compose.foundation.layout.fillMaxSize
 9import androidx.compose.foundation.layout.height
10import androidx.compose.foundation.layout.padding
11import androidx.compose.material3.Button
12import androidx.compose.material3.MaterialTheme
13import androidx.compose.material3.Text
14import androidx.compose.runtime.Composable
15import androidx.compose.runtime.getValue
16import androidx.compose.runtime.mutableStateOf
17import androidx.compose.runtime.remember
18import androidx.compose.runtime.setValue
19import androidx.compose.ui.Alignment
20import androidx.compose.ui.Modifier
21import androidx.compose.ui.unit.dp
22
23class MainActivity : ComponentActivity() {
24    override fun onCreate(savedInstanceState: Bundle?) {
25        super.onCreate(savedInstanceState)
26        enableEdgeToEdge()
27        setContent {
28            MaterialTheme {
29                SaludoInteractivo()
30            }
31        }
32    }
33}
34
35@Composable
36fun SaludoInteractivo() {
37    var nombre by remember { mutableStateOf("Javier") }
38    Column(
39        modifier = Modifier
40            .fillMaxSize()
41            .padding(16.dp),
42        verticalArrangement = Arrangement.Center, // Centra verticalmente
43        horizontalAlignment = Alignment.CenterHorizontally // Centra horizontalmente
44    ) {
45        Text(
46            text = "Hola, $nombre", style = MaterialTheme.typography.headlineMedium
47        )
48
49        Spacer(modifier = Modifier.height(8.dp))
50
51        Button(onClick = { nombre = "Patricia" }) {
52            Text(text = "Cambiar nombre")
53        }
54    }
55}

1.2. Arquitectura de Compose

1.2.1. Componentes clave: Runtime, UI, Compiler

Jetpack Compose se divide en tres módulos que trabajan conjuntamente y con tareas claramente definidas:

1. Compose Compiler: plugin del compilador de Kotlin que transforma las funciones etiquetadas como @Composable en código optimizado y eficiente para ser ejecutado sobre la plataforma Android. Además de inyectar la lógica interna necesaria para hacer que la UI sea reactiva y eficiente.
2. Compose Runtime: el motor de ejecución que mantiene el estado, gestiona las recomposiciones y decide qué UI debe actualizarse. Es capaz de saber qué partes de la UI deben volver a generarse.
3. Compose UI: contiene los elementos visuales como Text, Button, Row, Column, etc. Aquí está el trabajo directo del desarrollador para construir interfaces. A nivel interno trabaja con la librería gráfica de Android.

Estos tres módulos trabajan de forma desacoplada, lo que permite actualizar o extender cada parte por separado.

Modularidad y escalabilidad

Gracias a esta arquitectura desacoplada, Jetpack Compose es:

• Extensible: puedes crear tus propios elementos UI (@Composable personalizados) o incluso reemplazar partes del runtime si lo necesitas.
• Testable: puedes probar el runtime o la UI por separado.
• Ligero y escalable: puedes incluir solo los módulos necesarios.

Ejemplo 1.2. Modularidad

El siguiente ejemplo permite añadir una TopAppBar estableciendo el título de la aplicación a través del recurso String.

 1import androidx.compose.material3.TopAppBar
 2
 3...
 4
 5@Composable
 6fun MyAppTopAppBar(topAppBarText: String) {
 7    TopAppBar(
 8        title = {
 9            Text(
10                text = topAppBarText,
11                textAlign = TextAlign.Left,
12                modifier = Modifier
13                    .fillMaxSize()
14                    .wrapContentSize(Alignment.CenterStart),
15            )
16        }
17    )
18}

Para mostrarla añade la llamada al método saludoInteractivo().

 1@Composable
 2fun SaludoInteractivo() {
 3    var nombre by remember { mutableStateOf("Javier") }
 4
 5    MyAppTopAppBar(stringResource(R.string.app_name))
 6
 7    Column(
 8        ...
 9    )
10    ...
11}

Debes tener en cuenta que esta no será la mejor manera de mostrar una TopAppBar, pero de momento puede servir. Más adelante se verá el componente Scaffold.

1.3. Trabajo del compilador (IR y transformaciones)

1.3.1. Funcionamiento del compilador en Compose

Cuando se escribe una función etiquetada con @Composable, el compilador no la ejecuta tal cual. En lugar de eso, el plugin de Compose para Kotlin modifica esa función y añade el código adicional necesario para gestionar:

• El control de recomposición
• El seguimiento del estado
• La eficiencia en la actualización de la UI

1.3.2. Composable Compiler Plugin

• Se integra en el proceso de compilación de Kotlin.
• Convierte funciones @Composableen llamadas más complejas que pueden ser monitorizadas por el runtime.
• Inyecta parámetros invisibles como el Composer, que rastrea si una función necesita recomponerse o no.

Oberseva el siguiente método:

1@Composable
2fun Saludo(nombre: String) {
3    Text("Hola, $nombre")
4}

El resultado del compilador será algo parecido al siguiente método:

1fun Saludo(nombre: String, composer: Composer, changed: Int) {
2    if (composer.shouldRecompose(changed)) {
3        Text("Hola, $nombre")
4    }
5}

Este código resultado no se verá, pero es el encargado del funcionamiento óptimo y eficiente para Compose.

1.3.3. Transformación en el Intermediate Representation (IR)

El compilador de Compose trabaja en la fase de IR (Intermediate Representation) de Kotlin, dónde se realizarán transformaciones como:

• Inyección de lógica para recomposición condicional.
• División de Composables en múltiples fases si contienen múltiples niveles de recomposición.
• Manejo de claves y grupos para optimizar la reconstrucción de UI.

1.4. Conexión con el tiempo de ejecución

1.4.1. Cómo se interpretan y ejecutan los Composables

Cuando un método etiquetado como @Composable se llama desde setContent o desde otro Composable, no se dibujará directamente en pantalla, sino que entra en juego el runtime de Compose:

1. Interpretará la estructura del árbol Composable.
2. Evaluará si debe recomponer por cambios de estado.
3. Utilizará el sistema de slots para decidir qué partes de la UI deberán redibujarse.

1.4.2. Sistema de slots y control de recomposición

El sistema de slots (Slot Table) es la estructura interna encargada de:

• Representar cada nodo del árbol de la UI (Text, Button, Column…).
• Registrar qué parte del árbol corresponde a qué parte del estado.
• Guardar el orden y la identidad de cada elemento para poder hacer una recomposición eficiente.

Podría verse como un índice dinámico del árbol de UI.

La recomposición se produce cuando un valor observado cambia (por ejemplo, una variable del tipo remember { mutableStateOf(...) }), Compose marca los Composables afectados como sucios (dirty). En la siguiente fase del frame, solo esos Composables se vuelven a ejecutar.

El encargado de esto es el runtime, sin que el desarrollador tenga que intervenir manualmente.

¿Y cómo sabe Compose qué recomponer para ser eficiente?

• Cada método Composable recibe información sobre su “posición” en el árbol.
• El runtime asigna un grupo de recomposición a cada llamada Composable.
• Si el estado relevante cambia, solo ese grupo se vuelve a ejecutar.

Esto hace que Compose sea más eficiente que sistemas anteriores.

Ejemplo 1.4. Recomposición

 1@Composable
 2fun Contador() {
 3    var valor by remember { mutableStateOf(0) }
 4
 5    Column {
 6        Text("Valor: $valor")
 7        Button(onClick = { valor++ }) {
 8            Text("Incrementar")
 9        }
10    }
11}

¿Qué ocurre en este ejemplo cuando se pulsa el botón?

• Únicamente se recompondrá Text("Valor: $valor").
• El botón permanece intacto.
• Todo esto es decidido por el runtime con ayuda de la Slot Table.

1.5. Introducción a la UI de Compose

1.5.1. Estructura básica de un @Composable

En Jetpack Compose, la UI se construye a partir de los métodos marcados con la anotación @Composable. Deberás tener en cuenta que estos métodos:

• No devuelven nada (Unit).
• Describen cómo se mostrará la interfaz.
• Se pueden ser anidar y reutilizar.

Un ejemplo básico:

1@Composable
2fun Saludo(nombre: String) {
3    Text(text = "Hola, $nombre")
4}

Para mostrar la composición de esta etiqueta (Text), deberá llamarse desde dentro de setContent{} en una Activity.

1setContent {
2    Saludo("Jetpack Compose")
3}

1.5.2. Layouts básicos en Compose

Jetpack Compose ofrece varios contenedores flexibles para la organización de los elementos de UI. Los tres layouts básicos son:

Colum

Este layout organiza los elementos verticalmente, uno debajo de otro.

1@Composable
2fun EjemploColumn() {
3    Column(modifier = Modifier.padding(16.dp)) {
4        Text("Primera línea")
5        Text("Segunda línea")
6    }
7}

Row

Este organiza los elementos horizontalmente, de izquierda a derecha.

1@Composable
2fun EjemploRow() {
3    Row(modifier = Modifier.padding(16.dp)) {
4        Text("Izquierda")
5        Spacer(modifier = Modifier.width(8.dp))
6        Text("Derecha")
7    }
8}

Box

Este layout superpone los elementos, estando siempre encima de todos el último.

 1@Composable
 2fun EjemploBox() {
 3    Box(modifier = Modifier.size(100.dp)) {
 4        Text("Fondo", modifier = Modifier.align(Alignment.Center))
 5        Box(modifier = Modifier
 6            .size(40.dp)
 7            .background(Color.Red)
 8            .align(Alignment.BottomEnd))
 9    }
10}

Puedes probarlo en Android Studio y añadir justo antes de la etiqueta @Composable la etiqueta @Preview(showBackground = true) para ver una previsualización sin necesidad de ejecutar la aplicación.

1.6. Composición y recomposición

1.6.1. ¿Qué es la recomposición?

La recomposición de Jetpack Compose es el proceso por el cual el sistema vuelve a ejecutar funciones @Composable con el fin de actualizar la interfaz de usuario (UI) como respuesta a cambios en el estado. Esto permite que la UI muestre siempre el estado actual de la aplicación.

Por ejemplo, si una variable de estado cambia, Compose identificará las partes de la UI que dependen de ese estado y volverá a ejecutar solo los métodos @Composable para refrescar la pantalla.

1.6.2. Triggers de recomposición

La recomposición en Jetpack Compose se activa cuando:

• Se producen cambios en variables de estado: Al modificar una variable creada con mutableStateOf, Compose detecta el cambio y recompone los métodos que la utilizan.
• Hay nuevos valores en parámetros de funciones @Composable: Al llamar a un método @Composable con diferentes argumentos, se considera que su entrada ha cambiado y se recompone.
• Cambios en claves de listas: Al modificar la clave de un elemento en una lista, Compose puede recomponer ese elemento específico.

Destacar que Compose optimiza este proceso, recomponiendo únicamente las partes necesarias de la UI. Por ejemplo, si una lista de elementos cambia en orden pero no en contenido, Compose puede evitar recomponer los elementos que no han cambiado.

1.7. Estado y diferenciación inteligente

1.7.1. Estado observable

En Jetpack Compose, el estado representa cualquier dato que puede cambiar y debe reflejarse en la UI. Cuando un estado cambia, Compose vuelve a ejecutar los métodos @Composable que dependen de ese estado para actualizar la UI según corresponda.

Para gestionar el estado de una manera eficiente, Compose facilita varias APIs:

• remember: Almacena un valor en memoria durante la composición, útil para conservar el estado entre recomposiciones.

1val bandera = remember { false }

• mutableStateOf: Crea un objeto mutable que Compose observa, cuando cambia su valor se produce la recomposición.

1var texto by remember { mutableStateOf("") }

• derivedStateOf: Permite derivar un nuevo estado a partir de otros estados. Solo se actualizará cuando el resultado derivado cambie, lo que evita recomposiciones innecesarias.

1val esTextoLargo by remember {
2    derivedStateOf { texto.length > 10 }
3}

El uso de estas APIs pueden ayudar a optimizar la recomposición y evitar así, recomposiciones innecesarias.

1.7.2. Diferenciación y control inteligente

Compose optimiza las recomposiciones mediante un sistema de diferenciación inteligente. Lo que significa que solo las partes de la UI que dependen de un estado que ha cambiado se vuelven a componer.

Para aprovechar esta diferenciación:

• Minimiza el alcance del estado: Define los estados en los niveles más bajos posible del árbol de Composables, limitando así las recomposiciones.

• Evita operaciones costosas en composables: Realiza cálculos intensivos fuera de las funciones @Composable y pasa los resultados como parámetros.

• Usa remember y derivedStateOf adecuadamente: Estas funciones ayudan a conservar valores y evitar recomposiciones innecesarias.

Ejemplo 1.7. Recomposición

 1@Composable
 2fun EjemploEstado(paddingValues: PaddingValues) {
 3    var texto by remember { mutableStateOf("") }
 4    val esTextoLargo by remember {
 5        derivedStateOf { texto.length > 10 }
 6    }
 7
 8    Column(modifier = Modifier.padding(paddingValues)) {
 9        TextField(
10            value = texto,
11            onValueChange = { texto = it },
12            label = { Text("Ingrese texto") }
13        )
14        if (esTextoLargo) {
15            Text("El texto es largo")
16        }
17    }
18}

En este código de ejemplo, la variable esTextoLargo se actualiza únicamente cuando la longitud de texto cambie y supere la longitud establecida, evitando las recomposiciones innecesarias.

1.8. Naturaleza y propiedades de las funciones componibles

1.8.1. Reglas de los Composables

Las funciones @Composable son la parte principal de Jetpack Compose. Estas funciones deberán cumplir ciertas reglas que garanticen una UI eficiente y predecible:

• Anotación obligatoria: Toda función que construya UI deberá estar anotada como @Composable.
• No deben devolver valores: Como norma general, este tipo de funciones no devolverán ningún valor, deben describir como se mostrará la UI.
• Llamadas a otras composables: Pueden llamar a otras funciones @Composable para construir interfaces más complejas.
• Sin efectos secundarios: Deben ser “puras”, es decir, no deben modificar el estado global ni realizar operaciones que afecten fuera del alcance del método.

Estas reglas básicas garantizan que Compose pueda realizar una gestión eficientemente de la recomposición y mantener una UI coherente.

1.8.2. Efectos secundarios y pureza

En el paradigma declarativo de Compose, que las funciones @Composable sean puras es muy importante. Esto significa que, dadas las mismas entradas, siempre deben producir la misma salida sin causar efectos secundarios.

Si fuese necesario realizar operaciones que requieran efectos secundarios, Compose proporciona APIs específicas:

• LaunchedEffect: Ejecuta una operación de suspensión cuando una clave específica cambia.

1LaunchedEffect(key1 = clave) {
2    // Operación de suspensión
3}

• rememberUpdatedState: Permite acceder al valor más reciente de una variable dentro de un efecto.

• DisposableEffect: Realiza una operación cuando el Composable entra en la composición y limpia cuando sale.

Estas herramientas permiten manejar efectos secundarios de una manera controlada, manteniendo la integridad del sistema de composición.

1.8.3. Buenas prácticas

Para escribir funciones @Composable de manera eficiente:

• Mantén la pureza: No modifiques estados globales o realices operaciones que modifiquen elementos fuera del alcance de la función.

• Descomposición en funciones pequeñas: Facilita la lectura y reutilización del código.

• Evita recomposiciones innecesarias: Utiliza remember y derivedStateOf para memorizar valores y evitar recomposiciones innecesarias.

• Utiliza las APIs adecuadas para manejar efectos secundarios: Como LaunchedEffect o DisposableEffect.

Seguir estas prácticas garantiza una UI eficiente y un código fácil de mantener.

1.9. Estrategias de migración desde Views

1.9.1. Interoperabilidad entre Views y Compose

Jetpack Compose se diseño para coexistir con el sistema tradicional de vistas, basado en Views (XML), esto permite una migración progresiva y controlada.

1.9.2. AndroidView: Incluir Views en Compose

Es posible reutilizar componentes existentes basados en Views dentro de una interfaz construida con Compose, para ello se utiliza el Composable AndroidView.

 1@Composable
 2fun VistaPersonalizada() {
 3    AndroidView(
 4        factory = { context ->
 5            TextView(context).apply {
 6                text = "Texto desde una View tradicional"
 7            }
 8        }
 9    )
10}

Puede resultar útil cuando se necesita incorporar widgets personalizados, o bibliotecas que no tienen un equivalente en Compose.

1.9.3. ComposeView: Incluir Compose en layouts de Views

Por otra lado, existe la posibilidad de insertar contenido de Compose en una jerarquía de Views existente, para lo que se utilizará ComposeView.

Vista XML:

1<androidx.compose.ui.platform.ComposeView
2    android:id="@+id/compose_view"
3    android:layout_width="match_parent"
4    android:layout_height="wrap_content" />

Desde Kotlin:

1val composeView = findViewById<ComposeView>(R.id.compose_view)
2composeView.setContent {
3    Text("Contenido de Compose dentro de una View")
4}

De esta manera, es posible introducir nuevas funcionalidades haciendo uso de Compose sin reescribir código de las pantallas existentes.

1.9.4. Migración progresiva

Si te ves en la situación de ralizar una migración a Jetpack Compose, se recomienda realizarla de manera progresiva, permitiendo que Compose y Views coexistan en el mismo proyecto hasta que la aplicación esté completamente migrada.

1. Construir nuevas pantallas con Compose: Desarrolla las nuevas funcionalidades directamente con Compose, aprovechando sus beneficios desde el inicio.
2. Identificar componentes reutilizables: Crea bibliotecas de componentes UI comunes en Compose, fomentando así la reutilización y manteniendo una fuente única de verdad.
3. Reemplazar pantallas existentes gradualmente: Migra las pantallas existentes una a una, comenzando por las más sencillas, o aquellas que requieran cambios, asegurando una transición controlada.

Este enfoque mantiene la estabilidad de la aplicación mientras se produce el cambio a la nueva tecnología.

Consideraciones adicionales

• Compatibilidad con temas y estilos: Asegúrarte que los temas definidos en Views son compatibles, o adaptados a Compose para mantener una apariencia coherente.
• Gestión del ciclo de vida: Ten en cuenta el ciclo de vida de los componentes al integrar Compose y Views, especialmente en actividades y fragments.
• Pruebas y depuración: Actualiza las pruebas existentes y considera nuevas estrategias de testing para componentes en Compose.

1.10. Ciclo de vida de una aplicación móvil

1.10.1. Ciclo de vida de una Activity

Las aplicaciones móviles en Android están sujetas a un ciclo de vida gestionado por el sistema operativo:

• onCreate() -> Se inicializan componentes y UI.
• onStart() -> La Activity es visible, pero no interactúa con el usuario todavía.
• onResume() -> La Activity ya está en primer plano y permite interacciones con el usuario.
• onPause() -> Pierde el foco, momento en el que se puede guardar datos o pausar tareas.
• onStop() -> La Activity ya no es visible y se liberan recursos pesados.
• onDestroy() -> Se destruye la Activity y se limpian los recursos finales.

Conocer el ciclo de vida es vital para manejar recursos, permisos y situaciones como rotaciones, cambios de configuración o interrupciones.

1.10.2. Ciclo de vida de un Composable

El runtime de Compose dispone su propio ciclo de vida, este se compone de tres fases fundamentales:

1. Enter the Composition: punto de inicio, es cuando la función @Composable se ejecuta por primera vez.
2. Recomposition: vuelve a ejecutarse si el estado cambia, actualizando solo aquello que es necesario.
3. Leave the Composition: se elimina del árbol UI y se liberan los recursos asociados.

1.10.3. Relación entre ciclos

Aunque separados, estos ciclos interactúan entre sí en aplicaciones Compose:

• Las recomposiciones ocurren dentro del contexto de la Activity que controla la Composition.
• Si se destruye la Activity, se abandona la Composition y todos los efectos son cancelados(DisposableEffect, LaunchedEffect, etc.).
• Para reaccionar a eventos del ciclo de vida de la Activity dentro de Compose, se puede observar Lifecycle usando APIs como LifecycleEventEffect o lifecycle.currentStateAsState() del módulo lifecycle-runtime-compose.

Ejemplo práctico

 1@Composable
 2fun CiclosDeVida() {
 3    // Se utiliza lifecycleOwner para observar el ciclo de vida de la actividad o fragmento.
 4    val lifecycleOwner = LocalLifecycleOwner.current
 5    // Se obtiene el estado actual del ciclo de vida como un estado Compose.
 6    val estado = lifecycleOwner.lifecycle.currentStateAsState()
 7
 8    // Se muestra el estado actual del ciclo de vida.
 9    Log.d("CiclosDeVida", "Estado del ciclo de vida: ${estado.value}")
10    Text(
11        text = "Estado del ciclo de vida: ${estado.value}",
12        modifier = Modifier.padding(16.dp)
13    )
14}

Una posible salida por el Logcat sería:

2025...-18617 CiclosDeVida            es.javiercarrasco.examplet01b        D  Estado del ciclo de vida: RESUMED
2025...-18617 CiclosDeVida            es.javiercarrasco.examplet01b        D  Estado del ciclo de vida: STARTED
2025...-18617 CiclosDeVida            es.javiercarrasco.examplet01b        D  Estado del ciclo de vida: CREATED
2025...-18617 CiclosDeVida            es.javiercarrasco.examplet01b        D  Estado del ciclo de vida: RESUMED

Fuentes

• Documentación Jetpack Compose
• Cómo pensar en Compose
• Crea la arquitectura de tu IU de Compose
• Complemento de Gradle para el compilador de Compose
• Compose Runtime
• Compose Layouts
• Ciclo de vida de los elementos componibles
• El estado y Jetpack Compose
• Cómo pensar en Compose
• Estrategia de migración
• Cómo usar objetos View en Compose
• Cómo integrar Lifecycle con Compose

Tema 2: Interfaz de usuario

Diapositivas

Objetivos de este tema

• Comprender y aplicar modificadores de Jetpack Compose para ajustar el estilo, disposición y comportamiento de los elementos de la UI.
• Diseñar y personalizar layouts adaptados a diferentes contextos mediante Modifier.layout, medidas intrínsecas y restricciones.
• Analizar el proceso de renderizado en Compose.
• Utilizar componentes gráficos como Canvas y graphicsLayer para enriquecer la experiencia visual con formas, transformaciones y animaciones.
• Estructurar pantallas completas usando Scaffold, barras de herramientas (TopAppBar) y acciones flotantes (FAB).
• Crear listas eficientes y reutilizables con LazyColumn y LazyRow (alternativa moderna a RecyclerView).
• Implementar elementos interactivos esenciales como Snackbar, Toast, cuadros de diálogo (AlertDialog) y menús desplegables (Spinner).
• Gestionar la navegación entre pantallas utilizando tanto múltiples Activities, como la solución moderna basada en Navigation Compose.
• Evaluar cuándo conviene usar una arquitectura basada en múltiples actividades frente a una navegación controlada dentro de una única actividad.

2.1. Modificadores

Los modificadores en Jetpack Compose son objetos que permiten modificar, o extender el comportamiento y la apariencia de un elemento Composable, como puede ser su tamaño, padding, clics, animaciones o aspecto gráfico. Son un componente esencial para la creación de interfaces en Compose.

2.1.1. Sintaxis de encadenamiento

La sintaxis de los modificadores está basada en el encadenamiento de funciones, similar a la programación funcional. Se aplica utilizando el operador punto(.) sobre el parámetro modifier que acepta cada Composable.

1Text(
2    text = "Hola mundo",
3    modifier = Modifier
4        .padding(16.dp)
5        .background(Color.LightGray)
6        .clickable { /* acción */ }
7)

Este código de ejemplo, muestra un Text que tiene un padding, un fondo gris y responde al clic.

• Todos los modificadores devuelven un nuevo Modifier, lo que permite que su encadenamiento sea fluido.
• Como se verá a continuación, el orden importa.

2.1.2. Orden de aplicación y optimización

Destacar que en Compose, el orden de los modificadores afectará directamente al resultado visual y funcional.

1// El padding se aplica antes que el fondo.
2Modifier
3    .padding(16.dp)
4    .background(Color.Red)

Utilizando este orden se quedará el fondo ajustado al contenido sin incluir el padding. Sin embargo:

1// El fondo se aplica antes del padding.
2Modifier
3    .background(Color.Red)
4    .padding(16.dp)

En este caso el fondo abarca también el espacio del padding, ya que se aplicará primero.

Optimización

Jetpack Compose está diseñado para optimizar los modificadores comunes, como padding, size, offset o background, pero:

• Aplicar muchos modificadores anidados de manera innecesaria puede aumentar el número de nodos en la jerarquía (LayoutNode).
• Es recomendable agrupar modificadores relacionados y evitar repeticiones.

2.1.3. Modificadores internos vs personalizados

Modificadores internos

Los modificadores internos son los que proporciona Compose, entre los más comunes:

• padding()
• background()
• fillMaxWidth(), height(), size()
• clickable()
• offset()
• graphicsLayer()

Totalmente optimizados y recomendados cuando se ajustan a las necesidades.

Modificadores personalizados

Es posible crear tus propios modificadores cuando sea necesario encapsular lógica de presentación, o comportamiento, para simplificar, mejorar la legibilidad y reutilizar código. Por ejemplo:

1fun Modifier.tarjetaRedonda(): Modifier = this
2    .padding(8.dp)
3    .clip(RoundedCornerShape(16.dp))
4    .background(Color.White)

Este modificador personalizado se utilizaría de la siguiente forma:

1Box(modifier = Modifier.tarjetaRedonda())

Ejemplo 2.1. Modificadores

El siguiente ejemplo muestra el encadenamiento de modificadores, el orden en padding y background y un modificador personalizado (tarjetaRedonda).

Para verlo en funcionamiento puedes pegar este código en cualquier @Composable de Android Studio o en el componente de vista previa (@Preview).

 1@Composable
 2fun ModificadoresDemo() {
 3    var isHovered by remember { mutableStateOf(false) }
 4
 5    Column(
 6        modifier = Modifier
 7            .fillMaxSize()
 8            .padding(16.dp),
 9        verticalArrangement = Arrangement.spacedBy(20.dp)
10    ) {
11        Text("1. Orden: Padding antes de Background")
12        Box(
13            modifier = Modifier
14                .padding(16.dp)
15                .background(Color.Red)
16        ) {
17            Text(
18                "Texto con padding interno",
19                modifier = Modifier.padding(8.dp)
20            )
21        }
22
23        Text("2. Orden: Background antes de Padding")
24        Box(
25            modifier = Modifier
26                .background(Color.Green)
27                .padding(16.dp)
28        ) {
29            Text(
30                "Texto con fondo más grande",
31                modifier = Modifier.padding(8.dp)
32            )
33        }
34
35        Text("3. Modificador personalizado: tarjetaRedonda")
36        Box(
37            modifier = Modifier.tarjetaRedonda()
38        ) {
39            Text(
40                "Texto dentro de tarjeta",
41                modifier = Modifier.padding(16.dp)
42            )
43        }
44
45        val context = LocalContext.current
46        Text("4. Con `clickable` (logcat)")
47        Box(
48            modifier = Modifier
49                .tarjetaRedonda()
50                .clickable {
51                    Log.d("Compose", "Tarjeta clicada")
52                    Toast.makeText(context, "Tarjeta clicada", Toast.LENGTH_SHORT).show()
53                }
54        ) {
55            Text(
56                "Haz clic en esta tarjeta",
57                modifier = Modifier.padding(16.dp)
58            )
59        }
60    }
61}
62
63// Modificador personalizado
64fun Modifier.tarjetaRedonda(): Modifier = this
65    .padding(8.dp)
66    .clip(RoundedCornerShape(16.dp))
67    .background(Color.White)
68    .border(2.dp, Color.Gray, RoundedCornerShape(16.dp))

Para visualizar el ejemplo en la vista previa de Android Studio añade el siguiente código:

1@Preview(showBackground = true)
2@Composable
3fun VistaPreviaModificadores() {
4    ModificadoresDemo()
5}

2.2. Layouts

En este apartado se explicará cómo funcionan los layouts más comunes en Jetpack Compose, la creación de layouts personalizados utilizando Modifier.layout, y cuándo es adecuado utilizarlo frente a los layouts predeterminados como Column, Row o Box.

2.2.1. Introducción a los layouts

Los layouts en Jetpack Compose son componentes que organizan y posicionan otros Composables en la pantalla. Los layouts predeterminados más comunes son:

• Column: organiza los elementos en una columna vertical.
• Row: organiza los elementos en una fila horizontal.
• Box: superpone elementos uno encima de otro.

Estos layouts proporcionan una forma sencilla y eficiente de estructurar la interfaz de usuario. La estructura básica de un layout es la siguiente:

 1Column(
 2    modifier = Modifier.fillMaxSize(),
 3    verticalArrangement = Arrangement.Center,
 4    horizontalAlignment = Alignment.CenterHorizontally
 5) {
 6    Text("Elemento 1")
 7    Text("Elemento 2")
 8    Button(onClick = { /* Acción */ }) {
 9        Text("Botón")
10    }
11}

Entre las propiedades más comunes de los layouts se pueden encontrar:

Estos layouts son altamente personalizables mediante modificadores y permiten crear interfaces complejas de manera sencilla.

2.2.2. Layout personalizado con Modifier.layout

Modifier.layout permite crear Composables con disposición personalizada, es decir, que no dependen de los layouts predeterminados como Column, Row o Box, sino que definen sus propias medidas y ubicación del contenido.

Cómo crear layouts con reglas propias

Conceptos clave

• Modifier.layout { measurable, constraints -> ... } permite un control total sobre cómo se mide y posiciona un composable hijo.
• Trabaja directamente con el ciclo de composición y disposición: Measurable.measure() → Placeable.place().
• Se pueden implementar reglas personalizadas: alineaciones, offsets, centrar, limitar tamaño, aplicar rotaciones manuales, etc.

Estructura general de uso

1Modifier.layout { measurable, constraints ->
2    val placeable = measurable.measure(constraints)
3    layout(placeable.width, placeable.height) {
4        placeable.place(x = 0, y = 0)
5    }
6}

Detalles importantes:

• measurable: representa el contenido hijo.
• constraints: definen el tamaño máximo y mínimo permitido.
• placeable: resultado de medir el hijo.
• layout(width, height): define el tamaño del layout padre.
• place(x, y): define la posición del hijo.

Recomendaciones de uso

2.3. Árbol de Layout y fases de renderizado

En este punto tratará de entenderse como funciona internamente el sistema de renderizado en Jetpack Compose a través del layout tree, o LayoutNode, y las tres fases clave del proceso de renderizado: composición, disposición y dibujo.

2.3.1. ¿Qué es el Layout Tree?

En Jetpack Compose, cada elemento visible es representado como un nodo dentro del layout tree, o LayoutNode. Este árbol definerá:

• La jerarquía visual de la UI.
• Cómo se calculan y distribuyen tamaños.
• El orden en que se dibujan y posicionan los elementos.

Column
 ├── Text("Título")
 ├── Row
 │    ├── Icon
 │    └── Text("Etiqueta")
 └── Button("Aceptar")

Cada nodo tiene una relación padre-hijo, lo que permite al sistema navegar, componer y organizar la interfaz.

2.3.2. Fases de renderizado: composición, disposición, dibujo

Los tres pasos fundamentales que realiza Jetpack Compose para renderizar la UI:

Fase 1: Composición (measure)

• Cada nodo hijo se compone en función de una serie de restricciones (Constraints) que vienen impuestas por el padre.
• Debe decidirse el tamaño que debe ocupar el elemento.

Por ejemplo: Un Text dentro de un Box será compuesto con un ancho máximo igual al del elemento contenedor, el Box.

1val placeable = measurable.measure(constraints)

Fase 2: Disposición (place)

• Una vez compuesto, cada Placeable se colocará en una posición concreta (x, y) dentro del contenedor padre.
• Se decide dónde irá ubicado el hijo.

1placeable.place(x, y)

Fase 3: Dibujo (draw)

• Para finalizar, el sistema dibujará los elementos en pantalla.
• Se aplicarán colores, bordes, sombras, imágenes, animaciones, etc.

Se realiza después de componer y ubicar. En esta última fase se puede intervenir utilizando modificadores como:

1Modifier.drawBehind { ... }

Esquema del ciclo simplificado

Renderizado (UI declarativa)
        ↓
 Composición (measure)
        ↓
 Disposición (place)
        ↓
    Dibujo (draw)

2.3.3. Herramientas relacionadas

• Layout Inspector (Android Studio): permite ver el LayoutNode en tiempo real.
• Modifier.layout: permite intervenir directamente en measure y place.
• Modifier.drawBehind, Modifier.graphicsLayer: permiten intervenir en la fase de dibujo.

2.4. Intrínsecos y restricciones

Es necesario conocer que son las medidas intrínsecas en Jetpack Compose para saber cuándo es útil utilizarlas y cómo se pueden gestionar restricciones de tamaño, utilizando Composables como BoxWithConstraints.

2.4.1. Las medidas intrínsecas

Las medidas intrínsecas son una forma de calcular el tamaño mínimo o máximo que necesita un composable sin tener en cuenta las restricciones del padre. Se pueden usar para ajustar el layout en función del contenido, en lugar de limitarse por fillMaxWidth, wrapContentHeight, etc.

En Jetpack Compose, se pueden utilizar:

• Modifier.width(IntrinsicSize.Min): ajusta el ancho del componente al mínimo necesario para que su contenido no se recorte.
• Modifier.width(IntrinsicSize.Max): ajusta el ancho del componente al máximo permitido según el contenido más ancho de sus hijos.
• Modifier.height(IntrinsicSize.Min): ajusta la altura del componente al mínimo necesario para mostrar correctamente su contenido.
• Modifier.height(IntrinsicSize.Max): ajusta la altura del componente al máximo permitido según el hijo más alto o el contenido más grande.

El siguiente ejemplo permite visualizar cómo las medidas intrínsecas afectan el tamaño de los contenedores en función del contenido.

 1@Composable
 2fun IntrinsicSizeExample() {
 3    Row(
 4        modifier = Modifier
 5            .fillMaxWidth()
 6            .padding(16.dp),
 7        horizontalArrangement = Arrangement.SpaceEvenly
 8    ) {
 9        // 1. width(IntrinsicSize.Min)
10        Column(
11            modifier = Modifier
12                .width(IntrinsicSize.Min)
13                .background(Color(0xFFE1BEE7))
14                .padding(8.dp)
15        ) {
16            Text("Corto")
17            Text("Texto más largo")
18        }
19
20        // 2. width(IntrinsicSize.Max)
21        Column(
22            modifier = Modifier
23                .width(IntrinsicSize.Max)
24                .background(Color(0xFFBBDEFB))
25                .padding(8.dp)
26        ) {
27            Text("Corto")
28            Text("Texto más largo")
29        }
30
31        // 3. height(IntrinsicSize.Min)
32        Row(
33            modifier = Modifier
34                .height(IntrinsicSize.Min)
35                .background(Color(0xFFC8E6C9))
36                .padding(8.dp)
37        ) {
38            Text("Línea 1\nLínea 2")
39            HorizontalDivider(
40                color = Color.Black,
41                modifier = Modifier
42                    .fillMaxHeight()
43                    .width(2.dp)
44            )
45            Text("Texto más corto")
46        }
47
48        // 4. height(IntrinsicSize.Max)
49        Row(
50            modifier = Modifier
51                .height(IntrinsicSize.Max)
52                .background(Color(0xFFFFF9C4))
53                .padding(8.dp)
54        ) {
55            Text("Texto corto")
56            HorizontalDivider(
57                modifier = Modifier
58                    .fillMaxHeight()
59                    .width(2.dp),
60                thickness = DividerDefaults.Thickness, color = Color.Black
61            )
62            Text("Línea 1\nLínea 2\nLínea 3")
63        }
64    }
65}

2.4.2. Limitaciones de las medidas intrínsecas

• Coste alto de rendimiento: requieren múltiples pases de medición, por lo que se deben evitar en listas largas o layouts complejos.
• Es preferible el uso de BoxWithConstraints o Modifier.layout cuando el tamaño se predecible o haya que adaptarlo manualmente.

2.4.3. Uso de BoxWithConstraints

BoxWithConstraints permite acceder y modificar las restricciones de tamaño desde dentro del composable, lo que facilita la creación de interfaces adaptativas.

 1@SuppressLint("UnusedBoxWithConstraintsScope")
 2@Composable
 3fun CajaResponsiva() {
 4    BoxWithConstraints(
 5        modifier = Modifier.fillMaxWidth(),
 6        contentAlignment = Alignment.Center
 7    ) {
 8        if (maxWidth < 300.dp)
 9            Text("Pantalla pequeña")
10        else Text("Pantalla grande")
11    }
12}

Se puede usar maxWidth, minWidth, maxHeight y minHeight para realizar evaluaciones lógicas en tiempo de composición.

Diferencias

Para resumir, las medidas intrínsecas permiten que un composable se adapte a su contenido, debiéndose utilizar con cuidado por razones de rendimiento. BoxWithConstraints es preferible para layouts adaptativos o responsive.

2.5. Lienzo y gráficos

Ahora se verá cómo utilizar Canvas en Jetpack Compose para dibujar elementos gráficos personalizados como líneas, formas y colores, y comprender cómo se integra esta fase con el ciclo de composición.

2.5.1. ¿Qué es Canvas?

Canvas es un composable especial que permite dibujar directamente sobre la pantalla utilizando para ello primitivas gráficas:

• Líneas
• Rectángulos
• Círculos
• Texto
• Imágenes y gradientes

Esta API es similar a la de Canvas tradicional de Android (vistas), pero adaptada a Compose y Kotlin.

2.5.2. Uso básico de Canvas

El siguiente código dibuja un rectángulo azul de 100x100 en la posición (20,20).

 1import androidx.compose.foundation.Canvas
 2...
 3
 4@Composable
 5fun EjemploCanvas() {
 6    Canvas(modifier = Modifier.size(200.dp)) {
 7        drawRect(
 8            color = Color.Blue,
 9            topLeft = Offset(20f, 20f),
10            size = Size(100f, 100f)
11        )
12    }
13}

2.5.3. Primitivas

Ejemplo 2.5. Canvas sencillo

 1@Composable
 2fun EjemploCanvasSencillo() {
 3    Canvas(modifier = Modifier.size(200.dp)) {
 4        // Fondo gris claro
 5        drawRect(Color.LightGray, size = size)
 6
 7        // Círculo rojo en el centro
 8        drawCircle(
 9            color = Color.Red,
10            radius = 50f,
11            center = center
12        )
13
14        // Línea diagonal azul
15        drawLine(
16            color = Color.Blue,
17            start = Offset(0f, 0f),
18            end = Offset(size.width, size.height),
19            strokeWidth = 4f
20        )
21    }
22}

Si quieres que en lugar de dibujar un cuadro de 200 x 200, ocupe toda la pantalla, sustituye Modifier.size(200.dp) por Modifier.fillMaxSize(),

Visualización del ejemplo:

1@Preview(showBackground = true)
2@Composable
3fun VistaPreviaCanvas() {
4    EjemploCanvasSencillo()
5}

Como puedes observar, el uso de Canvases puramente decorativo, para dibujos personalizados, gráficos o animaciones. Debes tener en cuenta que el orden de las operaciones es importante, cada llamada a un draw... se superpone a las anteriores. Puedes combinar Canvas con otros layouts y modificadores (padding, clip, etc.).

2.6. Capas de dibujo y graphicsLayer

El modificador graphicsLayer en Jetpack Compose permite transformaciones a nivel de capa modificando propiedades como rotación, escala, alfa, traslación, etc.

2.6.1. ¿Qué es graphicsLayer?

• graphicsLayer crea una capa de composición separada para el elemento, permitiendo así transformaciones y efectos visuales que no afectan a otros nodos.
• Es ideal para animaciones, efectos complejos o para optimizar redibujados cuando se aplican múltiples transformaciones.

Propiedades comunes

Ejemplo 2.6. Rotar y escalar un Box

 1@Composable
 2fun EjemploGraphicsLayer() {
 3    Box(
 4        modifier = Modifier
 5            .size(200.dp)
 6            .graphicsLayer(
 7                rotationZ = 45f,       // Rotación 45 grados
 8                scaleX = 1.5f,         // Escala 1.5x en X
 9                scaleY = 1.5f,         // Escala 1.5x en Y
10                alpha = 0.8f,          // Opacidad 80%
11                shadowElevation = 16f  // Sombra
12            )
13            .background(Color.Red),
14        contentAlignment = Alignment.Center
15    ) {
16        Text("Transformado", color = Color.White, fontSize = 16.sp)
17    }
18}
19
20@Preview(showBackground = true)
21@Composable
22fun VistaPreviaGraphicsLayer() {
23    EjemploGraphicsLayer()
24}

2.6.2. Animaciones con graphicsLayer

Se puede utilizar animateFloatAsState para animar propiedades de la capa, como la rotación.

 1@Composable
 2fun EjemploAnimacionGraphicsLayer() {
 3    var rotar by remember { mutableStateOf(false) }
 4    val rotacionAnimada by animateFloatAsState(targetValue = if (rotar) 360f else 0f)
 5
 6    Box(
 7        modifier = Modifier
 8            .size(200.dp)
 9            .graphicsLayer(
10                rotationZ = rotacionAnimada,
11                scaleX = 1.2f,
12                scaleY = 1.2f
13            )
14            .background(Color.Blue)
15            .clickable { rotar = !rotar },
16        contentAlignment = Alignment.Center
17    ) {
18        Text("Haz clic", color = Color.White)
19    }
20}

2.7. Estructura visual con Scaffold y TopAppBar

El componente Scaffold se utiliza para estructurar pantallas completas en Compose, organizando elementos como TopAppBar, BottomAppBar, FloatingActionButton y el contenido principal de la UI mediante secciones.

2.7.1. ¿Qué es Scaffold?

Scaffold es un contenedor base que permite estructurar la pantalla mediante secciones predefinidas.

Permite organizar los elementos comunes de una app:

• Barra superior (topBar)
• Barra inferior (bottomBar)
• Botón flotante (floatingActionButton)
• Snackbar (snackbarHost)
• Contenido principal (content)

1Scaffold(
2    topBar = { TopAppBar(...) },
3    bottomBar = { BottomAppBar(...) },
4    floatingActionButton = { FloatingActionButton { ... } },
5    content = { paddingValues ->
6        // Contenido principal con padding
7    }
8)

2.7.2. Uso básico de Scaffold con TopAppBar

 1@OptIn(ExperimentalMaterial3Api::class)
 2@Composable
 3fun EjemploScaffoldBasico() {
 4    Scaffold(
 5        topBar = {
 6            TopAppBar(
 7                title = { Text("Mi App") },
 8                colors = topAppBarColors(
 9                    containerColor = MaterialTheme.colorScheme.primaryContainer,
10                    titleContentColor = MaterialTheme.colorScheme.primary,
11                )
12            )
13        },
14        content = { padding ->
15            Box(
16                modifier = Modifier
17                    .fillMaxSize()
18                    .padding(padding),
19                contentAlignment = Alignment.Center
20            ) {
21                Text("Contenido principal")
22            }
23        }
24    )
25}

2.7.3. Añadiendo BottomAppBar y FloatingActionButton

 1@OptIn(ExperimentalMaterial3Api::class)
 2@Composable
 3fun EjemploScaffoldBasico() {
 4    Scaffold(
 5        topBar = {
 6            TopAppBar(
 7                title = { Text("Mi App") },
 8                colors = topAppBarColors(
 9                    containerColor = MaterialTheme.colorScheme.primaryContainer,
10                    titleContentColor = MaterialTheme.colorScheme.primary,
11                )
12            )
13        },
14        bottomBar = {
15            BottomAppBar {
16                Text("Barra inferior", modifier = Modifier.padding(16.dp))
17            }
18        },
19        floatingActionButton = {
20            FloatingActionButton(onClick = { /* Acción */ }) {
21                Icon(Icons.Default.Add, contentDescription = "Añadir")
22            }
23        },
24        floatingActionButtonPosition = FabPosition.End,
25    ) { innerPadding ->
26        Column(
27            modifier = Modifier.padding(innerPadding),
28            verticalArrangement = Arrangement.spacedBy(16.dp),
29        ) {
30            Text(
31                modifier = Modifier.padding(8.dp),
32                text = """
33                    This is an example of a scaffold. It uses the Scaffold composable's parameters to create a screen with a simple top app bar, bottom app bar, and floating action button.
34
35                    It also contains some basic inner content, such as this text.
36
37                    You have pressed the floating action button 3 times.
38                """.trimIndent(),
39            )
40        }
41    }
42}

2.7.4. Organización de pantallas por secciones

• Scaffold divide cada parte de la UI en una sección, facilitando la legibilidad y el mantenimiento del código.
• Permite diseñar pantallas complejas con contenido adaptado a dispositivos (tablets, móviles).

2.8. Elementos básicos de la UI

Este punto tratará los componentes básicos de Jetpack Compose, haciendo una correlación con alugnos de sus equivalente en vistas (XML) de TextView, EditText, CheckBox, RadioButton, ImageView, controlando su estado, estilo e interacción.

2.8.1. Texto o etiqueta: Text (equivalente a TextView)

1@Composable
2fun EjemploText() {
3    Text(
4        text = "Hola, Compose!",
5        style = MaterialTheme.typography.titleLarge,
6        color = Color(0xFF1E88E5),
7        modifier = Modifier.fillMaxWidth().padding(8.dp)
8    )
9}

Se configura el estilo y color utilizando MaterialTheme y Color.

2.8.2. Cuadro de texto: TextField (equivalente a EditText)

 1@Composable
 2fun EjemploTextField() {
 3    var nombre by remember { mutableStateOf("") }
 4
 5    Column(modifier = Modifier.wrapContentHeight().padding(16.dp)) {
 6        TextField(
 7            modifier = Modifier.fillMaxWidth(),
 8            value = nombre,
 9            onValueChange = { nombre = it },
10            label = { Text("Nombre") },
11            placeholder = { Text("Escribe tu nombre") } // Equivalente a hint en XML
12        )
13        Spacer(Modifier.height(16.dp))
14        Text("Hola, $nombre")
15    }
16}

El estado está gestionado con remember y mutableStateOf, se usa de label para asignarle una etiqueta al campo y placeholder para indicar las instrucciones, sería el equivalente a hint para las vistas XML. El input es reactivo al estado, apareciendo el texto en un Text separado por un Spacer.

Puedes cambiar el estilo del cuadro de texto utilizando OutlinedTextField en lugar de TextField.

El cuadro de texto puede configurarse para distintos tipos de entrada, como correo electrónico, número, contraseña, etc., utilizando el parámetro keyboardOptions.

1import androidx.compose.ui.text.input.KeyboardType
2...TextField(
3    ...
4    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email)
5)

Cuando se utiliza KeyboardType.Password, es recomendable añadir visualTransformation = PasswordVisualTransformation() para ocultar el texto introducido.

1import androidx.compose.ui.text.input.PasswordVisualTransformation
2...TextField(
3    ...
4    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
5    visualTransformation = PasswordVisualTransformation()
6)

En definitiva, TextField es un componente versátil para entrada de texto en Compose, con múltiples opciones de personalización y gestión de estado. Su uso hace que aparezca el teclado virtual automáticamente al enfocarlo, pero en ocasiones puede ser necesario controlarlo manualmente mediante SoftwareKeyboardController, por ejemplo, para ocultarlo tras pulsar un botón. Para ello, se puede utilizar LocalSoftwareKeyboardController.current para obtener una instancia del controlador del teclado.

 1import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 2...@Composable
 3fun EjemploTextFieldConTeclado() {
 4    val keyboardController = LocalSoftwareKeyboardController.current
 5    var texto by remember { mutableStateOf("") }
 6
 7    Column(modifier = Modifier.padding(16.dp)) {
 8        TextField(
 9            value = texto,
10            onValueChange = { texto = it },
11            label = { Text("Escribe algo") },
12            modifier = Modifier.fillMaxWidth()
13        )
14        Spacer(Modifier.height(8.dp))
15        Button(onClick = {
16            keyboardController?.hide() // Oculta el teclado
17        }) {
18            Text("Ocultar teclado")
19        }
20    }
21}

2.8.3. Casilla: Checkbox

 1@Composable
 2fun EjemploCheckbox() {
 3    var marcado by remember { mutableStateOf(false) }
 4
 5    Row(
 6        verticalAlignment = Alignment.CenterVertically,
 7        modifier = Modifier.fillMaxWidth().padding(16.dp)
 8    ) {
 9        Checkbox(
10            checked = marcado,
11            onCheckedChange = { marcado = it }
12        )
13        Spacer(Modifier.width(8.dp))
14        Text(text = if (marcado) "Marcado" else "No marcado")
15    }
16}

Actualiza el estado al marcar la casilla y se puede añadir texto descriptivo junto con un Text.

2.8.4. Botón de opción: RadioButton

 1@Composable
 2fun EjemploRadioButton() {
 3    val opciones = listOf("Opción A", "Opción B", "Opción C")
 4    var seleccion by remember { mutableStateOf(opciones[0]) }
 5
 6    Column(Modifier
 7        .selectableGroup()
 8        .padding(16.dp)) {
 9        opciones.forEach { texto ->
10            Row(
11                verticalAlignment = Alignment.CenterVertically,
12                modifier = Modifier
13                    .fillMaxWidth()
14                    .selectable(
15                        selected = (texto == seleccion),
16                        onClick = { seleccion = texto },
17                        role = Role.RadioButton
18                    )
19                    .padding(8.dp)
20            ) {
21                RadioButton(
22                    selected = (texto == seleccion),
23                    onClick = null
24                )
25                Spacer(Modifier.width(8.dp))
26                Text(text = texto)
27            }
28        }
29        Text("Seleccionado: $seleccion", modifier = Modifier.padding(top = 8.dp))
30    }
31}

Se hace uso de selectableGroup para accesibilidad y agrupación y muestra la opción seleccionada.

2.8.5. Interruptor: Switch

 1@Composable
 2fun EjemploSwitch() {
 3    var activado by remember { mutableStateOf(false) }
 4
 5    Row(
 6        verticalAlignment = Alignment.CenterVertically,
 7        modifier = Modifier.fillMaxWidth().padding(16.dp)
 8    ) {
 9        Switch(
10            checked = activado,
11            onCheckedChange = { activado = it }
12        )
13        Spacer(Modifier.width(8.dp))
14        Text(text = if (activado) "Activado" else "Desactivado")
15    }
16}

Alterna valores booleanos de forma visual y accesible.

2.8.6. Imagen: Image (equivalente a ImageView)

 1@Composable
 2fun EjemploImage() {
 3    Image(
 4        painter = painterResource(id = R.drawable.ic_launcher_foreground),
 5        contentDescription = "Ejemplo de imagen",
 6        modifier = Modifier
 7            .size(150.dp)
 8            .clip(RoundedCornerShape(8.dp))
 9            .border(2.dp, Color.Gray, RoundedCornerShape(8.dp)),
10        contentScale = ContentScale.Crop
11    )
12}

Se pueden cargar imágenes desde recursos (R), además, se puede recortar (clip), redondear esquinas y aplicar borde.

2.8.7. Cargar imágenes desde URL con librerías externas

Para estos casos es necesario el uso de Internet, por lo que la aplicación deberá tener declarado dicho permiso en el Manifest. Además se añade un segundo permiso para permitir a estas librerías hacer comprobaciones del estado de la red.

1<uses-permission android:name="android.permission.INTERNET" />
2<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

GlideImage

GlideImage pertenece a la librería Glide, actualmente la integración oficial con Jetpack Compose está en fase beta experimental, por lo que su uso puede ser algo impredecible.

En primer lugar se deberá añadir la siguiente dependencia al Gradle y sincronizar.

1// Glide for image loading
2implementation("com.github.bumptech.glide:compose:1.0.0-alpha.1")

Para aplicar Glide, añade el siguiente método Composable:

 1@OptIn(ExperimentalGlideComposeApi::class)
 2@Composable
 3fun ImagenConGlide(imageUrl: String) {
 4    GlideImage(
 5        model = imageUrl,
 6        contentDescription = "Imagen con Glide",
 7        modifier = Modifier
 8            .padding(16.dp)
 9            .size(200.dp)
10            .clip(RoundedCornerShape(12.dp)),
11        contentScale = ContentScale.Crop
12    )
13}