0:00
[SONIDO] Hola.
Ha sido increíble que recuerdes el código que hemos aprendido a lo largo
de los otros módulos de Swift.
También es bueno que recuerdes
las nuevas opciones que tiene Xcode para que tú puedas desarrollar la aplicación.
Pero bueno, vamos a entrar a hacer algo realmente para que se incluya dentro
de tu aplicación.
Al finalizar este video,
veremos cómo agregar una etiqueta dentro de tu aplicación.
Veremos dónde se encuentran esas etiquetas en una librería específica, conoceremos el
interface builder, y al finalizar haremos una prueba de cómo se ve tu aplicación.
Es bueno que te acostumbres a hacer pruebas de algo muy sencillo para que
vayas corrigiendo errores en caso de que quieras crear una aplicación muy grande.
Es bueno probar de manera unitaria.
Bueno, vamos ahora a nuestro Playground,
que se generó dentro de nuestro proyecto en el video anterior.
Y bueno, en Xcode vamos a trabajar ahora
no solamente con el código como lo tenemos aquí.
Vamos a nuestro Main Storyboard,
y dentro de nuestro Main Storyboard vamos a ver nuestra parte gráfica.
Recuerda que la parte que se encuentra en el medio de Xcode
es para que tú trabajes con un editor.
Ese editor puede ser el editor gráfico que es el Interface Builder para que tú puedas
construir una aplicación con los elementos gráficos,
o puedas seleccionar un archivo de código, ver el código en Swift,
ya sea de este Playground que hemos creado o para ver uno de estos archivos que se
llaman viewcontroller.swift, que veremos más adelante.
Ahora, en el caso que tú quieras navegar
en esos archivos recuerda que aquí tenemos una barra de herramientas.
Esas herramientas tienen un nombre y una función específica.
Si te posicionas sobre el ícono te dirá el nombre de lo que hace esa herramienta.
Y bueno, en este caso estamos viendo el Project Navigator.
Ese Project Navigator lo que hace es que me permite ver
los archivos que componen a mi aplicación.
Bueno, vamos a seleccionar Main Storyboard.
Tal vez tengas activo los objetos que se ven o no se ven dentro de tu aplicación.
En caso de que los tengas el Storyboard,
tienes este ícono hasta abajo para ocultarlos o mostrarlos.
Tienes aquí un árbol con los objetos que estás viendo.
Bueno, voy a cerrarlo y voy a seleccionar toda mi interfaz.
Ahora, por ahora tiene una opción la cual permite que tú puedas
crear una aplicación que se ajuste al tamaño de un iPad o de un iPhone.
Vamos ahora del lado derecho a la sección de herramientas donde tú puedes,
otra vez, posicionarte sobre un ícono y seleccionar el de tu interés.
Por ahora vamos al File Inspector.
Ese File Inspector nos da las propiedades de toda la vista.
En caso de que tú no selecciones eso ya no vemos esas propiedades.
Pero bueno, voy a seleccionarla y vamos a esta sección que se llama
Interface Builder Document y vamos a quitar esta opción de Use Size Classes.
Lo que hace es que me dice que tú seleccionas un iPhone o un iPad.
En caso de que la dejes activado se va a autoajustar.
Bueno, vamos a quedarnos solamente con iPhone y vamos a deshabilitarlo.
Ahora lo que tenemos ya es una vista donde se ve más como un iPhone.
Y con esto vamos a agregar nuestra primera etiqueta.
En la parte inferior vas a encontrar
una sección de las herramientas que es la librería de objetos.
También si te posicionas sobre el ícono vas a encontrar el nombre de
esa sección de todas las librerías que estás viendo.
Voy a seleccionar la etiqueta y la voy a arrastrar.
Ahora, al momento de arrastrarla vas a ver que se aparecen estas líneas.
Estas líneas son del Interface Builder que nos está ayudando
a que tú puedas entrar en alguna posición específica de tu etiqueta.
Vamos a centrarla en el medio, y vamos a soltarla.
Ahí ya tengo una etiqueta, y tiene un texto asignado.
Si seleccionas la etiqueta, vamos ahora
a otro de nuestras herramientas que tengo en mi barra de herramientas.
Esa es este ícono que está aquí, que es el Attributes Inspector.
Si le das clic, vamos a ver que ahí tienes,
voy a minimizar esto, tengo diferentes propiedades de esa etiqueta.
En esta sección de texto puedes cambiar lo que se encuentra ahí.
Vamos a cambiarlo y vamos a escribir esto.
Esto será un mensaje positivo.
Y seleccionamos enter.
Ahora, vemos que se ha ajustado, y bueno vamos a ajustarlo al tamaño,
vamos a ver que se vea todo nuestro texto y ahí está.
Voy a hacer que se vea un poquito más al centro, y bueno ahí está nuestra etiqueta.
Si tienes corriendo el emulador,
solamente tienes que presionar este ícono que es el de Stop.
En caso de que no, presiona Run, que es el play.
Si hay algún error lo vas a ver aquí,
y bueno ahí se lanza nuestro emulador, y nuestro emulador está aquí.
Y bueno, esta es nuestra primera etiqueta.
Estos son los conceptos básicos del Interface Builder.
Vamos a ver ahora cómo hacer algo más avanzado.
Recuerda que hemos visto que en la barra de herramientas que se encuentra a la
derecha, en la parte inferior está ese Object Library,
y solamente tienes que buscar y arrastrar el elemento que quieras hacia tu interfaz.
También, si tú lo quieres hacer más grande simplemente arrástralo, y al arrastrarlo
vas a ver todas las opciones que tiene y todos los objetos que hay en esa librería.
Bueno, vamos al siguiente video a continuar el desarrollo.
Dr. David Alejandro Escárcega CentenoProfesor Titular
