Un paseo por Xcode con un Proyecto SwiftUI

Una vez que hemos creado un Proyecto en Xcode en el que haremos uso de SwiftUI para generar la Interfaz Gráfica de nuestra App, se mostrará la siguiente pantalla en Xcode:

En esta primera toma de contacto con un Proyecto SwiftUI en Xcode, trabajaremos con el fichero ContentView.swift

El panel central mostrará el Código Fuente.

A la derecha del Código Fuente tendremos el Canvas (Panel de Previsualización).

Para mostrar u ocultar el Canvas haremos clic en el siguiente icono que encontramos en la parte derecha de la barra del breadcrumb

Tendremos que marcar o desmarcar la opción Canvas

Podemos mostrar y ocultar el Canvas desde el menú Editor

También podemos realizar esta acción mediante los Shortcuts de Xcode

Cmd + Enter: Oculta el Canvas (Show Editor Only)

Alt + Cmd + Enter: Mostrar el Canvas

La Previsualización aparece desactivada cuando arrancamos nuestro Proyecto Xcode para no consumir recursos de nuestro sistema. Si queremos activar la Previsualización hay que hacer clic en el botón Resume

Tras lo cual, la Previsualización se mostrará de la siguiente forma:

Si queremos que la Previsualización se realice en otro dispositivo, podemos seleccionarlo en la barra superior.

Hacemos clic sobre el nombre del dispositivo que actualmente estamos utilizando

Si el dispositivo seleccionado no se muestra completamente en la Zona de Previsualización, o nuestro monitor no es lo suficientemente grande, podemos ajustar el tamaño haciendo Zoom en los controles de la esquina inferior derecha de la Zona de Previsualización

Los elementos que se muestran en la Previsualización están vinculados con las correspondientes líneas de código del editor de la zona central. Para probarlo podemos hacer clic en los distintos elementos gráficos que se ven en la Zona de Previsualización y veremos como se resaltan las líneas de código que se corresponden con estos items.

La gran ventaja de esta Previsualización que incorpora SwiftUI es que trabaja en tiempo real, por lo que todos los cambios que hagamos en el Código se mostrarán inmeditamente en el Canvas, evitándonos tener que ejecutar el Simulador de Xcode para ver los cambios que vamos haciendo en nuestra App.

Panel Izquierda (Navigator)

El cual tiene los siguientes botones en la parte superior

Que nos dan acceso (por orden de izquierda a derecha) a:

- Project Navigator
- Source Control Navigator
- Symbol Navigator
- Find Navigator
- Issue Navigator
- Test Navigator
- Debug Navigator
- Breakpoint Navigator
- Report Navigator

Cómo mostrar/ocultar los distintos Paneles de la Interfaz de Xcode

En la esquina superior derecha de Xcode encontramos los siguientes botones:

El primero de estos botones muestra/oculta el Panel Izquierdo (Navigator)

El botón central muestra/oculta la Consola (Área de debugging)

El último de estos botones muestra/oculta el Panel Derecho (Inspector)

Panel Derecho (Inspector)

El cual tiene los siguientes botones en la parte superior

Que nos dan acceso (por orden de izquierda a derecha) a:

- File Inspector
- History Inspector
- Quick Help Inspector
- Attributes Inspector