Interface Builder es una herramienta fundamental en Xcode que permite a los desarrolladores diseñar y construir interfaces de usuario (UI) de manera visual. En este módulo, aprenderás a utilizar Interface Builder para crear y gestionar las interfaces de tus aplicaciones iOS.

• Comprender qué es Interface Builder y su importancia.
• Familiarizarse con la interfaz de Interface Builder.
• Aprender a agregar y configurar elementos de UI.
• Conectar elementos de UI con el código Swift.

Interface Builder es una herramienta gráfica dentro de Xcode que permite a los desarrolladores diseñar interfaces de usuario de manera visual. En lugar de escribir código para cada elemento de la interfaz, puedes arrastrar y soltar componentes visuales y configurar sus propiedades directamente en el editor.

• Visualización en Tiempo Real: Puedes ver cómo se verá tu interfaz mientras la construyes.
• Facilidad de Uso: Arrastrar y soltar elementos es más intuitivo que escribir código.
• Configuración Rápida: Ajustar propiedades y restricciones es más rápido y visual.

Cuando abres un archivo de storyboard o un archivo de interfaz de usuario en Xcode, se abre automáticamente en Interface Builder. Aquí hay una descripción general de las partes principales de la interfaz:

1. Editor de Diseño: La parte central donde diseñas tu interfaz.
2. Biblioteca de Objetos: Contiene todos los elementos de UI que puedes agregar a tu interfaz.
3. Inspector de Atributos: Permite configurar las propiedades de los elementos seleccionados.
4. Document Outline: Muestra una jerarquía de todos los elementos en tu interfaz.

Vamos a crear una vista simple con un UILabel y un UIButton.

1. Abrir Interface Builder:

   • Abre Xcode y crea un nuevo proyecto.
   • Selecciona el archivo Main.storyboard en el navegador de proyectos.

2. Agregar un UILabel:

   • Abre la Biblioteca de Objetos (puedes usar el atajo de teclado Shift + Command + L).
   • Busca Label y arrástralo al Editor de Diseño.
   • Selecciona el UILabel y usa el Inspector de Atributos para cambiar el texto a "Hola, Mundo!".

3. Agregar un UIButton:

   • De nuevo, abre la Biblioteca de Objetos y busca Button.
   • Arrastra el UIButton al Editor de Diseño, debajo del UILabel.
   • Cambia el título del botón a "Presionar".

4. Configurar Restricciones:

   • Selecciona el UILabel y el UIButton y usa el Inspector de Atributos para configurar las restricciones de Auto Layout. Esto asegurará que los elementos se posicionen correctamente en diferentes tamaños de pantalla.

Para que los elementos de UI interactúen con tu código, necesitas crear conexiones (outlets y actions).

1. Crear un Outlet:

   • Abre el archivo ViewController.swift en el editor de código.
   • Abre el Assistant Editor (Option + Command + Return) para ver el storyboard y el código al mismo tiempo.
   • Control-drag desde el UILabel en el storyboard al código para crear un outlet. Nómbralo greetingLabel.

   @IBOutlet weak var greetingLabel: UILabel!
   

2. Crear una Action:

   • Control-drag desde el UIButton al código para crear una action. Nómbrala buttonPressed.

   @IBAction func buttonPressed(_ sender: UIButton) {
       greetingLabel.text = "¡Botón Presionado!"
   }
   

Tarea: Crea una interfaz con un UITextField, un UILabel y un UIButton. Cuando el usuario ingrese texto en el UITextField y presione el UIButton, el UILabel debe actualizarse para mostrar el texto ingresado.

Solución:

1. Agregar Elementos de UI:

   • Agrega un UITextField, un UILabel y un UIButton al storyboard.
   • Configura las restricciones de Auto Layout para posicionarlos adecuadamente.

2. Crear Outlets y Actions:

   • Crea un outlet para el UITextField y el UILabel.
   • Crea una action para el UIButton.

   @IBOutlet weak var inputTextField: UITextField!
   @IBOutlet weak var displayLabel: UILabel!
   
   @IBAction func updateLabel(_ sender: UIButton) {
       displayLabel.text = inputTextField.text
   }
   

3. Probar la Aplicación:

   • Ejecuta la aplicación en el simulador.
   • Ingresa texto en el UITextField y presiona el UIButton para ver el UILabel actualizarse.

En este módulo, has aprendido los conceptos básicos de Interface Builder, cómo agregar y configurar elementos de UI, y cómo conectar estos elementos con tu código Swift. Ahora estás listo para diseñar interfaces de usuario más complejas y funcionales en tus aplicaciones iOS. En el próximo módulo, profundizaremos en el diseño con Storyboards y cómo utilizar Auto Layout para crear interfaces responsivas.