Alineación: la guía es un número, no una idea

La palabra alineación arrastra una intuición gráfica —pegar cosas a un lado— que resulta ser un caso particular de algo bastante más general y más potente. En SwiftUI, una alineación es una pregunta que el contenedor le hace a cada hijo, y la respuesta es siempre un número: la distancia, medida desde el borde inicial de esa vista y a lo largo de un eje, del punto que la vista considera su punto de anclaje para esa alineación. El contenedor recoge todos esos números y desplaza a los hijos hasta que los puntos correspondientes quedan sobre la misma recta. Que ese número sea calculable, y sobre todo que tú puedas calcularlo, convierte un mecanismo aparentemente decorativo en el único camino que ofrece el framework para relacionar geométricamente vistas que no son hermanas.

Una guía es un número

Los tipos HorizontalAlignment y VerticalAlignment no son enumeraciones cerradas: son estructuras que envuelven un identificador, y cada valor conocido lleva asociada una función que, dada la geometría de una vista, devuelve una distancia. Las implementaciones por omisión son las que esperarías: la guía .leading vale cero, la .center vale la mitad del ancho, la .trailing vale el ancho entero; en vertical, .top vale cero y .bottom vale el alto. Las dos interesantes son .firstTextBaseline y .lastTextBaseline, que devuelven la distancia hasta la línea base tipográfica y por eso alinean textos de tamaños distintos por donde se apoyan las letras y no por su caja.

VStack(alignment: .leading) {
    Text("Nombre")
    Text("Un valor bastante mas largo")
}

Lo que ocurre aquí es literal: el VStack pide a cada hijo su guía .leading, los dos responden cero, y el contenedor los coloca de modo que ambos ceros caigan sobre la misma vertical. La alineación solo se percibe cuando hay espacio sobrante en el eje transversal; si todos los hijos midieran lo mismo, cualquier alineación daría el mismo dibujo.

Los contenedores que superponen, y también el frame, necesitan resolver los dos ejes a la vez, y por eso reciben un Alignment completo que empareja una guía horizontal con una vertical:

ZStack(alignment: .bottomTrailing) {
    imagen
    insignia
}

Color.clear.frame(width: 200, height: 120)
    .overlay(alignment: .topLeading) { etiqueta }

La lectura es la misma en los dos casos: se pregunta a cada participante por sus dos guías y se desplaza hasta que ambos pares de números coincidan. Que el mecanismo sea idéntico para superponer, para apilar y para alinear dentro de un frame es lo que permite razonar sobre todos ellos con una sola regla.

Sobrescribir la guía de una vista

El modificador alignmentGuide recibe la alineación cuya respuesta quieres cambiar y una clausura que devuelve el número nuevo. La clausura recibe un ViewDimensions, que te da el width, el height y, por subíndice, el valor de cualquier otra guía de esa misma vista, de modo que puedes expresar la nueva respuesta en función de las existentes.

HStack(alignment: .top) {
    Rectangle().frame(width: 40, height: 40)
    Rectangle()
        .frame(width: 40, height: 80)
        .alignmentGuide(.top) { d in d[.bottom] }
}

El segundo rectángulo responde ahora que su punto superior está a ochenta puntos de su borde superior. El HStack se lo cree, porque no tiene forma de comprobarlo, y lo desplaza hacia arriba hasta que ese punto coincida con la línea de alineación. El efecto visual es que el rectángulo alto sube y sobresale del contenedor. Aquí está la primera lección importante del mecanismo: la guía no valida nada. Es un número que la vista declara sobre sí misma, y declarar un número absurdo produce un desplazamiento absurdo, no un error.

La segunda lección es más sutil. Dentro de la clausura puedes consultar d[explicit: .top], que devuelve un opcional con el valor únicamente si alguien lo estableció explícitamente, distinguiéndolo del valor por omisión. Esa distinción entre guía explícita y guía calculada es la que hace posible el mecanismo de la última sección.

flowchart TB
cont[El contenedor pide la guia a cada hijo] --> h1[Hijo uno responde su valor por omision]
cont --> h2[Hijo dos responde un valor sobrescrito]
h1 --> linea[El contenedor traza una recta comun]
h2 --> linea
linea --> desp[Desplaza cada hijo hasta que su punto cae en la recta]
style cont fill:#f5c2e7,color:#11111b
style h2 fill:#f9e2af,color:#11111b
style desp fill:#a6e3a1,color:#11111b

Definir una alineación propia

Una alineación nueva es un tipo que conforma a AlignmentID y una constante estática que lo envuelve. El único requisito del protocolo es defaultValue, que responde por todas las vistas que no hayan sobrescrito la guía:

extension VerticalAlignment {
    private enum CentroDelIcono: AlignmentID {
        static func defaultValue(in d: ViewDimensions) -> CGFloat {
            d[VerticalAlignment.center]
        }
    }
    static let centroDelIcono = VerticalAlignment(CentroDelIcono.self)
}

El valor por omisión debe elegirse con cuidado, porque es la respuesta que darán todas las vistas del contenedor que no participen conscientemente en tu alineación. Delegar en una guía estándar, como aquí en el centro, suele ser la elección sensata: garantiza que introducir una alineación propia no descoloque nada de lo que ya estaba.

Alinear entre contenedores distintos

Aquí es donde el mecanismo deja de ser cosmético. Recuerda la limitación estructural del sistema: nadie ve más allá de sus hijos inmediatos, así que no existe forma directa de pedir que una etiqueta de una fila quede alineada con una etiqueta de otra fila. Las alineaciones personalizadas son la vía de escape, y funcionan por una razón concreta: un contenedor expone hacia arriba las guías que sus hijos hayan fijado explícitamente, combinándolas con combineExplicit. Es decir, una alineación declarada en el nieto viaja hacia el abuelo.

struct Ficha: View {
    var body: some View {
        VStack(alignment: .centroDelIcono) {
            HStack {
                Text("Un rotulo muy largo")
                Image(systemName: "star")
                    .alignmentGuide(.centroDelIcono) { d in d[VerticalAlignment.center] }
            }
            HStack {
                Text("Corto")
                Image(systemName: "heart")
                    .alignmentGuide(.centroDelIcono) { d in d[VerticalAlignment.center] }
            }
        }
    }
}

Cada HStack contiene un icono que fija la guía personalizada. Al no tener ningún otro hijo que la declare, cada fila expone hacia arriba el valor de su icono, medido en su propio sistema de coordenadas. El VStack externo, que alinea por esa misma guía, desplaza cada fila horizontalmente hasta que los dos iconos quedan sobre la misma vertical, aunque los rótulos que los preceden midan cosas muy distintas. Ninguna vista ha sabido nada de la otra: la información viajó como un número, hacia arriba, en la respuesta de cada fila.