¿Qué es el diseño con Auto Layout y en qué se…

Auto Layout es un sistema de diseño basado en restricciones (constraints) que determina la posición y tamaño de los elementos de la interfaz de usuario en relación unos con otros y con la vista principal.

Diferencias con el diseño usando marcos (frames):

Base: Auto Layout utiliza un conjunto de reglas (constraints) para determinar la disposición, los marcos son coordenadas y tamaños fijos.
Adaptabilidad: Auto Layout ajusta automáticamente el diseño a diferentes tamaños de pantalla, orientación del dispositivo y tamaño dinámico del texto. Los marcos requieren recalculaciones y actualizaciones manuales para cada situación.
Flexibilidad: Cambiar un elemento en Auto Layout a menudo provoca una reorganización automática de otros elementos según las constraints establecidas. Con marcos, cada cambio puede requerir una actualización manual de coordenadas y tamaños.
Complejidad: Para interfaces estáticas simples, el diseño con marcos puede ser más rápido. Para interfaces complejas, dinámicas y adaptativas, Auto Layout es más mantenible y menos propenso a errores.
Tareas que resuelve: Auto Layout es ideal para crear interfaces adaptativas que deben mostrarse correctamente en diferentes dispositivos y con cambios en los parámetros del entorno. Los marcos son más adecuados para posicionamiento preciso cuando la adaptabilidad no es una prioridad o para diseños muy simples y fijos.

Ejemplo de constraints en Auto Layout:

// Crear un botón
let button = UIButton()
button.translatesAutoresizingMaskIntoConstraints = false // Importante para usar Auto Layout

// Añadir el botón a la vista
view.addSubview(button)

// Establecer constraints (centrado horizontal, 20pt desde la parte inferior)
NSLayoutConstraint.activate([
    button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    button.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -20)
])

Ejemplo de diseño con marcos:

// Crear un botón
let button = UIButton()

// Establecer marco (centrado horizontal, 20pt desde la parte inferior)
let buttonWidth: CGFloat = 100
let buttonHeight: CGFloat = 40
let x = (view.bounds.width - buttonWidth) / 2 // Cálculo manual de X
let y = view.bounds.height - buttonHeight - 20 // Cálculo manual de Y

button.frame = CGRect(x: x, y: y, width: buttonWidth, height: buttonHeight)

// Añadir el botón a la vista
view.addSubview(button)

// Al cambiar el tamaño de la vista o la orientación, hay que recalcular manualmente el frame

¿Qué es el diseño con Auto Layout y en qué se diferencia del diseño usando marcos?