Conceptos básicos. Árbol de UI
Compose es un esfuerzo ambicioso de varios equipos para reinventar el kit de herramientas de interfaz de usuario de Android.
Vamos a intentar construir una versión muy simple de Compose desde 0. Al inicio serán solo un par de clases, y poco a poco iremos complicándolo hasta llegar a algo parecido a lo que es Compose realmente.
En esencia, Compose está diseñado para construir y mantener de manera eficiente estructuras de datos en forma de árbol. Uno de los casos de uso más convincentes para este tipo de sistema es construir interfaces de usuario (UI). Las interfaces de usuario suelen ser estructuras de datos en forma de árbol que cambian con el tiempo.
Definamos una estructura de datos básica similar a un árbol que podamos usar para simplificar nuestros ejemplos a partir de este punto.
abstract class Node {
val children = mutableListOf<Node>()
}
enum class Orientation { Vertical, Horizontal }
class Stack(var orientation: Orientation) : Node()
class Text(var text: String) : Node()Aquí solo tenemos dos clases primitivas: Stack y Text. Ambas clases heredan de la clase abstracta Node por lo que contendrán una lista de objetos Node llamada children .
Stack va a representar un contenedor que de objetos Node que definirá una orientación, y Text simplemente será una clase que contiene un texto.
En realidad, probablemente habría más, y probablemente tendrían más propiedades y métodos, etc., pero nuevamente, vamos a mantenerlo simple.
Ahora necesitamos una forma de tomar un árbol de Nodos y representarlos en píxeles en la pantalla. Cómo esto no es importante para este artículo, supongamos que tenemos una función de la siguiente forma:
fun renderNodeToScreen(node: Node) { /* ... */ }Un “Hola mundo” en esta aplicación podría verse así:
fun main() {
renderNodeToScreen(Text("Hello World!"))
}Bien. Entendido esto, en el siguiente post complicaremos el ejemplo un poco más e iremos acercándonos iterativamente a una implementación más realista de Compose.
Por último, recordar que este post es prácticamente una traducción literal de:
Si quieres escribirme puedes contactarme vía Linkedin a través de este link.
