Auto Layout: qué es, maquetación adaptativa de interfaces iOS

¿Qué es Auto Layout?

Auto Layout es el sistema de maquetación adaptativa de Apple que utiliza restricciones matemáticas (constraints) para posicionar elementos UI. A diferencia de la maquetación basada en frames (frame-based layout), donde cada elemento tiene coordenadas fijas x, y, width, height, Auto Layout describe relaciones entre elementos: «el botón está a 8pt del borde derecho del padre» o «el ancho del campo de texto es igual a la mitad del ancho de la pantalla». El mecanismo se basa en el algoritmo Cassowary, desarrollado en la University of Washington (Greg J. Badros, 1999) e implementado por Apple en iOS 6. Cassowary resuelve un sistema de desigualdades lineales con prioridades — Required (1000), Default High (750), Default Low (250) — permitiendo gestionar conflictos de restricciones. Auto Layout soporta tres tipos de tamaño: intrinsic (tamaño natural del elemento determinado por el contenido), explicit (restricción definida explícitamente) y compressible/stretchable (modo elástico mediante Content Hugging Priority y Compression Resistance Priority).

Intrinsic Content Size y Prioridades

Cada elemento UI en Auto Layout tiene un Intrinsic Content Size — un tamaño natural determinado por su contenido. Para UILabel esto depende del texto y la fuente, para UIImageView — de las dimensiones de la imagen. Content Hugging Priority (resistencia al estiramiento) y Compression Resistance Priority (resistencia a la compresión) controlan el comportamiento del elemento cuando cambia el espacio disponible. Valores estándar: 251 para hugging y 749 para compression resistance. Si dos elementos compiten por espacio, la prioridad determina cuál se estira primero. Comprender estas prioridades es clave para resolver Ambiguous Layout (diseño ambiguo), que Xcode resalta en el depurador.

Anatomía de un Constraint

Un constraint se describe mediante la ecuación: view1.attribute = multiplier × view2.attribute + constant. Los atributos incluyen leading, trailing, top, bottom, centerX, centerY, width, height, firstBaseline, lastBaseline. Multiplier se usa para relaciones proporcionales (ancho de view1 = 0.5 × ancho de superview). Constant define un desplazamiento fijo (leading = superview.leading + 16). Las herramientas de Interface Builder permiten crear constraints visualmente mediante Ctrl-arrastre, pero los diseños complejos requieren creación programática mediante NSLayoutConstraint o VFL (Visual Format Language), que Apple recomienda reemplazar por NSLayoutConstraint desde iOS 9.

Cómo funcionan los Constraints en iOS

El sistema de constraints se resuelve como un problema de programación lineal: el algoritmo Cassowary encuentra la disposición óptima de todos los elementos que satisface todas las restricciones considerando sus prioridades. Si los constraints se contradicen entre sí, se produce un Unsatisfiable Layout — una excepción que Xcode registra con una descripción detallada del conflicto. Si no hay suficientes constraints para determinar la posición de al menos un elemento, se produce Ambiguous Layout — los elementos se muestran en posiciones arbitrarias. Apple recomienda un conjunto mínimo: para cada elemento deben definirse position (x, y) y size (width, height) — explícitamente o mediante intrinsic content size. Los constraints pueden ser de primera clase: el elemento líder (por ejemplo, superview) y el seguidor (vista hija) crean una jerarquía.

Algoritmo Cassowary y prioridades

Cassowary utiliza el método Sequential Quadratic Programming para resolver sistemas de desigualdades lineales. Cada constraint tiene una prioridad de 1 a 1000. Required (1000) es una restricción obligatoria; si no se puede cumplir, la aplicación falla con NSConstraintException. Default High (750) es recomendada; Default Low (250) es la menos importante. Durante un conflicto, Cassowary relaja las restricciones de menor prioridad. Por ejemplo, si dos elementos requieren un ancho fijo pero la pantalla es demasiado estrecha, se relaja el constraint de menor prioridad. En Xcode Debug View Hierarchy (herramienta de depuración disponible desde Xcode 6) solo resalta problemas con constraints Required — el resto se manejan sin error.

UIStackView: gestión automática de Constraints

UIStackView es un contenedor presentado en iOS 9 (2015) que crea y gestiona automáticamente constraints para arrangedSubviews anidadas. UIStackView soporta dos ejes: horizontal y vertical. La configuración de distribution determina la distribución del espacio: fill (relleno proporcional según hugging priority), fillEqually (tamaños iguales), fillProportionally (proporcional al intrinsic content size), equalSpacing (espaciado igual), equalCentering (distancias iguales entre centros). Alignment define la alineación transversal: fill, leading, center, trailing (para horizontal) o fill, top, center, bottom (para vertical). UIStackView gestiona automáticamente spacing, alineación de línea base y adaptación a Dynamic Type.

import UIKit

class StackViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let stack = UIStackView()
        stack.axis = NSLayoutConstraint.Axis.vertical
        stack.distribution = .fillEqually
        stack.spacing = 8
        stack.translatesAutoresizingMaskIntoConstraints = false
        
        let label = UILabel()
        label.text = "Auto Layout Guide"
        label.font = UIFont.preferredFont(forTextStyle: .headline)
        
        let button = UIButton(type: .system)
        button.setTitle("Apply", for: .normal)
        
        stack.addArrangedSubview(label)
        stack.addArrangedSubview(button)
        view.addSubview(stack)
        
        NSLayoutConstraint.activate([
            stack.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            stack.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            stack.leadingAnchor.constraint(greaterThanOrEqualTo: view.leadingAnchor, constant: 16),
            stack.trailingAnchor.constraint(lessThanOrEqualTo: view.trailingAnchor, constant: -16)
        ])
    }
}

El código crea un UIStackView vertical con dos elementos (UILabel y UIButton), distribuidos uniformemente (fillEqually) con un espaciado de 8pt. El stack se centra en la pantalla con márgenes de al menos 16pt desde los bordes. translatesAutoresizingMaskIntoConstraints = false es obligatorio al crear constraints programáticamente — sin él, Auto Layout no funciona. En IT Sectr, UIStackView se usa en el 80% de las pantallas de proyectos iOS para construir formularios adaptativos, listas de configuración y tarjetas.

Stack Views anidados

UIStackView pueden anidarse: un stack horizontal dentro de uno vertical es un patrón estándar para diseños complejos. El stack externo gestiona filas, el interno gestiona columnas dentro de cada fila. La combinación de axis, alignment y distribution en cada nivel proporciona una flexibilidad prácticamente ilimitada sin un solo constraint manual. Apple recomienda UIStackView como la herramienta de diseño principal en UIKit, recurriendo a NSLayoutConstraint manual solo para casos no cubiertos por stacks: vistas superpuestas, posicionamiento preciso de píxeles, animación personalizada de bounds.

NSLayoutConstraint: creación programática de restricciones

NSLayoutConstraint es una API programática para crear restricciones individuales en código. Cada constraint se crea mediante un inicializador con parámetros: item, attribute, relatedBy, toItem, attribute, multiplier, constant. Desde iOS 9, Apple presentó Anchor API — una sintaxis más legible mediante las propiedades view.leadingAnchor, view.trailingAnchor, view.topAnchor, view.bottomAnchor, view.centerXAnchor, view.centerYAnchor, view.widthAnchor, view.heightAnchor. Anchor API establece automáticamente relatedBy = .equal y usa First Item/Second Item de los Anchors, reduciendo el código en un 40% en comparación con NSLayoutConstraint clásico.

import UIKit

class ConstraintViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let childView = UIView()
        childView.backgroundColor = .systemBlue
        childView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(childView)
        
        NSLayoutConstraint.activate([
            childView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 24),
            childView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
            childView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16),
            childView.heightAnchor.constraint(equalToConstant: 120),
            childView.bottomAnchor.constraint(lessThanOrEqualTo: view.bottomAnchor, constant: -24)
        ])
    }
}

El código posiciona childView con márgenes desde safeAreaLayoutGuide (top) y los bordes de la pantalla (leading/trailing). lessThanOrEqualTo para bottom garantiza que la vista no exceda el límite inferior. Anchor API lanza una excepción en tiempo de compilación si los anchors son incompatibles (por ejemplo, leadingAnchor mezclado con rightAnchor), previniendo errores en tiempo de ejecución. Apple recomienda Anchor API como estándar para Auto Layout programático desde iOS 9.

Safe Area y Layout Margins en Auto Layout

Safe Area es el área de la pantalla no cubierta por elementos del sistema: Dynamic Island, Notch, Status Bar, Home Indicator, esquinas redondeadas. En iOS 11, Apple reemplazó topLayoutGuide/bottomLayoutGuide por safeAreaLayoutGuide, que se adapta automáticamente a la orientación del dispositivo y la presencia de recorte de pantalla. Layout Margins son márgenes internos predeterminados de la vista (16pt en iOS, 20pt en iPadOS). Para UILayoutGuide se pueden establecer directionalLayoutMargins personalizados considerando la localización RIGHT-TO-LEFT. Auto Layout respeta automáticamente safe area al usar safeAreaLayoutGuide en los anchors.

Adaptación para Dynamic Island y Notch

En dispositivos con Dynamic Island (iPhone 14 Pro y posteriores) y Notch (iPhone X–13), Safe Area excluye 44pt en la parte superior en portrait (59pt con Dynamic Island en estado activo). Home Indicator añade 34pt en la parte inferior. Para una adaptación correcta, todas las restricciones superiores deben vincularse a safeAreaLayoutGuide.topAnchor, no a view.topAnchor. Las restricciones inferiores deben vincularse a safeAreaLayoutGuide.bottomAnchor o view.bottomAnchor con margen para Home Indicator. En IT Sectr, probamos todas las pantallas en simuladores iPhone SE (2022), iPhone 14 Pro Max y iPad Pro 12.9″ — tres dispositivos que cubren todas las variaciones de safe area.

Errores típicos de Auto Layout

Los errores más frecuentes al trabajar con Auto Layout: olvidar translatesAutoresizingMaskIntoConstraints = false, constraints Required en conflicto (prioridad 1000), Ambiguous Layout (constraints insuficientes para determinar la posición), Content Hugging Priority incorrecto para UILabel con texto multilínea y mezcla de anchors leading/trailing con left/right. Xcode 15+ muestra los problemas de diseño en Runtime Issue Navigator y ofrece correcciones automáticas. Para diseños complejos, use Debug View Hierarchy: marcadores amarillos indican ambiguous layout, rojos indican unsatisfiable.