Desarrolla aplicaciones de iOS usando Swift

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.

ExplorandoXcode

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.

ControlUIButton

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:

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.

Mokhtar Ebrahim

Fundadora de LikeGeeks. Estoy trabajando como administrador de sistemas Linux desde 2010. Soy responsable de mantener, proteger y solucionar problemas de servidores Linux para múltiples clientes de todo el mundo. Me encanta escribir guiones de shell y Python para automatizar mi trabajo.