Pantalla principal #
- Navegador do proxecto
- Editor de código
- Vista previa
- Inspector de propiedades. Aquí aparecen as propiedades do compoñente seleccionado no editor ou na vista previa
- Panel de debug
- Mini mapa do código. Mantén pulsado o botón «command» do mac para ver todos os elementos contidos no código fonte.
Panel de debug #
- Vista de variables. Activase ou desactivase no botón inferior sinalado coa frecha
- Vista de consola. Activase ou desactivase no botón inferior sinalado coa frecha
Vista previa #
De forma predeterminada, a vista previa amosa unha representación estática da interface de usuario.
Xcode construirá a aplicación e executaraa dentro da vista previa, onde poderás interactuar con ela como farías nun simulador ou nun dispositivo físico.
A versión actual da aplicación tamén permite que posamos previsualizar a aplicación nun dispositivo físico adxunto facendo clic no botón que amoso na seguinte sección.
Podes pulsar unha das seguintes opcións:
- Pulsa este botón para visualizar unha representación estática da interface neste panel
- Pulsa para seleccionar os elementos ao pinchar neles na vista previa
- Pulsa para ver a vista previa con diferentes esquemas de cores do iPhone, diferentes orientacións…
- Seleccionar un esquema de cor ou orientación do panel de vista previa
- Pulsa para facer a vista previa no teu iPhone real (dispositivo físico)
Biblioteca #
Traballar con SwiftUl implica principalmente agregar vistas, personalizar esas vistas, agregar lóxica á app…
Todas estas tarefas pódense realizar exclusivamente no editor de código:
Unha alternativa a isto é facer cambios nas vistas de SwiftUI arrastrando e soltando elementos do panel Biblioteca –número 2-, que se amosa facendo clic no botón + da barra de ferramentas resaltado co número 1.
NOTA:
- Cando se lanza o panel Biblioteca desaparecerá despois de facer unha selección ou realizar un clic fora do panel.
- Para manter o panel, mantén pulsada a tecla
Opción(Altna máquina virtual) ao facer clic no botón Biblioteca (+)
Cando se abre por primeira vez, o panel mostra unha lista de vistas dispoñibles para a súa inclusión no deseño da interface de usuario.
- Pódese navegar pola lista
- Pódese buscar na barra de procura para restrinxir a lista a vistas específicas.
Un elemento dentro da biblioteca pódese aplicar ao deseño da interface arrastrándoo e soltándoo na localización desexada, xa sexa no editor de código ou no lenzo de vista previa:
Neste caso, vamos a engadir un botón, en lugar de arrastrándoo ao código, o arrastramos sobre a vista previa:
Inspector de propiedades #
O inspector de atributos proporcionará a opción de realizar cambios en calquera modificador sobre o compoñente seleccionado (ou no editor de código ou na vista previa).
Así, no seguinte exemplo, seleccionamos o TextView «Ola mundo» dende o editor de código. No inspector, aparecen as propiedades do TextView e cambiamos a cor de texto a vermella (etiqueta número 1)
Selecionar dispositivo da vista previa #
Para seleccionar o dispositivo da vista previa:
- Pulsamos sobre o dispositivo da vista previa que está por defecto
- Seleccionamos un dispositivo e esperamos un anaco
Vista previa de varios dispositivos ao mesmo tempo #
Cada nova vista SwiftUI View creada, inclúe unha declaración adicional na parte inferior do código que se parece ao seguinte:
Esta estrutura, que se axusta ao protocolo PreviewProvider, devolve unha instancia da vista principal dentro do arquivo. Isto indica a Xcode que amose a vista previa desa vista dentro do lenzo de vista previa (sen esta declaración, non aparecerá nada no lenzo).
Para obter unha vista previa noutros modelos de dispositivos, unha opción é simplemente cambiar o obxectivo de execución e esperar a que cambie o lenzo de vista previa, tal e como vimos no anterior apartado.
Outra opción é modificar a estrutura das vistas previas para especificar un dispositivo diferente (non o vamos a ver nestes apuntes).
Executando a app no simulador #
Aínda que se pode lograr moito usando o lenzo de vista previa, o mellor sempre é probar a aplicación en dispositivos físicos e simuladores.
- Na imaxe non aparece, pero prememos no botón «
stop» para parar a execución da app - Compilar e executar
- Escoller o dispositivo de simulación. Unha vez que a aplicación estea compilada, iniciase o simulador e a aplicacións comeza a executarse nel.
- Aquí vese o progreso da compilación e os posibles erros do proceso.
O simulador inclúe unha serie de opcións que non están dispoñibles na vista previa en vivo.
- Os menús de hardware e depuración, por exemplo, inclúen opcións para rotar o simulador a través de orientacións vertical e horizontal
- Probar a autenticación de FaceID
- Simular cambios de localización xeográfica para aplicacións de navegación e baseadas en mapas.
- …
A continuación, executamos e probamos o programa de proba que estamos vendo nestes primeiros pasos. Para iso empregamos o simulador dun iPhone 14 Pro. Na seguinte imaxe, vemos o programa correndo nese simulador:
