En la publicación anterior, hablamos acerca de los aspectos básicos del lenguaje de iOS y vimos lo fácil que es trabajar con el lenguaje Swift. En esta publicación, aprenderemos cómo trabajar con Xcode y cómo desarrollar aplicaciones de iOS utilizando Swift.
Hoy comenzaremos nuestro camino de desarrollo de aplicaciones de iOS con un hello world, así que empecemos.
Table of Contents
Explorando Xcode
Abre Xcode y crea un nuevo proyecto de Xcode, luego haga clic en single view application
Luego, escribe el nombre de tu aplicación, haz clic en next y luego guarda tu aplicación
Ahora se abrirá Xcode, verás una lista de archivos a la izquierda como se muestra a continuación:
- AppDelegate.swift
- ViewController.swift
- Main.storyboard
- Assets.xcassets
- LaunchScreen.storyboard
- Info.plist
La columna que contiene estos archivos se llama navegador.
El panel central de Xcode se llama editor que es donde se edita e inicia la codificación.
Cualquier archivo de la izquierda, al hacer clic en él, se abrirá en el área del editor central.
Haz clic en el archivo Main.storyboard, un rectángulo en el centro con el título view controller apareció.
En la mano derecha, hay una columna que es inspector de atributos.
En la parte inferior derecha, está el panel de la biblioteca de objetos donde arrastra tus componentes los cuales se mostrarán al usuario como veremos más adelante.
Como puedes ver, en la izquierda, hay una lista jerárquica de todos los componentes para tu archivo seleccionado que es el view controller en nuestro caso, este panel es el panel de esquema del documento.
Agregar objetos al controlador de vistar
Desde el panel de la biblioteca de objetos, busque el control UIImageView.
Ahora arrastre el UIImageView desde el borde inferior para que se ajuste a todas las esquinas del view controller.
Voy a usar dos imágenes para mostrarte cómo utilizar UIImageView. Haz clic en Assets.xcassets en el navegador de la izquierda, luego arrastra las imágenes al contorno del documento.
Haz clic nuevamente en Main.storyboard y seleccione UIImageView, luego haz clic en el inspector de atributos.
Seleccione del menú desplegable la imagen que necesita establecer como fondo para UIImageView
Luego configura el modo de contenido para que UIImageView sea Aspect Fill.
Ahora puede ver que la imagen aparece perfectamente en UIImageView.
Necesitamos agregar otro UIImageView para poner nuestro logotipo en el centro de la pantalla. Arrastra otro UIImageView desde la biblioteca de objetos y configure la imagen desde el inspector de atributos de la misma manera.
Control UIButton
Arrastre un UIButton desde la biblioteca de objetos y colócalo en la parte superior del vie controller.
Cambia los atributos del botón desde el inspector de atributos, puede cambiar el texto del botón y el color.
Ahora ejecutemos la aplicación para verla en acción. Haz clic en el botón run en la parte superior de Xcode y espere hasta que finalice el proceso de compilación.
El simulador de iPhone se abrirá y tu programa debería ejecutarse dentro de ese simulador sin problemas.
Además del botón de ejecución, hay una lista de simuladores que se incluyen con Xcode, puedes elegir cualquiera de ellos para ejecutar tu programa.
En mi caso, he seleccionado el simulador de un iPhone 7.
¡¡Muy bien!! Su aplicación se ejecuta correctamente y si hace clic en el botón, no ocurre nada porque aún no hemos escrito ningún código para ese botón.
Para cerrar su programa, haga clic en el botón cuadrado
Manejo de eventos en aplicaciones de iOS
Para conectar los elementos de la interfaz de usuario como un botón o imagen a un archivo de código, debes utilizar @IBOutlet, y para realizar acciones cuando se interactúa con un elemento de interfaz de usuario determinado, debes utilizar la función @IBAction.
Haz clic en el editor asistente en la esquina derecha que tiene un icono de círculos entrelazados.
Ahora necesitamos crear un @IBOutlets para cada imagen y un @ IBAction para el UIButton.
Para crear un @IBOutlet para la imagen, haz clic con el botón derecho en la imagen y arrastra el mouse hasta ViewController.swift y exactamente encima de la función viewDidLoad( ).
Aparecerá una ventana emergente para preguntarte acerca del nombre del oulet que deseas crear. Escribe el nombre que desees y haz clic en Conectar.
Repite los mismos pasos para el logo image view.
Para el botón, haz clic con el botón derecho y arrastra el botón a ViewController.swift y suelta el mouse sobre la función didReceiveMemoryWarning( ).
Cuando sueltes el mouse, aparecerá una ventana emergente para preguntarle sobre el tipo de evento y el nombre de la acción.
Elije el tipo de conexión como una acción, escribe el nombre de la acción y haz clic en conectar.
Como puedes ver, la acción creada se parece a una función. En realidad, es una función que se puede activar cuando se presiona el botón.
Codificación básica
Hagamos una codificación muy básica. Cuando el usuario hace clic en el botón, las imágenes desaparecen.
Ve al botón @IBAction y escribe lo siguiente:
1 2 3 | backgroundIV.isHidden = true logoIV.isHidden = true |
Ejecute la aplicación y espere a que el proceso de compilación termine y, cuando aparezca el programa, haz clic en el botón y ve qué sucederá.
¡¡Guau!! Las imágenes desaparecieron. Esta es tu primera acción de iOS y el primer paso en el dearrollo de aplicaciones de iOS. ¡Felicitaciones!
No es tan genial, pero funciona.
Espero que encuentres la publicación interesante. Sigue regresando.
Gracias.
