Unit 1: Java Reinforcement

1. Important Java concepts

In this part, we are going to have an overview of some important Java concepts that you should be familiar with. If you feel that you need to go more in depth with some of these concepts (or some others) regarding Java, you can have a look at the complete Java course.

Object Oriented Programming

Estimated time: 2,5 hours

• In these slides, you have a quick overview of some basic concepts regarding OOP: how to define classes and objects in Java, and the different relationships between classes: associations, inheritance…
• Here you can find the proposed exercises associated to the slides.

Collection management

Estimated time: 2 hours

• In these slides, you have a quick overview of some concepts regarding collections: lists, maps, trees and so on.
• Here you can find the proposed exercises associated to the slides.

I/O management

Estimated time: 2,5 hours

• In these slides, you have a quick overview of how to deal with text files and the filesystem in Java.
• Here you can find the proposed exercises associated to the slides.

2. Functional programming

In this part, we are going to learn some concepts regarding functional programming, a declarative paradigm to face some programs.

Lambda expressions

Estimated time: 1 hour

• In this document, you have a quick overview of what functional programming is, and its main principles.
• In this document, you can learn about lambda expressions. What they are and how to implement them in Java. Do Exercises 1 and 2 to practice with these expressions.

Stream management

Estimated time: 2 hours

• In this document, you will learn how to manage collections with streams. There are some basic concepts regarding intermediary and final operations with streams, that you can practice with Exercises 1 and 2. Then, you can get more in depth with some advanced concepts and Exercise 3.

3. JavaFX application development

In this part, we are going to learn how to implement GUIs (Graphical User Interfaces) using JavaFX.

JavaFX fundamentals

• In this document, you have a quick overview about how to create JavaFX projects from IntelliJ, and how to run and test your first project, including the additional software that you may need to install and setup.
• Once that you have setup JavaFX in IntelliJ, in this document you have an overview of the most important elements in JavaFX applications: you will read about the different containers and controls available in JavaFX, how to place them in our application, and how to synchronize them with our Java code. You have Exercises 1 and 2 to start placing components in different applications. Then, you will learn how to manage events to respond to user interaction. Exercises 3 to 6 help you create JavaFX applications including events (Exercise 3 is a YouTube tutorial to implement a simple calculator using JavaFX). Finally, you will learn some additional elements, such as dialogs, to show popups or alerts to the user. Exercises 7 and 8 let you practice with these dialogs.

Advanced JavaFX features

• In this document, you will learn some advanced concepts regarding JavaFX applications, although some of them will not be explained in class:
  • First of all, you will learn how to add a window closing event to our application, to prevent user from closing without saving changes.
  • Next section talks about how to add CSS styles to our JavaFX application. This section will not be explained in class.
  • Section 3 is a really important one. It shows how to develop applications with multiple views, and how to swap views in the same stage, or between different stages. Exercise 2 lets you practice with this concept.
  • Section 4 explains how to add different charts to our applications. Exercise 3 is a simple exercise to add a bar chart.
  • Section 5 shows how to use some advanced controls, such as tables, which are an important element in applications that need to show large amounts of information. We will also learn how to work with dates and images in JavaFX applications.
  • Finally, section 6 is a step-by-step project to practice with some of the most important concepts seen so far. Try to follow the steps given to build the HealthyMenu application. You can also follow this video to complete it. Then, do Exercise 4 to finish it.
  • Optionally, there’s an additional section that explains how to add animations to JavaFX projects. We are not going to cover this section in class.

Unit 2: Concurrent Programming

1. First steps with threads

In this part, we are going to learn the basics of concurrent programming in Java, focusing on how to create and manage multiple threads in an application.

Introduction to concurrent programming

In this document, you have an introduction to concurrent programming. You will learn the concept of process and thread, their similarities and differences, and the most basic principles of concurrent programming.

• In this document, you can learn how to instantiate external processes in Java (for instance, open a Notepad instance in Windows). You have Exercise 1 and 2 to practice with processes.

Basic thread management

• In this document, you will learn how to create threads in Java programs in some different ways, and how to perform some basic tasks with them, such as pause them or stop them, along with accessing to some basic information like the thread name or status. You have Exercises 1 to 4 to practice with these basic steps. Also you have some additional exercises.

Thread coordination and synchronization

• In this document, you will learn some techniques to coordinate and synchronize multiple threads:
  • First of all, you will learn how to join threads, so that a thread must wait for another thread to finish before it starts. Do Exercises 1 and 2 to practice with this concept.
  • Then, you will learn the need of synchronizing threads when they must access a shared value. Try to copy the example shown in the contents to see the problem in action, and then try to apply the synchronization mechanisms mentioned. Do Exercises 3 and 4 to practice with this.
  • Next step is not compulsory. It talks about how to establish thread priorities in some different ways, according to your operating system. This way, some threads can run faster than another threads, if they have higher priorities. Exercises 5 and 6 are focused on this concept.
  • The last section introduces you to the producer-consumer problem, in which some threads (consumers) must wait another threads (producers) to produce something before consuming it, and these threads (producers) must wait for the others (consumers) to consume before producing next items. There is a sample with shared data that you can try to copy and test, and then you can try Exercise 7 to deal with this problem.

2. Advanced thread management

In this part we are going to learn some advanced strategies for thread management, such as using thread executors, atomic variables and, concurrent collections.

Advanced thread coordination and synchronization

Estimated time: 3 hours

• In this document, you have some more recent and advanced strategies to deal with threads:
  • First of all, you will learn about thread executors, which let us manage a bunch of threads as a pool, so that an object is in charge of starting threads and managing statistics about current active threads and so on. There are no exercises about this section, but you will see some examples about how to use executors in later documents.
  • Then, the document talks about two alternatives to launch threads if we want to return something (callables), or if we don’t want to block main thread waiting for other threads to finish (completable futures). Exercises 1 and 2 let you practice these concepts. Also, you can download the source code of the examples provided in this section to try them.
  • Next section is optional for this module, and it talks about how to use Lock interface and some subtypes of it, such as ReadWriteLock to easily synchronize object access, even if we want to have two types of threads over this object: one for reading values and another one for writing or updating values. You can do Exercises 3 and 4 to practice with this.
  • Finally, there’s a section to read about the Fork/Join framework, which let us divide a complex task among multiple threads (fork) and wait for them to finish and show the results (join). You can do Exercise 5 of this subsection.

Threads and shared data

Estimated time: 2 hours

• In this document, you will see several strategies for handling shared data in threads, depending on whether you want to manage simple values, arrays, or collections. You will learn how to use atomic variables for simple data, as well as how to use special thread-safe collection types. Additionally, you will learn the difference between synchronized and concurrent collections, an essential concept in terms of performance. You can complete Exercises 1 and 2.

3. Threads in JavaFX applications

In this part, we are going to learn how to use threads in JavaFX applications, as there are certain aspects we need to consider that were not necessary in console applications.

Estimated time: 3 hours

• In this document, you will find the contents of this session:
  • First, the problem is introduced: we cannot access graphical elements, such as text fields or labels, from secondary threads in JavaFX — only from the main JavaFX application thread.
  • Next, we explore how to solve this issue using the Platform.runLater method, which allows secondary threads to delegate tasks (such as updating UI controls) to the main thread. This approach is suitable if your application does not require advanced thread management. You can complete Exercise 1 to practice this technique.
  • Then, the document covers the JavaFX concurrency framework and the various interfaces and classes it provides for handling threads in a more robust and professional way. You can use Service instances to launch background tasks and respond to events based on whether the task completed successfully, was cancelled, or failed. To gain hands-on experience with different types of services — such as simple services and scheduled services — you can complete Exercises 2 and 3.

Unit 3: Basic Client-Server Communications - Sockets

1. First steps with Java sockets

In this part, we are going to learn how to communicate between two parts of an application using Java sockets. These parts can run on the same machine or (more commonly) on different machines connected via a network or the Internet.

Estimated time: 2,5 hours

• In this document, you will find all the content for this session:
  • First, you will be introduced to Java sockets and the two main types: TCP and UDP.
  • Next, you will learn how to implement basic client and server sockets using both the TCP and UDP protocols, with simple examples for each. Exercises 1 and 2 will allow you to practice these basic connections.
  • Finally, you will explore how to use threads in socket applications to handle multiple client connections simultaneously. Exercise 3 guides you through adding threading to your client-server socket applications.

2. Some advanced concepts about sockets

In this part, you will learn advanced strategies for working with Java sockets.

Estimated time: 4 hours

• In this document, you will find all the content for this session:
  • First, you will learn how to serialize complex objects in socket applications. To do this, you will need to create a third project — separate from the client and server projects — to store the data that will be shared between them. This shared project must then be linked to both the client and server projects. Object serialization can be performed using either TCP or UDP sockets. Exercises 1 and 2 will allow you to practice serialization with each protocol.
  • Next, you will explore multicast sockets and their main purpose: sending messages simultaneously to all clients connected to a multicast group. To practice with multicast sockets, complete Exercises 3 and 4.

Unit 4: Service Development and Access

• Configuring the FTP Service
• Connecting to an FTP Server
• Basic service access from Java
• A complete example.
• Sending Emails Using the SMTP Protocol.
• PDF creation.
• Additional Libraries.
• Different Stages

Tema 0: Introducción a Kotlin

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, 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

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. Transformacó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 contador = remember { mutableStateOf(0) }

• 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.

Consejo, evitar operaciones complejas en métodos @Composable, los métodos @Composable deben ser rápidos y sin efectos secundarios. Las operaciones intensivas deben realizarse fuera de estas funciones y sus resultados deben pasarse como parámetros.

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() {
 3    var texto by remember { mutableStateOf("") }
 4    val esTextoLargo by remember {
 5        derivedStateOf { texto.length > 10 }
 6    }
 7
 8    Column(modifier = Modifier.padding(16.dp)) {
 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

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. 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.

2.2.1. 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)
• Modifier.width(IntrinsicSize.Max)
• Modifier.height(IntrinsicSize.Min)
• Modifier.height(IntrinsicSize.Max)

El siguiente ejemplo asegura que ambos textos tengan la altura del más alto, gracias a IntrinsicSize.Min.

 1@Composable
 2fun DemoIntrinsicSize() {
 3    Row(
 4        modifier = Modifier.height(IntrinsicSize.Min)
 5    ) {
 6        Text(
 7            text = "Texto alto",
 8            modifier = Modifier
 9                .background(Color.Red)
10                .padding(8.dp)
11        )
12        HorizontalDivider(
13            color = Color.Black,
14            modifier = Modifier
15                .fillMaxHeight()
16                .width(1.dp)
17        )
18        Text(
19            text = "Texto más corto",
20            modifier = Modifier
21                .background(Color.Green)
22                .padding(8.dp)
23        )
24    }
25}

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