Manual 2019 06 Desarrollo de Aplicaciones Móviles II (1922)

Desarrollo de
aplicaciones
móviles II - iOS
DESARROLLO DE APLICACIONES MOVILES iOS 2
DESARROLLO DE APLICACIONES MOVILES II - iOS 3
Índice
Presentación 5
Red de contenidos 7
Unidad de Aprendizaje 1
INTRODUCCIÓN A iOS Y SWIFT 9
1.1 Tema 1 : Conceptos básicos de iOS 11
1.1.1 : ¿Qué es el iOS? 11
1.1.2 : Flujo de vida de una aplicación iOS 12
1.1.3 : Arquitectura de una aplicación iOS 15
1.1.4 : Fundamentos de Swift 15
1.1.5 : Creación y administración de cuentas en iTunes Connect y 16
Member Center
1.2 Tema 2 : Creación y manejo del WorkSpace 32

1.2.1 : Características y funciones del XCode 32
1.2.2 : Características y funciones del PlayGround 35
1.2.3 : Instalación y manejo del CocoaPods 37
1.2.4 : Creación de un WorkSpace 39
1.2.5 : Descarga e instalación de librerías Pods 41
DESARROLLO DE PANTALLAS 45
2.1 Tema 3 : Navegación básica 47
2.1.1 : Manejo de StoryBoards 47
2.1.2 : Creación de flujo de pantallas por ViewControllers 50
2.1.3 : Ciclo de vida del UIViewController (ViewDidLoad, 53
ViewDidAppear, ViewWillAppear, etc.)
2.1.4 : Manejo de pantallas por UINavigationController 57
2.1.5 : Manejo de pantallas por UITabBarController 61
2.2 Tema 4 : Manejo de elementos en pantalla 66

2.2.1 : Componentes básicos de interfaz de usuario (UILabel, 66
UITextField, UIImage, UIButton, etc.)
2.2.2 : Configuración de UIScrollViewController 68
2.2.3 : Configuración de tablas con celdas dinámicas 70
(UITableViewController)
2.2.4 : Configuración de colecciones con ítems dinámicos 75
(UICollectionViewController)
2.2.5 : Configuración de paginadores (UIPageViewController) 79
2.2.6 : Creación y manejo de CustomViews 86
2.3 Tema 5 : Constrains 90

2.3.1 : Fundamentos sobre Constrains 90
2.3.2 : Creación de Constrains por StoryBoard 90
2.3.3 : Creación de Constrains por código 92
2.3.4 : Manejo de Constrains en tiempo de ejecución 93
ACCESO A DATOS 97
3.1 Tema 6 : Implementación de un API y Servicios Rest 99
3.1.1 : Creación de un Rest Api Manager 99
3.1.2 : Consumo de servicios Rest 101
3.1.3 : Envío y recepción de Datos JSON 101
3.2 Tema 7 : Almacenamiento de Datos 105

3.2.1 : Implementación de UserDefaults 105
3.2.2 : Implementación de Base de datos en Core Data 105
3.2.3 : Implementación del KeyChain para datos protegidos 112
Presentación
En la actualidad, el uso de los dispositivos móviles se ha vuelto una tendencia entre
las personas. Estos forman parte de las actividades rutinarias y de empleabilidad. La
tecnología ha avanzado al nivel de crear una dependencia, tanto laboral como social
por parte de las personas y sus comunidades.
En el pasado, la globalización de la información permitió a muchas personas tener

acceso a la información desde todas partes del mundo, siempre que tuviesen un punto
de acceso al internet. Ahora, en la actualidad, los puntos de acceso al internet están
al alcance de nuestras manos, los dispositivos móviles poseen la gran capacidad de
mantenernos conectados a la información global en todo momento y en todo lugar.
Las aplicaciones móviles permiten a los usuarios dar una interfaz gráfica y de mayor
comodidad a esta información. Las empresas buscan crear aplicaciones que integren
las actividades diarias de las personas, que ofrezcan soluciones a sus necesidades y
que posean una experiencia de usuario distintiva de las demás.
Apple es una empresa que dedicó gran parte de su tiempo en desarrollar un

dispositivo que permita al usuario no solo poseer una distinción económica y social
respecto a otros usuario, también buscaba otorgarles una experiencia de usuario
cómoda y que les facilite la implementación de aplicaciones en sus vidas cotidianas.
El desarrollo de aplicaciones móviles para usuario de iOS trata de buscar complacer al
usuario dándole la información que requiere de forma rápida y agradable.
Red de contenidos
Aplicaciones Móviles iOS
Unidad 1 Unidad 2 Unidad 3
Introducción Desarrollo de Acceso a

a iOS y Swift Pantallas Datos
UNIDAD
1
INTRODUCCIÓN A iOS Y SWIFT
LOGRO DE LA UNIDAD DE APRENDIZAJE
Al término de la unidad, el alumno podrá reconocer el flujo de vida de una
aplicación móvil iOS, también podrá crear ambientes de desarrollo en XCode y
dar uso a las herramientas CocoaPods y Playground.
TEMARIO
1.1 Tema 1 : Conceptos básicos de iOS
1.1.1 : ¿Qué es el iOS?
1.1.2 : Flujo de vida de una aplicación iOS
1.1.3 : Arquitectura de una aplicación iOS
1.1.4 : Fundamentos de Swift
1.1.5 : Creación y administración de cuentas en iTunes Connect y Member
Center
1.2 Tema 2 : Creación y manejo del WorkSpace

1.2.1 : Características y funciones del XCode
1.2.2 : Características y funciones del PlayGround
1.2.3 : Instalación y manejo del CocoaPods
1.2.4 : Creación de un WorkSpace
1.2.5 : Descarga e instalación de librerías Pods
ACTIVIDADES PROPUESTAS
 Los alumnos crearán sus propias cuentas en iTunes Connect y en

Member Center.
 Los alumnos crearán sus primeros prototipos en PlayGround.
 Los alumnos descargarán e instalarán el CocoaPods.
 Los alumnos crearán su primer proyecto en XCode y su primer
WorkSpace.
 Los alumnos descargaran y actualizaran librerías Pods.
1.1 CONCEPTOS BÁSICOS DE iOS
1.1.1 ¿Qué es el iOS?
“iOS es un sistema operativo móvil creado por la multinacional Apple Inc.

Originalmente, desarrollado para el iPhone y, posteriormente, utilizado en dispositivos,
como el iPod touch y el iPad. Es exclusivo de la marca Apple y no permite la
instalación en terceros.”
<Wikipedia>
Figura 1: Ícono de la marca Apple Inc

Fuente.- Tomado de https://image.freepik.com/free-icon/apple-logo_318-40184.png
iOS se deriva de OS X (sistema operativo utilizado para las computadoras de Apple),

que a su vez está basado en Darwin BSD; por lo tanto, es un sistema operativo Tipo
Unix. iOS cuenta con cuatro capas de abstracción: la capa del núcleo del sistema
operativo, la capa de “Servicios Principales”, la capa de “Medios” y la capa de “Cocoa
Touch”.
El sistema operativo cuenta con una serie de características que permiten su

identificación inmediata, entre ellas están:
Pantalla principal. Es en donde se ubican los íconos de las aplicaciones y el Dock,

que está en la parte inferior de la pantalla, donde se pueden anclar aplicaciones de
uso frecuente. Esto aparece al desbloquear el dispositivo o presionar el botón de
inicio.
Carpetas. Posee un sistema simple de carpetas. Con solo arrastrar una aplicación
sobre otra, se generará una carpeta para las aplicaciones, un título por defecto y se
permitirá su edición.
Seguridad. Con el uso de la activación por iCloud, que solicita los datos de acceso de
la cuenta del usuario original, el usuario puede bloquear y hasta inutilizar el equipo en
caso de pérdida o ser víctima de robo. De igual manera, permite conocer la ubicación
de vía GPS y mostrar mensajes en pantalla. No existen métodos comprobados para
saltarse la activación del iCloud sin inutilizar el dispositivo. Es reconocido como el
móvil más seguro del mercado.
Centro de notificaciones. El sistema de notificaciones fue rediseñado y, ahora, las

notificaciones se colocan en un área por la cual se puede acceder mediante un deslice
desde la barra de estado hacia abajo. Al hacer toque en una notificación, el sistema
abrirá la aplicación.
Multitarea Opcional. Permite el uso de varias aplicaciones en simultáneo.

Antiguamente, estaba reservado únicamente para aplicaciones por defecto del
sistema, debido al consumo de la batería. Esto únicamente estaba permitido para
dispositivos de tercera generación en adelante.
Game Center. Es la aplicación que integra todos los juegos móviles del dispositivo,
permitiendo la integración entre usuarios y dando facilidades a los desarrolladores,
como tablas de posición y tablas de puntuación. Esto permite, también, el uso de un
servidor para juegos entre varios jugadores y el guardado de la información de los
usuarios en la nube para poder acceder a ellos desde cualquier dispositivo Apple.
Tecnologías no admitidas. Las versiones anteriores a iOS 8 no permiten el uso de la

Plataforma Java y Adobe Flash por su gran inseguridad, y su gran consumo de
batería, medida muy criticada. Posteriormente, se permitió el uso de Adobe Flash
para dispositivos iOS 8 y posteriores.
Figura 2: Llave termomagnética

Fuente.- Tomado de
https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/Art/ios_pg_intr
o_2x.png
1.1.2 Flujo de vida de una aplicación iOS
Las aplicaciones poseen una sofisticada relación entre el código personalizado del
desarrollador y el framework de iOS. El framework de iOS ofrece la infraestructura
base que todas las aplicaciones necesitan para funcionar y el desarrollador
personaliza la aplicación por medio del código para darle la visualización y la
experiencia de usuario que se desea obtener. Para realizar esta tarea de forma
efectiva, es de ayuda entender un poco sobre la infraestructura de iOS y cómo
funciona.
El iOS frameworks se basa en patrones de diseño, tales como Modelo-Vista-

Controlador y delegados en su implementación. Entender los patrones de diseño es
parte crucial para poder crear una aplicación de forma exitosa.
 La función “main”
El punto de inicio, para todas las aplicaciones basadas en C, es la función

“main” y, en las aplicaciones de iOS, no es la diferencia. En lo que difieren de
las demás, es que en las aplicaciones de iOS no se escribe la función “main”, el
Xcode crea esta función como parte de las bases de tu proyecto. Esta función
nunca debe ser modificada salvo por algunas excepciones.
El “main” se encarga de dar control del UIKit Framework. La función

“UIApplicationMain” se encarga de este proceso creando objetos base para la
aplicación; además, carga la interfaz de usuario de un archivo StoryBoard
llamando al código personalizado para realizar cualquier configuración inicial y
poniendo el ciclo de la aplicación en movimiento.
 Estructura de una aplicación
Al iniciar la aplicación, la función “UIApplicationMain” crea varios objetos clave

y pone a andar la aplicación. En el corazón de toda aplicación iOS, está el
objeto “UIApplication”, cuyo trabajo es facilitar las interacciones entre el sistema
y otros objetos en la aplicación.
El siguiente diagrama muestra los objetos más comúnmente encontrados en

Aplicaciones iOS. Lo principal que se puede notar es la arquitectura MVC.
Este patrón separa los datos de la aplicación de la lógica del negocio y de la
presentación visual de la información.
Figura 3: Objetos clave en una aplicación iOS

Fuente.- Tomado de
https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/Art/core_object
s_2x.png
 Estados de ejecución
Not running: La aplicación no ha sido iniciada o ha estado funcionando, y fue

cerrada por el sistema.
Inactive: La aplicación se encuentra en primer plano, pero no está recibiendo

eventos. Las aplicaciones usualmente se encuentran en este estado cuando
transicionan entre estados.
Active: La aplicación se encuentra en primer plano y se encuentra recibiendo

eventos. Este es el estado común para las aplicaciones en primer plano.
Background: La aplicación se encuentra en un plano posterior y se encuentra

ejecutando código. Muchas aplicaciones se encuentran en este estado antes
de pasar al estado Suspended.
Suspended: La aplicación se encuentra en un plano posterior y no se

encuentra ejecutando código. El sistema mueve las aplicaciones a este estado
automáticamente sin notificar sobre ello. Mientras una aplicación se encuentre
en Suspended, la aplicacion se conserva en memoria, pero no ejecutará ningún
código. Si llega a haber una condición de poca memoria en el dispositivo, el
sistema irá purgando aplicaciones sin aviso alguno para realizar
Figura 4: Flujo de estados en una aplicación iOS

Fuente.- Tomado de
https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/Art/high_level_f
low_2x.png
La mayoría de las transiciones entre estados están acompañadas de un método que

indica a la aplicación que la transición se ha realizado. Estos métodos podemos
encontrarlos en el appDelegate.
1.1.3 Arquitectura de una aplicación iOS
Existen muchos patrones de arquitectura en el mundo; sin embargo, el que se utiliza

para programar en iOS es el MVC. Modelo Vista Controlador es el patrón que consiste
en dividir la aplicación en 3 capas. Cada Clase que se escriba, botón que se ponga en
la interface builder, o trozo de código que se tengas que escribir va a pertenecer a
alguna de estas 3 capas.
Vista. Es todo lo que se puede ver de la aplicación y con la que se puede interactuar,
dentro de esta encontraos botones, labels, campos de texto, etc. En general, la
mayoría de los objetos son subclases de UIView.
Modelo. Son los objetos que nos permiten almacenar y manipulas datos. Esto no
tiene nada que ver con la interfaz de usuario y le dice a la aplicación qué tareas llevar
a cabo y cómo llevarlas a cabo, así como qué características van a tener ciertos
objetos.
Figura 5: Arquitectura aplicación iOS

Fuente.- Tomado de
https://developer.apple.com/library/ios/documentation/General/Conceptual/CocoaEncyclopedia/Art/cocoa_mvc.gif
1.1.4 Fundamentos de Swift
Swift es un nuevo lenguaje de programación para aplicaciones iOS, OS X, watchOS y

tvOS que implementa lo mejor de C y Objective-C sin las limitantes de la
compatibilidad de C. Swift adopta patrones de programación seguros y agrega
características modernas para hacer el programar mucho más fácil, flexible y divertido.
Swift simplifica el manejo de memoria utilizando el Automatic Reference Counting

(ARC), quien se encarga de conservar y liberar las referencias de memoria en el
código, evitando que el desarrollador tenga que realizar la liberación de memoria de
forma manual. Las bases de Swift se encuentran en los frameworks “Foundation” y
“Cocoa”, los cuales fueron modernizados y estandarizados. Soporta el uso de bloques
de código, colecciones literales, y módulos permitiendo al framework adoptar
lenguajes de tecnologías modernas sin interrupciones.
Swift es muy familiar a Objetctive-C, conserva las mismas funciones que se

encuentran en Objective-C, llamándolas y utilizando el mismo nombre para las mismas
con una sintaxis diferente. Permite los mismos accesos a Cocoa Frameworks y
permite la interpolación con código de proyectos hechos en Objective-C.
Respecto a la guía de programación, se puede encontrar toda la información en el

portal de programadores de Apple:
https://developer.apple.com/library/ios/documentation/Swift/Conceptual/Swift_Program
ming_Language/TheBasics.html#//apple_ref/doc/uid/TP40014097-CH5-ID309
En este manual, podremos encontrar toda la información sobre la sintaxis a utilizar

para el código en Swift.
1.1.5 Creación y administración de cuentas en iTunes Connect y Member

Center
Apple, como otras empresas, cuenta con un portal en línea para que los
desarrolladores puedan inscribirse y tener facilidades y beneficios al desarrollar con su
tecnología. La inscripción al grupo de desarrolladores es totalmente gratuita. Sin
embargo, para poder subir aplicaciones al App Store, un desarrollador debe pagar una
membresía anual de aproximadamente 100 dólares americanos, lo cual le otorga
varios beneficios, tanto como desarrollador y como empresa. A continuación, vamos a
seguir los pasos para poder inscribirnos en el grupo de desarrolladores de Apple.
Para ello, primero, crearemos un Apple ID y, posteriormente, administraremos
nuestras cuentas en el iTunes Connect y en el Member Center. Para todo esto, Apple
cuenta con una página para desarrolladores, donde podrán acceder al siguiente
enlace https://developer.apple.com.
Creación Apple ID
Para poder crear nuestro Apple ID, lo primero que debemos hacer es dirigirnos a la
página de desarrolladores de Apple: https://developer.apple.com.
En esta, podemos encontrar información sobre la tecnología y los beneficios de

desarrollar para dispositivos de Apple. Adicionalmente, podemos encontrar, entre las
opciones de la barra superior, la opción Account. Haremos clic en esta para que se
presente la interfaz de inicio de sesión.
Una vez que nos encontremos en la interfaz de inicio de sesión, escogemos la opción
Create Apple ID. Después de esto, aparecerá un formulario donde debemos llenar
nuestros datos para crear la cuenta.
Una vez que hayamos llenado el formulario, procedemos a presionar el botón

Continue. Es de suma importancia llenar el formulario con información verídica y de
carácter formal, de esta forma no tendremos problemas a futuro cuando queramos
cobrar dinero de las ventas de sus aplicaciones.
Se nos enviará, al correo electrónico, un código de activación, el cual debemos

ingresar para poder validar el correo electrónico, el cual utilizaremos como nuestro
App ID.
Una vez que hayamos validado el correo electrónico, nos redirigirán a la pantalla de
inicio de sesión, en donde podemos usar nuestro nuevo AppID y clave para ingresar.
La primera vez que ingresemos a nuestra cuenta de desarrolladores de Apple,

podemos visualizar un Acuerdo de desarrollador de Apple, el cual “debemos” leer
antes de aceptar, porque necesitamos tener conocimiento de las condiciones de uso
de la cuenta de desarrollador. Posterior a ello, presionamos el botón Submit para
proceder a entrar a nuestra cuenta de desarrollador.
Ahora, nos encontramos dentro de nuestra cuenta de desarrolladores. En esta parte,

podemos obtener información para poder desarrollar nuestras aplicaciones,
documentación, foros, reportar bugs, noticias.
Sin embargo, este es el primer paso. Una vez que entremos, podemos ver, en la parte
inferior, una sección para poder unirnos al Programa de desarrolladores de Apple.
Esto es importante para poder crear aplicaciones para el AppStore. Procedemos a
presionar esta opción.
Inscripción al Programa de Desarrolladores de Apple
Esta sección es la página del Programa de Desarrolladores de Apple. Aquí, podemos

encontrar información sobre los beneficios de pertenecer al programa de
desarrolladores. En la parte superior derecha, encontramos el botón para inscribirnos,
“Enroll”.
Ahora, se nos presentarán los requisitos para poder unirnos al programa, como
desarrolladores independientes o como una organización (empresa). Procedemos a
presionar el botón “Start Your Enrollment”.
A continuación, se nos presenta la información de nuestro Apple ID y un desplegable

para seleccionar el tipo de entidad que deseamos inscribir. Luego de seleccionar,
presionamos Continue. En este caso, nos inscribimos como “Individual / Sole
Proprietor / Single Person Business”. Nos aparecerá una alerta a tener en cuenta
antes de inscribirnos.
Ahora, nos aparecerá un formulario de contacto, el cual contendrá, en su parte inferior,

un Acuerdo de Licencia, el cual “debemos” leer antes de proceder con el botón
Continue. La información ingresada, en este formulario, debe ser estrictamente
verídica, debido a que se utilizará para la facturación de recibos al momento de cobrar
el dinero acumulado por las ventas en el AppStore. Luego de aceptar el acuerdo de
licencia, podemos presionar el botón Continue.
Ahora, nos aparecerá un resumen de toda la información ingresada para poder

revisarla antes de proseguir. Una vez que hayamos revisado la información,
procedemos a presionar Continue.
Ahora, nos aparecerá la información del costo del programa de desarrolladores.

Presionamos el botón Purchase.
Ahora, nos aparecerá un formulario que nos solicitará la información de nuestra tarjeta
de crédito y la información de facturación. La información otorgada, en estos
formularios, es de carácter importante, porque debe ser totalmente verídica y privada.
Asimismo, si se desea hacer los pagos con una tarjeta ajena a la del desarrollador, se
recomienda hacer el pago con una tarjeta de crédito propia. En todo caso, si utilizara
la tarjeta de crédito de una persona ajena, se le solicitará que envíe una carta notarial
firmada y con copia de algunos documentos para validar la compra. Este proceso
demora una semana extra de tiempo para la validación de los datos.
Luego de ingresar los datos, presionamos Continue.

Ahora, podemos visualizar un resumen de la compra. Una vez revisada la operación,

presionamos Place Order.
Una vez terminado el proceso, nos aparecerá un resumen de la compra realizada y se

se nos indicará una cantidad de días que podría demorar en procesar la orden. Se
nos informara por correo electrónico una vez que se haya concluido el periodo de
validación.
El correo de activación llegará con un link para poder activar nuestra inscripción al
programa de desarrolladores de Apple. Presionamos en este link.
Una vez presionado el link, nos redireccionará a la página de desarrolladores de Apple

para poder utilizar el código de activación. Presionamos en Activate.
De esta forma, completamos la activación de nuestra cuenta como miembros del

equipo de desarrollo de Apple. Se nos mostrará una pantalla de confirmación junto al
Team ID y la fecha de expiración. El Team ID sirve para poder inscribir a otros
desarrolladores para que puedan trabajar con nosotros en nuestros proyectos. Estos
desarrolladores pueden ayudarte en tus proyectos; sin embargo, la única persona que
podrá lucrar con la cuenta será el dueño de la misma.
Finalmente, presionamos en Get Started.
Ahora, cada vez que ingresemos a nuestra cuenta de desarrolladores, podemos ver
que se ha activado una serie de secciones nuevas, que son las herramientas para
poder trabajar como desarrolladores de Apple. Estas herramientas nos permitirán
crear certificados para nuestras aplicaciones y, a su vez, entrar al iTunes Connect,
donde podemos administrar nuestras aplicaciones y subirlas al AppStore.
iTunes Connect
El iTunes Connect es el centro de administración de nuestras aplicaciones. Desde

este, vamos a poder organizar nuestras aplicaciones para poder subirlas al AppStore.
Podemos definir un precio de venta y cobrar por ello, organizar un grupo de testing,
generar versionar nuestros despliegues, etc.
Para ello, lo primero es ingresar al iTunes Connect. Podemos hacerlo por medio de
nuestro Member Center en el portal de desarrolladores o a través del siguiente enlace:
https://itunesconnect.apple.com.
Se nos pide iniciar sesión. Si no formamos parte del Equipo de Desarrollo de Apple,
no podremos ingresar.
La primera vez que ingresemos, se nos presentarán los términos y condiciones del
servicio, el cual “debemos” leer antes de ingresar.
Una vez dentro, podemos ver las diferentes secciones donde se podrán administrar
para generar las diferentes funcionalidades del iTunes Connect. Para poder hacer un
correcto uso de la herramienta, se recomienda leer el manual del lugar, investigar y
hacer un uso correcto del mismo.
Resumen
1. iOS es el sistema operativo de Apple para dispositivos iPhone, iPad y Ipod touch.
2. Las aplicaciones de iOS poseen un flujo de vida que pasa por varios estados, tales
como Not Running, Inactive, Active, Background, Suspended.
3. La arquitectura de una aplicación en iOS se basa en el diseño MVC: Modelo –
Vista - Controlador.
4. Swift es un nuevo lenguaje de programación utilizado para las aplicaciones de

Apple que busca implementar lo mejor de Objective-C y C sin las limitantes de
programar en C.
5. Para poder desarrollar para Apple, solo se necesita disponer de un AppleID; sin
embargo, para poder subir aplicaciones al AppStore, se necesita pertenecer al
programa de desarrolladores que sí posee un costo anual.
6. El iTunes Connect es la herramienta que nos permitirá subir nuestras aplicaciones

al AppStore y nos permitirá administrarlas.
Pueden revisar los siguientes enlaces para ampliar los conceptos vistos en esta
unidad:
 https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhon
eOSProgrammingGuide/TheAppLifeCycle/TheAppLifeCycle.html
 https://developer.apple.com/library/ios/documentation/Swift/Conceptual/Swift_P
rogramming_Language
 https://developer.apple.com
1.2 CREACIÓN Y MANEJO DEL WORKSPACE
1.2.1 Características y funciones del XCode
El XCode es el entorno de desarrollo integrado ofrecido por la multinacional Apple Inc.

y se suministra por medio del AppStore en las Mac OS X de forma totalmente gratuita,
lo único que se necesita es poseer una cuenta en Apple con su respectivo Apple ID.
XCode es capaz de compilar código de los siguientes lenguajes de programación: C,

C++, Swift, Objective-C, Java y AppleScript mediante una amplia gama de modelos de
programación, incluyendo pero no limitado a las librerías de Cocoa, Carbon y Java.
Conociendo el XCode
Luego de obtener el XCode del App Store, este se instalará de forma automática en
las aplicaciones de su Mac OS. Procedemos a abrir la aplicación. Para ello, nos
dirigimos al LauncPad en la parte inferior de nuestro OSX. Luego, escogemos del
grupo de aplicación el XCode y la seleccionamos.
Esta es la pantalla de bienvenida de XCode. En ella, podemos ver, a la derecha, los

proyectos en los que hemos estado trabajando últimamente. Nos permite un acceso
rápido a ellos sin tener que buscarlos en nuestra Mac OS. A la izquierda, podemos
visualizar 3 opciones: la primera nos permite crear un proyecto PlayGround; el
segundo, crear un proyecto XCode; y el último, abrir un proyecto desde un repositorio.
Por defecto, seleccionamos la segunda opción y procederemos a crear un proyecto.
XCode nos presentará una interfaz donde podremos seleccionar un modelo de plantilla
para el tipo de aplicación que deseamos realizar. Esto nos entregará un proyecto pre
configurado con las bases para nuestra aplicación. Todo esto, posteriormente, puede
ser configurado manualmente si se desea realizar un ajuste.
Para fines académicos, seleccionamos Single View Application. Es la plantilla básica

para realizar aplicaciones a dispositivos móviles.
Ahora, se nos presentará una interfaz para poner la información de nuestro proyecto.
En esta parte, debe destacarse que el bundle identifier es el string identificador único
de la aplicación. Este se utilizará en el App Store para poder diferenciar la aplicación
de otras. Asimismo, se va a seleccionar el lenguaje de programación que se utilizará y
el dispositivo al cual estará dirigida la aplicación. Para las demás opciones, se debe
leer el manual del desarrollador para poder hacer modificaciones específicas para
cada proyecto.
Finalmente, nos solicitará que indiquemos en qué carpeta deseamos crear el proyecto
dentro de nuestra Mac OS. Hecho esto, ya disponemos de un proyecto listo para ser
trabajado.
El IDE de desarrollo se divide en 5 partes principales:
 Barra de Herramientas: Se encuentra en la parte superior. Nos permite

acceder a diferentes herramientas del IDE, tales como el organizar, los
dispositivos para pruebas, el “Archive” del producto para subirlo al iTunes

Connect, etc.
 Interfaz de Navegación: Se encuentra en el lateral izquierdo del IDE. Se

encarga de organizar todos los archivos del proyecto implementando una
organización en cascada de carpetas. También, contiene un buscador y
otras herramientas que nos facilitan acceso rápido a diferentes partes del
proyecto.
 Interfaz de Utilitarios: Se encuentra en el lateral derecho del IDE.

Contiene varias herramientas que permiten configurar los atributos de los
archivos del proyecto, tales como imágenes, files, storyboards, y elementos
del Cocoa. En su parte inferior, contiene recursos pre fabricados de la
librería Cocoa.
 Interfaz de Edición: Se encuentra en la parte central. Se utiliza para editar

el contenido de los diferentes archivos.
 Interfaz de Debug: Se utiliza para ver variables en tiempo de ejecución,

interactuar con la consola de debug y controlar la ejecución de la aplicación.
Figura 6: División del IDE de desarrollo XCode

Fuente.- Tomado de
https://developer.apple.com/library/ios/documentation/ToolsLanguages/Conceptual/Xcode_Overview/Art/XC_O_Wrkspa
ceWindow_2x.png
1.2.2 Características y funciones del PlayGround
Los PlayGround son ambientes interactivos de programación en Swift que evalúan

linealmente cada enunciado para mostrar resultados de forma inmediata, sin
necesidad de crear un proyecto. Es mayormente utilizado con fines de aprendizaje,
así mismo para realizar prototipos y pruebas de código sin tener que involucrar el
contenido de un proyecto.
Creación de un PlayGround
Para la creación de un PlayGround, al momento de abrir el XCode y ver la pantalla de

bienvenida, marcamos la opción “Get started with PlayGround”, también podemos ir a
File / New / Playground en el mismo XCode.
Lo primero que se nos presentará es un formulario donde debemos únicamente

colocar el nombre para el archivo PlayGround y la plataforma en la que deseamos
realizar las pruebas. Posterior a ello, solo debemos seleccionar dónde deseamos
guardar el archivo.
Una vez que se haya terminado de crear el archivo, se nos mostrará el ambiente de
trabajo. En la zona principal, podemos observar que se importa por defecto una
librería para que podamos empezar a programar y una primera variable String como
parte del saludo. A la mano derecha, podemos observar una zona donde aparecerá el
resultado en tiempo real de las fórmulas y códigos que desarrollemos. En la parte
inferior, podemos activar una consola para manejar variables y respuestas en tiempo
de ejecución y, también, encontraremos nuestro Run button para poder hacer correr el
código.
Para más información sobre cómo utilizar el PlayGround y los alcances que puede uno
llegar a tener, se debe revisar la documentación en la página de desarrolladores:
https://developer.apple.com/library/ios/recipes/Playground_Help/Chapters/AboutPlaygr
ounds.html#//apple_ref/doc/uid/TP40015166-CH28-SW1
1.2.3 Instalación y manejo del Cocoa Pods
CocoaPods es una herramienta que se encarga de administrar dependencias de

librerías para proyectos realizados en XCode. Estas librerías son especificadas en un
simple archivo de texto llamado Podfile. CocoaPods se encargará de leer el
documento y descargar las librerías para su uso en el proyecto y crear los accesos
necesarios para que podamos implementarlas en cualquier parte del mismo.
CocoaPods ha sido creado en Ruby y será posible instalarlo utilizando la consola de la

Mac OSX. Usar la instalación por defecto involucra tener permisos de administrador
en el sistema. Ello requiere utilizar la función “sudo” cuando se instalen los archivos
.gems del Ruby. Para ello, abrimos la consola del sistema operativo e ingresamos el
siguiente código. Entonces, vamos a las aplicaciones del OSX y entramos al Terminal.
Una vez hecho esto, se podrá observar la instalación y proceder a utilizar el

cocoapods. Hay ocasiones en que no es necesario utilizar el prefijo “sudo” y
únicamente es necesario mandar la sentencia sin los permisos de administrador. Esto
depende de la configuración de permisos del sistema. Si aún se cuenta con
problemas para la instalación, se recomienda leer el siguiente enlace:
https://guides.cocoapods.org/using/getting-started.html
1.2.4 Creación de un WorkSpace
La diferencia entre un WorkSpace y un proyecto en XCode es mínima. El

WorkSpace consiste en integrarle al Xcode un sistema que maneje las librerías
Pods y permita el uso de las mismas en todo el proyecto. Esto evita que uno
tenga que hacer la implementación de la librería en cada Clase, además otorga
un ambiente ordenado y controlado para el manejo de las librerías, así como
para la actualización de las mismas de forma más fácil.
Para poder generar un WorkSpace, lo primero que necesitamos es tener un

proyecto ya creado y configurado. Luego de ello, procedemos a crear un
podfile. Abrimos la consola Terminal y ponemos, en esta, el comando $ pod
init.
Luego de ello, en la carpeta del proyecto, podemos observar el archivo Podfile, el cual
vendrá a indicar al proyecto qué librerías deseamos utilizar.
Si entramos en el archivo, podemos ver la estructura del podfile, donde vendremos a

poner los nombres de la librería para que sean descargadas.
Lo único que falta es crear el WorkSpace. Para ello, nos dirigimos nuevamente al
Terminal. Por medio del Terminal, nos ubicamos en la carpeta que contiene el Podfile
y mandamos el comando “pod update”, el cual procederá a crear el WorkSpace.
Ahora, en la carpeta del proyecto, podemos ver el acceso al WorkSpace. A diferencia

de entrar por medio del ícono azul del proyecto, procederemos a ingresar por medio
del ícono blanco del WorkSpace.
Una vez que hemos ingresado al WorkSpace, lo principal que podemos notar, en la
parte inferior izquierda de la pantalla, es un segundo proyecto, el cual contendrá a las
librerías Pod y se encargará de administrarlos por nosotros y volverlas accesibles a
todas partes de nuestro proyecto.
1.2.5 Descarga e instalación de librerías Pods
La descarga e instalación de librerías Pod es sumamente fácil, de la misma forma el

actualizarlas y eliminarlas del proyecto. Primero que nada, debemos buscar alguna
librería en internet, generalmente las encontramos en algún repositorio en línea.
Luego de ello, revisamos si la librería tiene una versión POD y, a su vez, revisamos si
la librería es para Swift o para Objective-C. En el caso de trabajar en Swift, podemos
descargar las que están en Objective-C sin problemas, ya que se creará un Bridge que
nos permitirá utilizarlas sin problemas.
Una vez que tengamos el nombre de la librería POD, procedemos a ponerla en

nuestro Podfile. Dependiendo del tipo de proyecto que realicemos, ponemos la librería
POD en los targuest respectivos. Adicionalmente, si trabajamos en Swift, debemos
descomentar la segunda y la cuarta línea de configuración de la parte superior del
archivo, y grabar los cambios.
Ahora, con nuestro archivo Podfile configurado, procedemos a actualizarlo. Para ello,
nos dirigimos a nuestro Terminal y ubicándonos en la carpeta del proyecto donde está
el Podfile procedemos a mandar el comando “pod update”.
En la respuesta del comando, podemos ver cómo se ha descargado la librería

correctamente y nos indica la versión que ha sido descargada. De esta misma forma,
podemos actualizar todas las librerías con el mismo comando. Si vamos al
WorkSpace, podemos ver, en la carpeta de Pods, que la librería se encuentra en su
lugar.
Resumen
1. XCode es el IDE de desarrollo de Apple y es gratuito en el AppStore de las OSX.
2. Playground es un ambiente de pruebas que permite programar sin necesidad de

un proyecto.
3. Cocoa Pods es una herramienta que nos permitirá manejar librerías para nuestros
proyectos.
unidad:
https://guides.cocoapods.org/using/getting-started.html
https://developer.apple.com/library/ios/recipes/Playground_Help/Chapters/Abou
tPlaygrounds
UNIDAD
2
DESARROLLO DE PANTALLAS
Al término de la unidad, el alumno podrá crear un flujo de navegación para su
aplicación y dispondrá de elementos como tablas y colecciones .
TEMARIO
2.1 Tema 3 : Navegación básica
2.1.1 : Manejo de StoryBoards
2.1.2 : Creación de flujo de pantallas por ViewControllers
2.1.3 : Ciclo de vida del UIViewController (ViewDidLoad, ViewDidAppear,
ViewWillAppear, etc.)
2.1.4 : Manejo de pantallas por UINavigationController
2.1.5 : Manejo de pantallas por UITabBarController
2.2 Tema 4 : Manejo de elementos en pantalla

2.2.1 : Componentes básicos de interfaz de usuario (UILabel, UITextField,
UIImage, UIButton, etc.)
2.2.2 : Configuración de UIScrollViewController
2.2.3 : Configuración de tablas con celdas dinámicas
2.2.4 : Configuración de colecciones con ítems dinámicos
2.2.5 : Configuración de paginadores (UIPageViewController)
2.2.6 : Creación y manejo de CustomViews
2.3 Tema 5 : Constrains

2.3.1 : Fundamentos sobre Constrains
2.3.2 : Creación de Constrains por StoryBoard
2.3.3 : Creación de Constrains por código
2.3.4 : Manejo de Constrains en tiempo de ejecución
 Los alumnos procederán a crear una aplicación empleando StoryBoars.

 Los alumnos crearán un flujo de pantallas con diferentes ViewControllers.
 Los alumnos implementarán tablas y colecciones en su proyecto.
 Los alumnos implementarán el Navigation Controller y el TabBar para su
proyecto.
 Los alumnos implementarán constraints para su proyecto.
2.1 NAVEGACIÓN BÁSICA
2.1.1 Manejo de StoryBoards
Los StoryBoards vienen a ser herramientas visuales en el XCode que nos permiten
organizar y desarrollar las pantallas de nuestra aplicación. Si bien no estamos
limitados a utilizarlos, estos ayudan de forma muy significativa al manejo de elementos
de la interfaz de usuarios.
Por medio de ellos, podemos indicar el flujo de pantallas de nuestra aplicación, qué
herramientas de interfaz deseamos utilizar en cada pantalla y qué herramientas de la
librería de Cocoa deseamos implementar en cada pantalla. Asimismo, el StoryBoard
guarda la referencia de memoria de cada una de las herramientas que se creen en
este, haciendo de esta forma más ligero el manejo de memoria de la aplicación.
Nuestro proyecto por defecto nos creará un StoryBoard; sin embargo, utilizar un solo
StoryBoard para todo el proyecto es una mala práctica, la mejor alternativa es dividir el
proyecto en varios módulos dependiendo de las funcionalidades, definir qué pantallas
necesitamos para cada módulo y, por último, crear un StoryBoard para cada grupo de
pantallas. Esto nos permitirá trabajar de forma ordenada, inclusive el tiempo de carga
al querer visualizar un StoryBoard será menor ya que tendrá menos información que
mostrar.
Por último, manejar varios StoryBoards nos permitirá trabajar en equipo con otras
personas, ya que el StoryBoard se considera como un solo archivo y su contenido
puede ser modificado por un desarrollador a la vez. Si nos encontramos trabajando
con un grupo de desarrolladores y dos de ellos hacen modificaciones al mismo tiempo
en un StoryBoard, estos no podrán integrarse al momento de unificar la información en
el repositorio. Para ello, la mejor opción es subir uno de los cambios al repositorio y
descartar el otro grupo de cambios, y volver a realizarlos sobre el proyecto
actualizado.
Para poder crear un StoryBoard, dentro del WorkSpace, procedemos a crear un

archivo nuevo. Para ello, podemos hacer clic derecho sobre las carpetas o acceder a
crear un archivo desde la barra superior de herramientas.
Una vez creado el StoryBoard, podemos observarlo dentro del proyecto.

Adicionalmente, cuando se crea el proyecto, se crean 2 StoryBoards por defecto. Uno
de ellos viene a ser el “Main”, el cual es creado para que uno pueda empezar a
implementar las pantallas de su proyecto, bien podemos utilizarlo o eliminarlo y crear
el nuestro. El segundo llamado “Launch Screen” viene a ser el que contenga a la
pantalla de carga cuando abrimos la aplicación. Este último StoryBoard es de mucha
importancia y no debemos eliminarlo, incluso reemplazarlo requiere de un proceso que
no vendrá a ser explicado en este material.
Al seleccionar nuestro LaunchScreen.StoryBoard, podemos observar, dentro de él, un

ViewController en donde podemos configurar nuestra pantalla de carga. En este,
podemos indicar qué imagen deseamos que se muestre mientras se carga la

aplicación. Se debe indicar que realizar, en esta pantalla, animaciones no es posible,
pero si se puede cargar rápidamente una primera pantalla donde se haga la carga de
la información y presentar la animación en esa pantalla.
Como podemos ver, el ViewController posee una forma cuadrada. Esto es debido a
que está configurado para visualizarse en todos los tamaños de dispositivos. Esto
puede ser de gran ayuda si deseamos realizar la aplicación para diferentes
dispositivos con diferentes resoluciones de pantalla. Otra opción, en caso nos
sintamos más cómodos desarrollando únicamente para iPhone, es deshabilitar esta
configuración y definir exactamente para qué tipo de dispositivo vamos a desarrollar, y
tener, de esta forma, una mejor previsualización al desarrollar.
Si deseamos desactivar esta opción que permite ver el ViewController como un

elemento cuadrado, procedemos a seleccionar el ViewController. Luego de ello, en la
parte superior de los Utilitarios, en la primera opción, el file inspector, buscamos la
opción “Use size classes” para desactivarla.
Una vez que hayamos desactivado esta opción, se nos mostrará una interfaz donde se
nos indicará para qué tipo de dispositivo deseamos trabajar, iPhone o iPad.
Una vez que hayamos escogido una opción (en este caso, escogeremos iPhone),
veremos cómo el ViewController, dentro de nuestro StoryBoard, se verá de forma
rectangular y vertical. Este cambio no solo se aplica al ViewController sino a todos los
ViewControllers dentro del StoryBoard, y debe hacerse por cada StoryBoard dentro del
proyecto. De esta forma, podemos diseñar StoryBoards para cada dispositivo si lo
deseamos y llamar a los ViewControllers por código según identifiquemos el
dispositivo mediante la programación del código. Debemos tomar en cuenta que esto
no limita que podamos crear la aplicación para varios dispositivos, solo nos indica
cómo se verá dentro del IDE de desarrollo. Para poder realizar un correcto diseño, lo
más recomendable es probar la aplicación en todos los dispositivos en que se va a
utilizar y condicionar el diseño para cada pantalla. No es necesario tener todos los
dispositivos, ya que contamos con un emulador de todos los dispositivos en nuestro
entorno de desarrollo.
2.1.2 Creación de flujo de pantallas por ViewControllers
Dentro del StoryBoard, podemos crear el flujo de pantallas que debería seguir nuestra
aplicación. Esto nos permite visualizar cómo deberíamos organizar el flujo de
información de nuestra aplicación y, dentro de las pantallas, podemos colocar las
herramientas de interfaz que necesitamos.
Para poder crear un ViewController, por medio del StoryBoard, procedemos a

buscarlos dentro de las herramientas de la librería del Cocoa. En la sección de
Utilitarios, si buscamos en la parte inferior, podemos ver un grupo de secciones de las
cuales elegiremos la tercera, “Librería de Objetos”. Dentro de esta librería,
encontramos las herramientas del Cocoa y varias herramientas pre fabricadas que nos
facilitarán poner en nuestra pantalla objetos de la interfaz de usuario. En el buscador,
escribimos “ViewController” para poder filtrar las herramientas y encontrar varias que
heredan de la Clase UIViewController. Entre estas, escogemos la que se llama “View
Controller”, la seleccionamos y procedemos a arrastrarla al StoryBoard.
Una vez que tenemos nuestro View Controller, procedemos a crear otros
“ViewControllers” según el diseño de nuestra aplicación. Una vez hecho esto,
procedemos a crear el flujo de la aplicación. Primero, seleccionamos un
ViewController. Luego de ello, en la sección de Utilitarios, seleccionamos la opción
“Connections”, que es la que se encuentra a la derecha de las demás.
En esta ventana, encontramos los Triggered Segues. Estos se utilizaban hace tiempo
para indicar a dónde debe dirigirse una pantalla según una acción determinada. Sin
embargo, esto se planteó como una mala práctica, debido a que una ventana no debe
estar limitada por el StoryBoard para indicar el flujo de la aplicación, ya que el
desarrollador debería controlar esto por código. Buscamos la propiedad “manual” y la
enlazamos al “ViewController” al que debería seguir el flujo de la aplicación.
Podemos, adicionalmente, enlazar el ViewController con más de un ViewController,

pero esto no limita al desarrollador a solo utilizar estos enlaces. El desarrollador
puede llamar a cualquier ViewController que se encuentre en los StoryBoards según lo
desee, además puede crear manualmente ViewControllers por código si así lo desea.
Una vez que se haya hecho el enlace nos indicará qué tipo de enlace deseamos. En
este caso, marcaremos la opción “push”. Una vez hecho esto, podemos visualizar el
“segue” en pantalla.
Existen varios tipos de View Controllers en las herramientas del Cocoa. Varios de
ellos vienen con funciones ya realizadas por defecto para facilitarnos el trabajo; sin
embargo, estos no se verán en el Manual debido a que los objetivos del curso
requieren que uno pueda desarrollar sus propios View Controllers desde uno más
básico y así tener mayor control por código.
Por último, debemos indicar cuál es el primer View Controller que se va a llamar. El
programa por defecto indica que el View Controller creado por defecto en el Main
StoryBoard sea el primero en llamarse. Esto lo indica poniendo una flecha a su lateral
izquierdo. Esta flecha indica el “StoryBoard Entry Point”, que viene a ser el primer
ViewController en mostrarse.
Esta flecha, que vemos en pantalla, podemos asignarla a cualquier View Controller
dentro de los StoryBoards. Esta indica el punto de ingreso al StoryBoard. Cuando
designemos cuál StoryBoard es el que debe cargarse primero, el programa sabrá cuál
es el primer ViewController en mostrar. Para poder asignarla, podemos seleccionarla
y arrastrarla adentro del StoryBoard o a otro ViewController, o también podemos
seleccionar el ViewController que deseamos sea nuestro “StoryBoard Entry Point”. En
la sección de Utilitarios, seleccionamos la cuarta opción “Attributes” y buscamos la
opción “Is Initial View Controller”, la marcamos y automáticamente se va a desmarcar
de cualquier otro View Controller que tenga esta opción activada. Luego de ello,
podemos ver que la flecha del “StoryBoard Entry Point” se ubica al lateral izquierdo de
nuestro View Controller indicando que será el primero en mostrarse y donde empezará
toda nuestra aplicación.
Para indicar qué StoryBoard será cargado, primero, debemos ir al InfoPlist. En este,
debemos buscar la opción “Main storyboard file base name” y poner el nombre del
Storyboard que se cargará inmediatamente luego del Launch Screen. De igual forma,
podemos indicar qué StoryBoard contiene el Launch Screen. Para ello, buscamos la
propiedad “Launch Screen interface file base”.
2.1.3 Ciclo de vida del UIViewController (ViewDidLoad, ViewDidAppear,

ViewWillAppear, etc.)
Todos los ViewControllers heredan de la Clase UIViewController, la cual les da

funciones del ciclo de vida. Nos indican eventos claves del View Controller: cuándo se
crea, cuándo va a aparecer, cuándo va a desaparecer, cuándo va a destruirse, etc.
Estos eventos deben der manejados por el programador para poder configurar las
funcionalidades del ViewController.
Antes de ello, a cada ViewController del StoryBoard, debemos asignarle una Clase y
un identificador con el cual podrán ser identificados y llamados por código. Asimismo,
podremos reconocer sus atributos y propiedades para poder configurarlos.
Para poder asignarles un Identificador, debemos seleccionar el ViewController dentro

del StoryBoard. Luego, en la sección de Utilitarios, seleccionamos la tercera opción
“Identity”. En esta, veremos un cuadro de texto con el nombre “StoryBoard ID”, en el
cual ponemos el identificador que deseamos para este ViewController. Recordemos
que estos identificadores no deben repetirse dentro del StoryBoard.
Ahora, procedemos a crear la Clase que configurará nuestro ViewController. Para

ello, procedemos a crear un nuevo archivo, vamos a la barra de herramientas y
presionamos en File/new/File, entonces se nos abrirá una pantalla para escoger qué
tipo de archivo deseamos crear.
En esta pantalla, escogeremos la opción iOS/Source de la barra izquierda. Luego,

dentro de estas opciones, escogemos “Cocoa Touch Class”.
Luego, veremos la interfaz donde podemos decidir qué nombre deseamos ponerle a
nuestra Clase e indicar qué debe heredar de “UIViewController”, así como el lenguaje
a utilizar para esta Clase.
Finalmente, podemos seleccionar en qué carpeta deseamos guardar el archivo.
Ahora, podemos visualizar el archivo dentro de nuestro proyecto y, al hacerle clic,

podemos ver que se generó el código base para la programación de nuestro View
Controller.
En el código, podemos observar que la Clase hereda de UIViewController dos

funciones: “ViewDidLoad” y “DidReceiveMemoryWarning”.
Las principales funciones del ciclo de vida de un ViewController vienen a ser seis:
 ViewDidLoad: Esta función se llama cuando el ViewController va a ser

creado, es la primera función en ser llamada.
 ViewWillAppear: Esta función se llama cuando el ViewController va a

aparecer en pantalla, justo al empezar la animación de trancisión que lo
pone en pantalla.
 ViewWillDisappear: Esta función de llama cuando el ViewController va a

desaparecer de la pantalla, justo al empezar la animación de transición que
lo va a ocultar.
 ViewDidAppear: Esta función se llama una vez que el ViewController se

encuentra totalmente en pantalla, justo cuando finaliza la animación de
transición que lo presenta en pantalla.
 ViewDidDisappear: Esta función se llama una vez que el ViewController se

encuentra totalmente fuera de pantalla, justo cuando finaliza la animación
de transición que lo presenta en pantalla.
 DidReceiveMemoryWarning: Esta función se llama cuando la aplicación

empieza a tener una advertencia de memoria, en este caso debemos
decidir qué ViewControllers deseamos remover de memoria para poder dar
paso a los nuevos y manejar la información de forma que no la perdamos.
El uso adecuado de estas funciones del ciclo de vida es de suma importancia para
poder manejar la información de la aplicación. Adicionalmente, existen más funciones
del ciclo de vida. Para ello, habrá que leer la documentación en la página de
desarrolladores y saber cuándo debemos utilizarlos.
Finalmente, nos queda únicamente asignar la Clase al ViewController de nuestro

StoryBoard. Para ello, seleccionamos el ViewController dentro de nuestro StoryBoard
y, en la tercera pestaña de la sección de Utilitarios, “Identity”, en la opción “Clase”,
ponemos el nombre de la Clase que hemos creado.
Una vez hecho esto, podemos ver que al ViewController se le asignó la Clase en el
nombre que lo representa en el StoryBoard. Ahora, nuestro ViewController está
conectado a la Clase que hemos creado.
2.1.4 Manejo de pantallas por UINavigationController
El Navigation Controller es una herramienta perteneciente a la librería del Cocoa, que

contiene un grupo de herramientas que nos facilita el manejo de transición entre
ViewControllers de la aplicación. Esta herramienta nos permite avanzar y retroceder
entre ViewController con mayor facilidad. Provee de una barra superior, muy utilizada
en aplicaciones iOS, donde podemos ubicar botones de acceso rápido para el usuario
y el título de la sección en que se encuentra el usuario. También, permite anexar una
gran variedad de herramientas y funcionalidades como el esconder o mostrar la barra

superior con animaciones. Las transiciones animadas entre pantallas, etc.
Para poder hacer uso del Navigation View Controller, primero, debemos crear uno en
nuestro proyecto. En la parte inferior derecha de la sección de Utilitarios, buscamos
Navigation Controller.
El Navigation Controller, al ser creado, viene por defecto con un UIViewController, que
posee un TableView, como su RootViewController. El RootViewController viene a ser
el primer ViewController que será mostrado por el Navigation View. Si nuestro interés
es el de dar uso al ViewController que viene por defecto, lo conservamos; en caso
contrario, lo eliminamos y asignamos otro ViewController como el RootViewController.
Para poder asignarle al Navigation View un RootViewController, nos dirigimos a la

sección de utilitarios y, en la pestaña de Connections, la que se encuentra más a la
derecha, buscamos la opción “root view controller”. Conectamos esta opción
presionando la tecla Control y arrastrando la propiedad hasta el ViewController que
deseemos sea el nuevo RootViewController.
Es recomendable indicar que el NavigationViewController es el StoryBoard Entry Point.

De esta forma, podemos organizar las transiciones de pantalla de nuestra aplicación
desde el inicio de la aplicación.
 Actualmente, deberíamos contar en nuestro DemoStoryBoard con 1

NavigationView que viene a ser nuestro Entry Point.
 Poseemos 3 ViewControllers, uno de ellos es el DemoViewController que

pose el Script DemoViewController y es el RootViewController del
NavigationView.
 Crearemos dos Scripts adicionales que hereden de UIViewController:

DemoTableViewController y DemoCollectionViewController.
 Asignaremos estos a los otros ViewControllers y con el mismo nombre les

asignaremos su Storyboard ID.
 Asignaremos 3 colores diferentes a los backgrounds de cada

UIViewController para poder diferenciarlos al implementar el
NavigationViewController.
o Rojo -> DemoViewController

o Verde -> DemoTableViewController
o Azul -> DemoCollectionViewController
Ahora, procedemos a presionar el botón “Build” y podemos ver que primero se cargará
una pantalla blanca que pertenece al Launch Screen seguida de la pantalla roja que
pertenece a nuestro DemoViewController. (Podemos utilizar un simulador o un
dispositivo).
La barra blanca, que vemos en la parte superior del ViewController, corresponde al

NavigationView. Ahora, procedemos a poner un botón y un título a nuestro
DemoViewController. Creamos la función “SetNavigationBar”. Esta función la
ponemos en el script de nuestro DemoViewController y, junto con esta, creamos dos
funciones: “pressRightNavigationButton” y “pressLeftNavigationButton”.
La función primero define un String para el título del NavigationBar. Luego de ello,
configura el botón izquierdo, el cual no será utilizado; por ello, lo llenamos con un texto
vacío. Además, al botón derecho, que sí posee un texto, le configuramos el tamaño, la
fuente y el color de texto. A ambos botones, les agregamos una función por medio de
un “Targuet”, de esta forma, al ser presionados, llamarán a las funciones respectivas
de cada uno.
Ahora, ponemos la función en el ViewDidLoad y veremos cómo se configura el

NavigationBar cuando damos Build al proyecto.
Ahora, si deseamos cambiar de pantalla utilizando el NavigationBar, solo debemos

indicar un método que se active con algún evento. En este caso, lo realizaremos en el
“pressRightNavigationButton”. Una vez presionado, podemos ver cómo cambiamos al
DemoTableView.
Como podemos observar, se genera automáticamente un botón para retornar al

ViewController previo; sin embargo, es muy posible que este no coincida con nuestros
diseños.
Procedemos a crear las mismas funciones en el DemoTableViewController y, en este

caso, configuraremos el botón izquierdo del NavigationController para que lleve el
nombre DemoView y el título TableView
Para poder regresar al anterior ViewController, procedemos a crear la función

PopViewController del NavigationController. Hecho esto, notaremos que el botón del
DemoView controller que nos cambiaba de pantalla ya no funcionaba, y eso es debido
a que reconfiguramos los botones superiores. Por ello, en la función ViewWillAppear,
volvemos a llamar a la función SetNavigationBar.
Con la información obtenida hasta el momento, debemos ser capaces de

navegar hasta la pantalla del CollectionView y regresar hasta el inicio.
2.1.5 Manejo de pantallas por UITabBarController
El TabBar es una herramienta que facilita la transición entre pantallas. A diferencia del
Navigation, el TabBar muestra un menú inferior que nos permite conocer la totalidad
de pantallas que maneja y, con un clic, podemos pasar a cualquier pantalla que
contenga el TabBar sin tener que pasar por las demás.
Para crear un TabBar, debemos dirigirnos a la sección de Utilitarios. En la parte

inferior, buscamos TabBar y escogemos el TabBar Controller, lo arrastramos a nuestro
StoryBoard.
El TabBar se crea con 2 ViewControllers por defecto, los eliminamos. Luego de ello,
procedemos a indicar el TabBar como el nuevo StoryBoard Entry Point. Ahora,
cuando empieze la aplicación, podemos ver primero el TabBar.
Retiramos el RootViewController del NavigationController y los segues de los 3

ViewControllers. Luego de ello, procedemos a insertar los 3 ViewControllers en el
TabBar. Para ello, en la sección de Utilitarios, buscamos la pestaña más a la derecha,
“connections”, y buscamos la propiedad “view controllers”. Presionando la tecla
Control, arrastramos esta propiedad a los 3 ViewControllers, esto los añadirá al arreglo
de ViewControllers del TabBar. Recordemos que el orden en que son ingresados es
el mismo orden en que se mostrarán en la parte inferior del TabBar.
Ahora, debemos indicar qué título y qué imagen deben llevar cada uno de los
ViewControllers en el TabBar. Para ello, escogemos la opción Ítem en los
ViewControllers.
En Utilitarios, en la pestaña de atributos, podemos configurar el título y la imagen que

llevará. Bien podemos usar las opciones del TapBar Ítem que nos creará un ícono y
un texto predeterminado, o usar las opciones del Bar Ítem que nos permitirá configurar
un título y una imagen personalizados.
Antes de presionar Build, nos aseguramos de comentar el código que habíamos

realizado para el Navigation Controller. Ahora, podemos observar el TabBar con los
botones que nos llevarán a las diferentes pantallas.
Finalmente, ambas herramientas, el TabBar y el NavigationController, no son

excluyentes. Podemos poner un TabBar dentro del Navigation controller o un
Navigation dentro del TabBar, depende del desarrollador como organizarse para
utilizar las herramientas.
Resumen
1. Los StoryBoards son los archivos que nos ayudarán a manejar el flujo de pantallas
y las herramientas que implementaremos en cada ViewController.
2. El ciclo de vida de un ViewController está definido por varias funciones que

disparan eventos en momentos cruciales del ViewController.
3. El Navigation Controller es una herramienta que nos facilita la transición entre

pantallas de forma ordenada y presenta una barra superior donde podemos poner
ítems personalizados.
4. El TabBar es una herramienta que nos facilita la transición entre pantallas de forma
directa. Los ítems inferiores son personalizables y no requiere de código para su
implementación.
5. Tanto el TabBar como el Navigation Controller, no son herramientas excluyentes.

Depende del desarrollador combinarlas de forma eficiente.
unidad:
 https://www.raywenderlich.com/113388/storyboards-tutorial-in-ios-9-part-1
 https://developer.apple.com/library/ios/documentation/WindowsViews/Conceptu
al/ViewControllerCatalog/Chapters/TabBarControllers.html
 https://developer.apple.com/library/ios/documentation/WindowsViews/Conceptu
al/ViewControllerCatalog/Chapters/NavigationControllers.html
2.2 MANEJO DE ELEMENTOS EN PANTALLA
2.2.1 Componentes básicos de interfaz de usuario (UILabel, UITextField,

UIImage, UIButton, etc.)
Existe una gran variedad de elementos para la interfaz de usuario, los más básicos
podemos encontrarlos en la librería del Cocoa, en Utilitarios en la parte baja. Para
poder agregarlos al ViewController, lo único que debemos hacer es arrastrarlos desde
ahí al ViewController y posicionarlos.
Todas estas herramientas deben ser referenciadas en nuestra Script del View
Controller. Para ello, habilitamos el Asistant Editor, se encuentra encima de la sección
de Utilitarios y tiene la imagen de dos circunferencias interseccionándose. Cuando lo
habilitamos, vemos que se abren dos ventanas. En una de ellas, ubicamos nuestro
StoryBoard y, en el otro, la Clase DemoViewController.
Para poner referencias de las herramientas rápidamente, seleccionamos y

presionando la tecla Control, arrastramos a la parte superior del código, entonces se
creará una variable que contendrá la referencia de la herramienta. Recordemos que
se abrirá una interfaz para definir las propiedades de la variable.
Todas estas herramientas son completamente intuitivas, tanto su programación como

su configuración en el StoryBoard. Se debe tomar en cuenta que todas están
referenciadas en el Storyboard y que, para poder ser modificadas, el ViewController
debe primero haber sido cargado en memoria. Estas herramientas se cargan por
defecto con la información que está configurada en el StoryBoard. Luego de ello, se
pueden programar según convenga. Se deben realizar ejercicios en Clase con el
profesor para el uso de las herramientas.
2.2.2 Configuración de UIScrollViewController
Una de las herramientas más usadas en el desarrollo de vistas en aplicaciones viene a

ser el Scroll. Herramienta que facilita poder poner en pantalla más información que la
que alcanza en los límites de la pantalla. El usuario puede deslizar su dedo en
pantalla de forma vertical u horizontal para visualizar el contenido completo de la
pantalla.
Para crear un ScrollView, debemos, primero, crear un ViewController, utilizaremos

nuestro DemoViewController. Para ello, eliminamos los objetos que estén dentro del
View principal. De la lista de herramientas del Cocoa, buscamos el Scroll View,
arrastramos la herramienta a nuestro DemoViewController.
Luego de poner el ScrollView, lo extendemos hasta llegar a los límites del

DemoViewController. Ahora, todas las herramientas que correspondan al
DemoViewController deben ir dentro del ScrollView, de tal forma que puedan
acumularse a lo largo y ancho del ScrollView, aun saliendo de los límites visibles del
ViewController.
Ahora, necesitamos determinar los atributos del ScrollView.

Estas propiedades nos ayudan a determinar la apariencia del ScrollView. Podemos

activar y desactivar los indicadores del Scroll, activar y desactivar la función del Scroll
y los rebotes del Scroll. Finalmente, para poder realizar un código más profundo,
procedemos a agregar el ScrollView a nuestro Script, de la misma forma que
agregamos cualquier otra herramienta.
Lo más importante es el manejo de las medidas del frame y del contenido. Para esto,
debemos recordar que, si deseamos que el Scroll funcione, el contenido debe ser
mayor al frame en alguna de las dimensiones, height o width. Para que el contenido
se vea completamente dentro del ScrollView, debemos calcular matemáticamente la
totalidad de elementos y definir el tamaño del contenido dependiendo de ello.
Para poder indicar todo esto, poseemos dos variables dentro del ScrollView: el frame y
el contentsize. El frame nos dará el tamaño y la ubicación de la herramienta, mientras
que el contentsize nos dará las medidas para el alto y ancho del contenido.
2.2.3 Configuración de tablas con celdas dinámicas

Para poder crear una tabla, debemos, primero, tener un ViewController. Para ello,
usaremos nuestro DemoTableViewController. Buscamos el TableView en las
herramientas del Cocoa y, luego de ello, procedemos a arrastrarlo al
DemoTableViewController. Hecho esto, agrandamos la tabla a la medida deseada; sin
embargo, notaremos que viene sin celdas. Para poder agregar una celda, debemos
buscar en las herramientas del Cocoa una llamada Table View Cell, la arrastramos y la
ponemos dentro de la Tabla.
Ahora, debemos asegurarnos que, al configurar la tabla, podamos indicar qué celdas
deseamos poner en ella. Para ello, lo primero que hacemos es configurar la celda,
todas las celdas poseen un identificador; por ello, es importante que este tenga un
nombre totalmente diferente a las demás. Para poder programar una celda, debemos
asociarla a una Clase, que herede de UITableViewCell, de la misma forma que
asociamos los ViewControllers a una Clase. Entonces, procederemos a asignar un
identificador para la celda y crear una Clase para la celda.
El identificador podemos ubicarlo en la parte de utilitarios en la opción de atributos.

Podemos crear la Clase de la misma forma que creamos otros Script, indicando que
herede de la Clase TableViewCell.
Ahora que tenemos la Clase creada, procedemos a asociar nuestra celda.

Ahora que tenemos la celda asociada a su Clase, debemos poder indicar, en la tabla,
qué información deseamos ponerle y cuándo. Para ello, debemos indicarle a la tabla
dos atributos importantes: Delegate y DataSource. El Delegate indica qué Clase es la
encargada de manejar los eventos relacionados a la tabla; y el DataSource, qué
información debe ser presentada en la tabla.
Para poder asociar estos atributos a la Clase, seleccionamos el TableView. Nos

dirigimos a la sección de Utilitarios y, en la pestaña de conecciones, podemos ver los
atributos Delegate y DataSource. Seleccionamos cada uno de los atributos y los
conectamos con el DemoTableViewController.
Ahora que hemos asociado la tabla, debemos preparar nuestro Script para que pueda
proporcionar la información necesaria a la tabla. Primero que nada, procedemos a
heredar las Clases necesarias: UITableViewDelegate y UITableViewDataSource.
Ambas Clases, poseen protocolos con una gran variedad de funciones que nos
permiten implementar diversas funcionalidades a nuestra tabla. Un protocolo es un
grupo de propiedades y métodos que conforman una tarea particular para una
funcionalidad. Estos pueden ser adoptados por Clases, estructuras o enumeradores
para proveer implementaciones adicionales a los delegados de una Clase.
Para más información sobre protocolos, podemos leer la teoría en la página de

desarrolladores de Apple en el siguiente link:
https://developer.apple.com/library/ios/documentation/Swift/Conceptual/Swift_Program
ming_Language/Protocols.html
Ahora, podemos notar que aparece un error al heredar estas funciones. Para
solucionarlo, debemos cumplir con el protocolo necesario para la herencia. Es
necesario que llamemos a un grupo de funciones para cada caso.
UITableViewDataSource:
Existen 4 funciones básicas que debemos configurar para presentar la tabla con los
datos mínimos.
 numberOfSections: Esta función nos indica cuántas secciones tendrá

nuestra tabla.
 numberOfRows: Esta función nos indica cuántas filas tendrá cada sección.
 cellForRowAtIndexPath: Esta función nos indica qué celda debe ubicarse

en una determinada posición. Para ello, primero utilizamos la celda que ya
hemos creado en el StoryBoard.
 heightForRowAtIndexPath: Esta función nos indica el tamaño de una

determinada celda.
Al finalizar, podemos ver las celdas y la tabla cuando presentemos el ViewController.

UITableViewDelegate
Existe una función que debemos manejar, es la que se usa cuando una persona
realiza un clic en una celda determinada.
Esta función nos permite realizar un bloque de código cuando una de las celdas sea
presionada.
Existen muchas más funciones para el DataSource y el Delegate. Para hacer uso de
ellas, debemos investigar sobre las mismas y darles el uso adecuado.
2.2.4 Configuración de colecciones con ítems dinámicos

El manejo de las colecciones es altamente similar al de una tabla. Debemos tener un

ViewController, al cual anexamos una herramienta CollectionView. También, debemos
anexar un CollectionViewCell con su propia Clase y, finalmente, asociar su
DataSource y Delegate con el DemoCollectionViewController.
Una vez que hayamos configurado nuestro CollectionView, debemos dirigirnos al

Script. A diferencia del TableView, el Collection tiene un par de funciones que
debemos configurar. Primero, importamos las funciones UICollectionViewDataSource,
UICollectionViewDelegate y UICollectionViewDelegateFlowLayout.
Ahora, nos encargamos de poner las funciones del protocolo.
UICollectionViewDataSource
Estas funciones son iguales a las del TableView, la única diferencia es la llamada de la
celda a poner.
UICollectionViewDelegateFlowLayout
La Clase UICollectionViewDelegateFlowLayout nos permite modificar las medidas de

los ítems que se presentarán en el CollectionView y, con ello, los márgenes que
manejarán un ítem con otros.
UICollectionViewDelegate
Finalmente, la función que nos permitirá realizar un bloque de código si es que se

presiona un Ítem de la colección. Hecho todo esto, podemos visualizar el
CollectionView.
2.2.5 Configuración de paginadores (UIPageViewController)
Los paginadores son herramientas que permiten a los usuarios deslizarse entre varios
ViewControllers. A diferencia del Navigation y el TabBar, estos no abarcan el tamaño
total de la pantalla, abarcan un espacio definido por el desarrollador.
Para la creación de un paginador, necesitamos de un PageViewController. Esta

herramienta la podemos ubicar en el listado de herramientas del Cocoa. También,
necesitaremos de un ViewController que vaya a contener al PageView y, finalmente,
los ViewControllers que vayan dentro del PageView. Crearemos estas herramientas
en nuestro StoryBoard.
En estos momentos, debemos posee un ViewController que contendrá el PageView (el

de color blanco), un PageViewController que contendrá nuestro grupo de
ViewControllers (el de color gris) y, finalmente, un grupo de ViewControllers que se
mostrarán en el paginador (los de color rojo, azul y verde).
Ahora, debemos crear un contenedor para el PageView dentro de nuestro

ViewController. De las herramientas del Cocoa, obtenemos un View y lo ponemos
dentro de nuestro ViewController, le asignamos las medidas que deseamos.
Ahora, tenemos un contenedor para el PageView (el view amarillo). Lo que debemos
hacer, ahora, es otorgar los StoryBoards a los respectivos ViewControllers y al
PageView. Luego de ello, debemos crear los Scripts respectivos para cada uno de
ellos y asociarlos.
Debemos tener 4 Scripts, uno para el MainViewController y otros 3 para cada

ViewController de diferente color, cada uno con un StoryBoardId. Adicionalmente, el
PageViewController, también, debe poseer un StoryBoardId.
Ahora, debemos proceder a implementar el Script para el funcionamiento de nuestro

PageView. Lo primero que tenemos que hacer es jalar la referencia del
ViewContenedor (el amarillo) al script de nuestro MainViewController.
Una vez hecho esto, creamos una variable que pueda contener nuestro
PageViewController. Luego de ello, llevamos la referencia del PageViewController del
StoryBoard por código, le indicamos su DataSource, su Delegate, un tamaño y una
posición. Finalmente, lo introducimos al ViewContainer.
Ahora, es necesario heredar las dos Clases para el DataSource y el Delegate. Por
temas de orden, realizaremos esta parte de la herencia y protocolo en una extensión
de la Clase, en el mismo Script al final de la Clase MainViewController.
Ahora, debemos crear dos funciones antes de empezar a implementar el protocolo

necesario. Primero, necesitamos de una función que nos permita indicarle al
PageView que ViewController corresponde a un determinado Índice. En esta función,
podemos realizar cualquier configuración adicional que el ViewController necesite,
además debemos conservar una referencia del Índice del ViewController. Esta
referencia la guardaremos en el Tag del View principal del ViewController. De esta
forma, cuando obtengamos información de un ViewController en el Delegate, podemos
identificarlo por este medio. Esta función “ViewControllerAtIndex” recibirá como
parámetro un Index, de tipo Int y nos devolverá un UIViewController.
Lo que necesitamos, a continuación, es la función que inicializa nuestro PageView, en

el cual indicaremos el ViewController que deseamos utilizar como primer
ViewController.
Esta función la llamaremos en el ViewDidLoad después de haber agregado el

PageView dentro del ViewContainer. Finalmente, cuando agregamos un
ViewController, el DataSource por defecto buscará generar los ViewControllers
laterales. Para ello, poseen dos funciones: ViewControllerBeforeViewController y
ViewControllerAfterViewController, las cuales deben ser configuradas según las
necesidades de la aplicación. A continuación, se mostrará un ejemplo de ello.
Estas funciones revisan del ViewController actual cuál es su índice, del cual habíamos
guardado previamente la referencia en su Tag. Luego de ello, según el índice, indican
cuál debería ser el siguiente ViewController o el anterior.
Para cumplir con el protocolo del DataSource, hacen falta dos funciones, las cuales
devolveremos con un valor de 0.
Finalmente, debemos conservar una referencia del ViewController que se está

mostrando en todo momento. Para ello, vamos a utilizar el método
DidFinishAnimating, el cual pertenece al Delegate y con el cual obtendremos el índice,
el ViewController que se está mostrando en el momento, y almacenaremos ese índice
como referencia en el Tag del PageView.
Finalmente, para poder ubicar el PageControl (los puntos inferiores que indican el
avance del PageView), podemos hacerlo por medio de los método del DataSource o
preferible por medio de la creación de un PageControl. Esto debe ser indicado
durante las horas de Clase por el profesor.
2.2.6 Creación y manejo de CustomViews

De la misma forma, como se crean los ViewControllers, también, podemos crear Views
pre fabricados para su utilización. Estos son los CustomViews. Estos pueden ser
configurados y luego llamados por código según nuestra conveniencia. Para crear un
CustomView, necesitamos crear un archivo .xib. Para ello, vamos a File / New /File y
se nos presentará una ventana donde podremos seleccionar la opción UserInterface y
escogeremos la opción View.
Para poder indicar el tamaño del View, nos dirigimos a la opción de atributos en la
sección de Utilitarios. En estos, ubicamos la opción “size” y la configuramos como
“FreeForm”.
Una vez hecho esto, podemos cambiar el tamaño del CustomView a una medida más
conveniente para trabajarlo. Para ello, vamos al Size Inspector y, en la opción Width y
Height, indicamos las medidas convenientes.
Hecho esto, podemos modificar el View de la misma forma como si se tratase de un

ViewController. Podemos agregar cualquier herramienta del Cocoa y configurarlas.
Finalmente, podemos crear un Script para el View que herede de UIView y, en este,
hacer referencia de las herramientas del Cocoa y trabajarlas igual que de si fuera un
UIViewController.
Finalmente, solo nos queda referenciar y agregar el Custom View por código donde lo
necesitemos. Para ello, se utiliza el siguiente código.
Resumen
1. El UIScrollView nos permite mostrar información al usuario con una herramienta
que permite deslizar información más allá de los límites de la pantalla.
2. Las tablas nos permiten mostrar al usuario información ordenada en forma, solo es
posible configurar la altura de la celda más no las otras dimensiones.
3. Las colecciones nos permiten mostrar al usuario una serie de ítems con un orden
definido por el desarrollador. Las dimensiones de los ítems son configurables.
4. El PageView nos permite mostrar al usuario un grupo de ViewControllers al

usuario, los cuales podrá deslizar uno tras otro sin abarcar necesariamente el total
de la pantalla.
5. Los CustomViews nos permiten configurar Views para luego ser llamados por
código según la conveniencia del desarrollador.
unidad:
 https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIViewC
ontroller_Class/index.html
 https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIPageV
iewControllerClassReferenceClassRef/index.html
 https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITable
View_Class/
2.3 CONSTRAINTS
2.3.1 Fundamentos sobre Constrains
Los Constraints dependen totalmente del sistema de AutoLayout, el cual se encarga

de calcular dinámicamente el tamaño para todas las vistas internas según las medidas
dadas por los Constraints. Por ello, el uso de los Constraints permite conservar las
medidas proporcionales de los Views para que sin importar el tamaño de la pantalla o
la resolución de la misma se pueda conservar el diseño en los diferentes dispositivos.
El sistema de AutoLayout se activa siempre que se dé un cambio externo sobre los

ViewControllers. Estos cambios se activan cuando sucede uno de los siguientes
eventos:
 El usuario modifica el tamaño de la pantalla. Esto se da en aplicaciones de

escritorio.
 El usuario entra o sale de vistas divididas en un Ipad.
 El dispositivo rota.
 La vista de llamada entrante o de grabado de voz se activan.
 Cuando deseamos manejar diferentes tamaños de pantalla o de resolución.
El AutoLayout, también, se activa cuando uno realiza un cambio interno sobre los
ViewControllers. Estos cambios se activan cuando sucede uno de los siguientes
eventos:
 El contenido mostrado por la aplicación cambia.
 Cuando la aplicación soporta configuración internacionalizada.
 Cuando la aplicación soporta Estilos Dinámicos.
2.3.2 Creación de Constraints por StoryBoard
Para poder crear un Constraint, por medio del Storyboard, existen dos medios:
seleccionamos nuestro View al que deseamos colocarle un Constrain y presionamos la
segunda opción en la parte inferior de la interfaz del StoryBoard. Esto nos abrirá un
panel con opciones para colocar diferentes Constraints.
En esta ventana, encontramos una gran variedad de Constrains que podemos

implementar en el View seleccionado. Adicionalmente, tenemos otra forma de
implementar un Constrain: podemos seleccionar un View y establecer un Constraint
con respecto a otro View. Para realizar esto, debemos seleccionar el View y
presionando la tecla Control arrastramos al View con el que deseamos realizar un
Constraint. Aparecerá un panel que nos permitirá crear un Constraint.
Por otro lado, si deseamos crear un Constraint del View consigo mismo, debemos
arrastrar el View a sí mismo presionando la tecla Control, mostrando otro panel que
permitirá agregar otro grupo de Constraints.
Ahora que hemos agregado los Constraints en nuestros Views, podemos configurarlos
en el panel de Utilitarios. Seleccionamos el View respectivo, vamos a la sección de
Utilitarios y, en el Size Inspecter, podemos encontrar los Constraints relacionados al
View seleccionado. Hacemos doble clic en el Constraint y abriremos una interfaz para
poder modificarlo.
De esta forma, podemos crear y configurar Constraints por medio del StoryBoard.
2.3.3 Creación de Constrains por código
Los Constraints creados por código tienen la misma funcionalidad que los creados por
medio del StoryBoard. Estos son creados dentro de variables que los contengan y son
agregados a los Views apilados uno sobre otros. Se debe mantener la referencia de
estos para poder modificarlos en tiempo de ejecución y, dependiendo del tipo de
Constaint, pueden variar los campos a modificar.
El siguiente es un ejemplo de Constraints agregados a un UIView creado por código.

2.3.4 Manejo de Constrains en tiempo de ejecución
Cambiar un Constraint en tiempo de ejecución, requiere tener una referencia del

Constraint por código. Si has creado el Constraint por código, entonces ya se posee
una variable con su referencia; en caso contrario, si la hemos creado por medio del
StoryBoard, debemos referenciar el Constraint de la misma forma que referenciamos
cualquier otra herramienta al Script, presionando la tecla Control la arrastramos al
Script.
Si bien al tener nuestra referencia del Constraint nos permite cambiar el valor del
Constraint en cualquier momento, existe un momento en el ciclo de vida del
ViewController en que se deben reasignar los Constraints de ser necesario. La
función ViewDidLayoutSubviews se activa cada vez que se realiza un evento que
afecte al ViewController. Estos eventos fueron explicados con anterioridad. En esta
función, podemos reasignar los Constraints y configurarlos según sea necesario.
Resumen
1. El AutoLayout es el sistema que se encarga de reasignar las medidas del View de
forma dinámica por medio de los Constraints.
2. Los Constraints pueden ser creados por medio del StoryBoard de formas
diferentes. Todas estas permiten que se relacione un View con su contenedor, con
otro View o consigo mismo.
3. Los Constraints pueden ser creados por medio de código, ser referenciados a una
variable y de esta forma agregados a un View.
4. Los Constraints pueden ser modificados por código en tiempo de ejecución,

siempre que se tenga una referencia al Constraint en una variable.
5. El evento del ciclo de vida del ViewController, que es llamado cuando un

ViewController es afectado por eventos internos o externos, se llama
ViewDidLayoutSubviews y permite que se vuelvan a configurar los Constraints.
unidad:
 https://developer.apple.com/library/ios/documentation/UserExperience/Concept
ual/AutolayoutPG/
UNIDAD
3
ACCESO A DATOS
Al término de la unidad, el alumno podrá acceder a servicios REST, manejar archivos
JSON, almacenar información en el dispositivo y acceder a la información de forma
ordenada.
TEMARIO
3.1 Tema 6 : Implementación de un API y Servicios Rest
3.1.1 : Creación de un Rest Api Manager
3.1.2 : Consumo de servicios Rest
3.1.3 : Envío y recepción de Datos JSON
3.2 Tema 7 : Almacenamiento de Datos

3.2.1 : Implementación de UserDefaults
3.2.2 : Implementación de Base de datos en Core Data
3.2.3 : Implementación del KeyChain para datos protegidos
3.2.4 : Consumo de datos guardados
 Los alumnos procederán a crear una aplicación empleando StoryBoars.

 Los alumnos crearán un flujo de pantallas con diferentes ViewControllers.
 Los alumnos implementaran tablas y colecciones en su proyecto.
 Los alumnos implementan el Navigation Controller y el TabBar para su
proyecto.
 Los alumnos implementaran Constrians para su proyecto.
3.1 IMPLEMENTACIÓN DE UN API Y SERVICIOS REST
3.1.1 Creación de un Rest Api Manager
Para la creación de nuestro Rest Api Manager, vamos a hacer uso de una librería Pod
muy conocida y gratuita, Alamofire. Para ello, creamos un nuevo proyecto. En base a
ese proyecto, crearemos nuestro WorkSpace usando nuestro Terminal y habiendo ya
instalado nuestro CocoaPods. En nuestro archivo Podfile, agregamos nuestra librería
pod 'Alamofire'. Luego de ello, haremos un pod install al podfile y creamos, con ello, la
librería en nuestro WorkSpace.
Ahora que tenemos nuestro WorkSpace con el Pod de Alamofire, necesitamos crear
un Script que nos permita manejar las llamadas Rest. Creamos un archivo Swift con
nombre NetworkManager. En este, crearemos una Clase NetworkManager y, dentro
de ella, una función con la cual podremos hacer llamado a un servicio Rest.
Esta función requiere de un CompletionBlock, el cual definimos fuera de la Clase.

Luego, tenemos una variable String que conservará la raíz de la URL de los servicios
Rest a llamar. Podemos ver que se crea una variable estática que nos referencia a la
Clase para hacer llamados de la función en cualquier parte del proyecto y, finalmente,
el método solicita entre sus parámetros el resto de la URL del servicio, los parámetros
del servicio llamado, y el CompletionBlock que se llamará al regreso del servicio.
3.1.2 Consumo de servicios Rest
Para realizar el consumo de un Api Rest, debemos primero en nuestro código definir
en qué parte deseamos realizar el consumo, sea bien presionando un botón, llenando
una tabla o iniciando un ViewController. El siguiente código muestra una forma en que
podríamos llamar a nuestra función creada previamente.
En el ejemplo, vemos que la primera variable a enviar es la URL que concatena con la
URL base que tenemos registrada en la Clase estática. Como parámetro, deberíamos
enviar un Dictionary; sin embargo, esto lo hacemos solo si es necesario. Esta opción
también acepta un nulo. Finalmente, el CompletionBlock está definido por una
respuesta manejada por dos variables: el boleano “finished” y el diccionario “result”.
En caso se haya logrado finalizar con éxito el llamado al Api, entonces se llamará al
CompletionBlock y el valor del booleano “finished” determinará si se completó o no con
éxito. De ser exitoso, vendrá con valor “true”; en caso contrario, vendrá con valor
“false”. Luego de ello, podemos procesar la información como mejor creamos
conveniente. Tomemos en cuenta que la información relevante, que nos devuelva el
servicio, se encuentra en el diccionario “result”, el cual procesaremos en nuestra
aplicación.
3.1.3 Envío y recepción de Datos JSON
La librería Pod Alamofire nos hace el trabajo de encriptar y desencriptar la información

que nos llega en formato JSON y la convierte en un amable Diccionario fácil de leer
para nosotros. Sin embargo, es necesario tener conocimiento de la estructura de los
mismos.
Veamos el caso del iTunes, este posee un servicio Rest gratuito, el cual se consume
únicamente por medio de una URL. Esta posee una estructura raíz seguida de un
comando de búsqueda.
La URL raíz:
A esta URL raíz, debemos agregarle un comando de búsqueda. Para fines didácticos,
utilizaremos el siguiente comando:
La siguiente URL hará un llamado al Api Rest y nos devolverá las búsquedas en el
iTunes. Estas serán hechas en el store de Perú con la palabra “britney”.
La respuesta nos traerá un diccionario con 2 valores: uno es “resultCount”, que nos
indica la cantidad de resultados que se encontraron; y “result”, que viene a ser un
arreglo que contiene varios diccionarios, cada diccionario con la información de cada
canción encontrada con dichos parámetros.
Ahora, analicemos a detalle los parámetros enviados por el servicio de iTunes.

Este nodo representa a la información de una canción determinada. El leer la

información que viene del servicio antes de empezar a procesarla es importante, de
esta forma sabremos cómo castear correctamente los datos. Primero, vemos, en el
diccionario, aquellas palabras que están de color rojo que son las Keys para cada uno
de los atributos que nos envían. Luego, podemos ver que hay datos que son valores
Int y otros que son valores String. Hay datos tipo float que deben ser identificados,
son los números con un valor decimal. También, podemos visualizar valores “true”
que representan booleanos.
Gran parte de los datos son direcciones URL que apuntan a imágenes para mostrar.
Estas pueden ser mostradas por medio de una imagen web. La mayor consideración
que se debe tomar es que es posible que los arreglos vengan vacíos; por ello, deben
ser casteados primero como arreglos simples y, luego, con ese dato, inicializar
cualquier otro tipo de arreglo que se necesite.
Resumen
1. Alamofire es la librería Pod que nos ayudara a realizar el consumo de servicios
Rest.
2. La librería alamofire se encarga de encriptar y desencriptar la data enviada y nos la

otorga en formato JSON.
3. Es importante que se posea una función estática que nos permita consumir los
servicios Rest desde cualquier parte de nuestra aplicación.
4. Los servicios Rest, el JSON otorgado por la librería, se otorgara en formato

Dictionary, el cual debe ser procesado por el usuario para obtener la data y
presentarla.
unidad:
 https://github.com/Alamofire/Alamofire
 https://www.raywenderlich.com/121540/alamofire-tutorial-getting-started
3.2 ALMACENAMIENTO DE DATOS
3.2.1 Implementación de UserDefaults
La Clase NSUserDefaults provee una interfaz pragmática para interacutar con las
preferencias de la aplicación. Podemos pensar en ella como un diccionario para
almacenar los datos de configuración de la aplicación. Es común utilizar este
diccionario para guardar información del usuario que se encuentra utilizando la
aplicación. Esta data se conserva después de que hayamos cerrado la aplicación,
pero se borra si eliminamos la aplicación del dispositivo.
La información debe ser guardada de la misma forma como si se tratase de un

diccionario, usando una key que nos permita reconocer la data que deseamos guardar
y al obtenerla pasearla de forma adecuada. Si no indicamos el tipo de dato correcto,
entonces la aplicación se caerá. Para poder guardar información en el
NSUserDefaults, usaremos el siguiente código:
En este caso, vamos a guardar un String (“dato a guardar”) bajo la key “the_key”. El
dato puede ser cualquier otro, recordemos que este diccionario acepta cualquier tipo
de objeto. Es importante sincronizar la data luego de haber hecho algún cambio en el
diccionario del NSUserDefaults. Como se trata de una Clase estática, podemos
acceder desde cualquier parte de nuestra aplicación para guardar los datos que
necesitemos. A continuación, se muestra un ejemplo de cómo obtener información del
NSUserDefault.
Ahora que hemos obtenido el dato del NSUserDefaults, es muy importante saber qué
tipo de dato estamos obteniendo, para poder castearlo adecuadamente y para que no
nos traiga problemas al implementarlo.
3.2.2 Implementación de Base de Datos en Core Data
Para la implementación de Base de datos en Core Data, haremos uso de una librería
Pod que nos facilitará el manejo de datos de la tabla. Para ello, primero, creamos una
aplicación que indique el uso de Core Data. Al momento de poner el identificador de la
aplicación y el nombre, seleccionamos, en la parte inferior, la opción Use Core Data.
Luego de crear la aplicación, procedemos a crear el Podfile para tener nuestro

WorkSpace, ponemos el nombre de la librería que utilizaremos en nuestro Podfile y,
por medio del Terminal, realizaremos el PodInstall. MagicalRecord es una librería
gratuita y que nos facilitará el acceso al uso de base de datos en los proyectos de iOS.
Hecho esto, podemos visualizar, en nuestro proyecto, un archivo que nos permitirá la
creación de tablas y relación entre ellas. En este ejemplo, solo realizaremos la
creación de una tabla simple y el almacenamiento de datos. Busquemos en nuestro
proyecto el archivo .xcdatamodeid.
Este archivo nos mostrará una interfaz para la creación de una tabla. Presionamos la
opción “Add Entity” y veremos cómo se agrega una entidad en la parte superior
derecha. Luego de ello, podremos editar el nombre de la entidad haciéndole doble
clic.
Ahora que tenemos nuestra entidad DemoTable, procedemos a agregar un par de

atributos. En este caso, simularemos los datos de un usuario.
Ahora que tenemos nuestros atributos creados, procedemos a crear un objeto que
maneje nuestra entidad por medio de código. Para ello, en la barra de herramientas,
escogemos la opción Editor / Create NSManageObject Subclass.
Una vez que hemos creado los Script, previamente escogiendo la entidad que
deseamos enlazar a los Scripts, podemos llamar la referencia a ellos por medio de la
Clase creada.
Ahora, debemos crear una Clase que nos permita acceder a la base de datos, guardar
datos y poder acceder a nuestros datos guardados. Creamos un archivo Swift, este lo
generamos desde a File / New / File. Importamos la librería MagicaRecord y creamos
la Clase DataBaseManager.
Esta Clase tiene su propia referencia estática para poder ingresar a ella desde
cualquier parte de nuestro proyecto. Ahora, crearemos una función que nos permita
crear una entidad y agregarla a nuestra base de datos.
La función CreateEntity nos permite crear una nueva entidad. Esta se inicializa con
valores predeterminados y nos devuelve dicha entidad para utilizarla como
consideremos. Ahora, cuando creamos una entidad, esta se agrega a la base de
datos; sin embargo, para guardar los cambios realizados a la tabla, debemos crear
una función que nos permita guardar dichos cambios.
Esta función nos permite guardar los cambios realizados en la tabla de la base de
datos. Lo siguiente que deseamos es crear una función que nos devuelva las
entidades de la tabla.
Estas 3 funciones nos permiten obtener entidades de la base de datos, la primera nos
devuelve todas las entidades dentro de la tabla DemoTable; la segunda, la primera
entidad encontrada con un valor definido en un atributo; y la última, un arreglo de
entidades con un valor definido en un atributo.
Finalmente, necesitamos un par de funciones para eliminar entidades de la tabla,

Estas dos últimas funciones nos permitirán eliminar entidades de la tabla, la primera
nos permite borrar una entidad mientras que la segunda borra todas las entidades de
la tabla. Todas estas funciones son accesibles desde cualquier parte del proyecto,
debido a que se encuentran en una referencia estática, y depende del orden que
maneje el desarrollador para hacer buen uso de ellas.
3.2.3 Implementación del KeyChain para datos protegidos
El KeyChain es una herramienta para el guardado de datos privados del usuario.

Estos se guardan en el dispositivo y permanecen en el dispositivo, aun después de
eliminar la aplicación. Son datos como claves, correo electrónico, id de Facebook, etc.
Para hacer uso del KeyChain, vamos a utilizar la librería, la cargamos con nuestro
Podfile. Esta librería facilita, en gran medida, el uso de nuestro KeyChain. Se encarga
de cargar y descargar la data por nosotros por medio de simples comandos, solo con
importar la librería en la Clase deseada.
Para la importación de esta librería, debemos tomar en cuenta que la versión 3.0 es
funcional con Swift 2.2 y la versión 4.0 es funcional con Swift 3.0. Se debe tomar en
cuenta esto para hacer la exportación adecuada.
Ahora que tenemos la librería KeychainSwift, procedemos a importarla en la Clase que

vamos a usar. Luego de ello, procedemos a crear una variable tipo KeyChainSwift, la
cual usaremos como instancia de la Clase para guardar y obtener datos del KeyChain.
Ahora, debemos recordar que los valores guardados en el KeyChain deben ser String,
Bool o NSData, y podemos utilizar estas funciones para administrar estos valores
guardados.
La primera función nos permite guardar un dato específico bajo una llave en el
KeyChain. La segunda función nos permite obtener un dato específico bajo una llave
tomando en cuenta que se conoce el tipo de dato para castearlo. Finalmente, la última
función borra todas las variables guardadas en el KeyChain. Utilizar estas funciones
adecuadamente permite el uso correcto de los datos del KeyChain.
Resumen
1. El NSUserDefaults es un sistema de guardado de datos de las aplicaciones,
generalmente usado para información de configuración de la aplicación.
2. Para el uso de la base de datos en Core Data, utilizamos la librería MagicalRecord

que nos facilitará el almacenar y obtener data de nuestras tablas.
3. El KeyChain es un sistema de guardado de datos protegidos en nuestro

dispositivo. Estos datos permanecen en el dispositivo aun después de eliminar la
aplicación; asimismo, utilizamos la librería KeyChainSwift para facilitar su
utilización.
unidad:
 https://github.com/magicalpanda/MagicalRecord
 https://github.com/marketplacer/keychain-swift

Manual 2019 06 Desarrollo de Aplicaciones Móviles II (1922)

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual 2019 06 Desarrollo de Aplicaciones Móviles II (1922)

Cargado por

Copyright:

Formatos disponibles

Desarrollo de

1.2 Tema 2 : Creación y manejo del WorkSpace 32

2.2 Tema 4 : Manejo de elementos en pantalla 66

2.3 Tema 5 : Constrains 90

3.1.3 : Envío y recepción de Datos JSON 101

3.2 Tema 7 : Almacenamiento de Datos 105

En el pasado, la globalización de la información permitió a muchas personas tener

Apple es una empresa que dedicó gran parte de su tiempo en desarrollar un

Aplicaciones Móviles iOS

Unidad 1 Unidad 2 Unidad 3

Introducción Desarrollo de Acceso a

1.2 Tema 2 : Creación y manejo del WorkSpace

 Los alumnos crearán sus propias cuentas en iTunes Connect y en

1.1 CONCEPTOS BÁSICOS DE iOS

1.1.1 ¿Qué es el iOS?

“iOS es un sistema operativo móvil creado por la multinacional Apple Inc.

Figura 1: Ícono de la marca Apple Inc

iOS se deriva de OS X (sistema operativo utilizado para las computadoras de Apple),

El sistema operativo cuenta con una serie de características que permiten su

Pantalla principal. Es en donde se ubican los íconos de las aplicaciones y el Dock,

Centro de notificaciones. El sistema de notificaciones fue rediseñado y, ahora, las

Multitarea Opcional. Permite el uso de varias aplicaciones en simultáneo.

Tecnologías no admitidas. Las versiones anteriores a iOS 8 no permiten el uso de la

Figura 2: Llave termomagnética

1.1.2 Flujo de vida de una aplicación iOS

El iOS frameworks se basa en patrones de diseño, tales como Modelo-Vista-

El punto de inicio, para todas las aplicaciones basadas en C, es la función

El “main” se encarga de dar control del UIKit Framework. La función

 Estructura de una aplicación

Al iniciar la aplicación, la función “UIApplicationMain” crea varios objetos clave

El siguiente diagrama muestra los objetos más comúnmente encontrados en

Figura 3: Objetos clave en una aplicación iOS

Not running: La aplicación no ha sido iniciada o ha estado funcionando, y fue

Inactive: La aplicación se encuentra en primer plano, pero no está recibiendo

Active: La aplicación se encuentra en primer plano y se encuentra recibiendo

Background: La aplicación se encuentra en un plano posterior y se encuentra

Suspended: La aplicación se encuentra en un plano posterior y no se

Figura 4: Flujo de estados en una aplicación iOS

La mayoría de las transiciones entre estados están acompañadas de un método que

1.1.3 Arquitectura de una aplicación iOS

Existen muchos patrones de arquitectura en el mundo; sin embargo, el que se utiliza

Figura 5: Arquitectura aplicación iOS

1.1.4 Fundamentos de Swift

Swift es un nuevo lenguaje de programación para aplicaciones iOS, OS X, watchOS y

Swift simplifica el manejo de memoria utilizando el Automatic Reference Counting

Swift es muy familiar a Objetctive-C, conserva las mismas funciones que se

Respecto a la guía de programación, se puede encontrar toda la información en el

En este manual, podremos encontrar toda la información sobre la sintaxis a utilizar

1.1.5 Creación y administración de cuentas en iTunes Connect y Member

En esta, podemos encontrar información sobre la tecnología y los beneficios de

Una vez que hayamos llenado el formulario, procedemos a presionar el botón

Se nos enviará, al correo electrónico, un código de activación, el cual debemos

La primera vez que ingresemos a nuestra cuenta de desarrolladores de Apple,

Ahora, nos encontramos dentro de nuestra cuenta de desarrolladores. En esta parte,

Inscripción al Programa de Desarrolladores de Apple

Esta sección es la página del Programa de Desarrolladores de Apple. Aquí, podemos

A continuación, se nos presenta la información de nuestro Apple ID y un desplegable

Ahora, nos aparecerá un formulario de contacto, el cual contendrá, en su parte inferior,

Ahora, nos aparecerá un resumen de toda la información ingresada para poder

Ahora, nos aparecerá la información del costo del programa de desarrolladores.

Luego de ingresar los datos, presionamos Continue.

Ahora, podemos visualizar un resumen de la compra. Una vez revisada la operación,

Una vez terminado el proceso, nos aparecerá un resumen de la compra realizada y se