Creación App’s #09 iOS – Elementos gráficos básicos

1. Recordando El Entorno

Hasta ahora hemos visto cómo podemos crear y manipular datos alfanuméricos y otro tipo de objetos como los arrays y diccionarios.

En este apartado veremos diferentes elementos que no hemos visto hasta ahora, como los tipos de objetos de los que están compuestas las interfaces gráficas.

Vamos a partir de nuestra aplicación de “Hola Mundo” creada en la introducción. Ajusta las ventanas para que estén a tu gusto (deben estar como las dejaste) y elimina todos los componentes gráficos insertados (el botón y el texto).

Se recomienda repasar la introducción del curso, donde se ven las distintas ventanas de Xcode. Lo más importante es que sepas cómo se llama cada ventana y dónde está situada.

Recordemos que XCode nos proporciona un simulador de dispositivos Apple con el cual vamos a poder comprobar los resultados de nuestra aplicación, el iPhone Simulator. Para ejecutarlo basta con pulsar el botón “Run” (icono de play, de la esquina superior izquierda) o pulsar “Cmd + R”.

Una vez creado nuestro proyecto, nos dirigimos al archivo de interfaz Main.storyboard y arrastramos estos elementos a la vista principal:

Veamos qué hace cada uno de estos elementos:

2. UILabel

Esta clase simplemente muestra un texto no editable. Si en el Interface Builder pulsamos sobre ella, en el panel lateral podremos ver algunas de sus propiedades o atributos más importantes:

Algunos de sus atributos son:

Text: Texto a mostrar.
Lines: Número de líneas máximo.
Alignment: Justificación del texto.
Font: Tipografía.
Color: Color del texto.

3. UIButton

Esta clase muestra un botón que llamará a una acción cuando se interactúe de una manera determinada con él.

Algunos de sus atributos son:

Type: Tipo de botón, en este tutorial nos centraremos en el botón redondeado (Rounded Rect).
State Config: Permite elegir el estado (reposo, activo, resaltado…) para el que se configuran los siguientes parámetros de la lista.
Title: Texto sobre el botón.
Image: Imagen sobre el botón.
Background: Imagen de fondo que no interferirá con el texto o la imagen.
Font: Tipografía del texto del botón.
Text Color y Shadow Color: Color del texto y su sombra.

4. UITextField

Esta clase es parecida a UILabel, con la diferencia de que esta permite introducir el texto mediante el teclado.

Algunos de sus atributos más importantes:

Text: Texto a mostrar.
Placeholder: Texto que se muestra de una forma más sutil cuando no hay ningún texto a mostrar. Se utiliza normalmente para decirle al usuario que debe introducir allí.
Alignment: Justificación del texto.
Border Style: Estilo del campo, experimenta y escoge el que más te guste
Color: Color del texto.
Font: Tipografía.

5. Uniéndolo Todo

Ahora que ya sabemos más sobre estos elementos, hagamos una pequeña aplicación. Queremos que al pulsar el botón, el texto introducido en el campo de texto aparezca en el Label.

En primer lugar es necesario relacionar nuestro código (outlet) con estos elementos que hemos arrastrado a la interfaz, para ello, arrastramos los componentes desde el Interface Builder hacia el código del ViewController manteniendo pulsada la tecla control:

A continuación es necesario preparar el método al que llamará el botón cuando lo pulsemos, además del método que cerrará el teclado una vez terminemos de editar el campo de texto. Volvemos a arrastrar los componentes gráficos al código (sólo el botón y el campo de texto editable), pero esta vez ponemos Action en vez de Outlet:

En el ViewController.swift se vería algo así:

Para ver si funciona pulsamos “Cmd+R” y comprobamos en el simulador si todo funciona como debería. Si no es así, vuelve a repasar las cosas.

Si todo ha salido bien, puedes probar a cambiar los colores del botón, el tipo de letra, etc. La salida será algo así:

6. Etiquetas Personalizables Con UIFont

Siguiendo con el proyecto anterior, vamos a ver cómo podemos personalizar la tipografía en nuestras aplicaciones.

Podemos utilizar cualquier fuente que queramos. Para ello se recomienda echar un ojo en alguna web como FontReactor.

Nosotros hemos elegido la del Minecraft, disponible en los recursos de la web del curso, pero puedes elegir la que quieras.

Lo primero que haremos será descomprimir el zip y arrastrar el archivo de fuente hasta el navegador del proyecto.

Para la mayoría de recursos que añadamos a nuestros proyectos, y en este caso también, debemos marcar “copy items into destination group’s folder (if needed)”.

Una vez hemos agregado la fuente, debemos indicarle al proyecto que puede utilizarla y dónde se encuentra.

Para ello abriremos el fichero Info.plist de nuestro proyecto:

Aquí se muestran las propiedades de nuestro proyecto, como iremos viendo más adelante.

Nosotros queremos insertar una nueva propiedad. Por tanto daremos click derecho y añadiremos una mediante Add Row.

Nos aparecerá un desplegable en el que seleccionaremos, Font provided by Application.

Ahora debemos despegarlo y poner el nombre exacto de nuestro fichero, respetando mayúsculas y minúsculas tanto en el nombre como en la extensión.

Abrimos ahora el Main.storyboard y el código de ViewController.swift, y cambiamos el texto que ponía “mensaje”, por el que queramos.

Finalmente pulsamos sobre el texto y a la derecha cambiamos las propiedades del texto para usar el tipo de letra que hemos descargado y configurado.

Ya podemos comprobar el resultado en el simulador o en el dispositivo (si disponéis del mismo y de licencia de desarrollador).