PDF de programación - Introducción a la Interfaz de usuario de IOS

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



Guía de Laboratorio N°02 b

(para desarrollarse en casa, se recomienda para los grupos que harán

la segunda versión del proyecto de aplicación en IOS)

“Introducción a la Interfaz de usuario de IOS”

Objetivos:

Que el estudiante:

 Conozca la declaración e implementación de los controles básicos en la programación en
IOS haciendo uso de ViewControllers para realizar el diseño de la interfaz y el uso de
archivos de declaración (.h) e implementación (.m) para definir el manejo de estos.

 Se le facilite el Incorporar nuevos controles, siguiendo la lógica de controles de similar

comportamiento.


Descripción:

Esta práctica consistirá en crear un programa que contendrá una ViewControllers que mostrarán
el uso de cada uno de los controles básicos de IOS (Button, Label, TextField, Switch, etc) con su
respectiva interfaz de usuario (ViewController). Cada ViewController será llamado por medio de
otro ViewController que llamaremos Main.storyboard, este lo usaremos para mostrar un “Menú”
por medio de Botones (Buttons).



UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



Índice



Creación de proyecto......................................................................... 1

Main.storyboard (Menu) ................................................................... 5

Creación de las Vistas para las opciones de menu ............................ 6

Creación de Aplicaciones ................................................................... 8

Vincular Vista con controlador (clases) ........................................... 10

Configuración del menú .................................................................. 14

Vinculacion de Botones del Main.storyboard hacia Vistas ..........................................................16

Enlace de Toolbars con Menú principal........................................................................................20

Controles .......................................................................................... 23

ButtonViewController ..................................................................................................................23

LabelViewController .....................................................................................................................26

TextFieldViewController ...............................................................................................................30

SwitchViewController ...................................................................................................................33

SliderViewController ....................................................................................................................35

PickerViewController....................................................................................................................39

GalleryViewController ..................................................................................................................42

TabViewController .......................................................................................................................45

Listado de Objetos finales en el Proyecto ....................................... 49

StoryBoard Final .............................................................................. 50

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



Creación de proyecto
Al iniciar el programa Xcode, seleccione la opción para crear un nuevo proyecto.



Al presentarse las opciones de proyectos a crear seleccionar la opción de “Single View
Application”, y presionar el botón “Next”, como en la imagen que se muestra a continuación.



En
la creación del proyecto poner como nombre del proyecto el número de carnet
correspondiente seguido de la palabra Controles, y rellenar los campos siguientes como se
muestra en la imagen a continuación.



Ciclo I-2016


Página 1

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



Al presionar “Next” se presentara otra pantalla en la cual se debe seleccionar la opción de
“Create”.



Ciclo I-2016


Página 2

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



En la ventana “general” del proyecto, seleccione el Deployment Target a la versión 9.2



Y en la parte superior izquierda seleccione el dispositivo iphone , ios 9.2

Al iniciar el proyecto, se contienen la cantidad de archivos como los que se presentan a
continuación, los cuales se irán trabajando mediante se va desarrollando la guía.



Ciclo I-2016


Página 3

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



Primero acceder al archivo Main.storyboard, como se presenta a continuación.



Al entrar al archivo Main.storyboard estará accediendo al ambiente grafico de la aplicación, si se
trabajara una aplicación con uso Universal (lo cual implica que la misma aplicación funciona tanto
para ipad o iphone) se presentarían 2 archivos de tipo storyboard, cada uno correspondiente a
cada dispositivo.



Ciclo I-2016


Página 4

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



Main.storyboard (Menu)
Primeramente se presenta una sola pantalla en el Main.storyboard, la cual tiene como una flecha
a la izquierda indicando que la aplicación inicia desde esa pantalla, como se muestra a
continuación.



En este caso se probará con el simulador del Iphone 6 y hay que ajustar el tamaño del view
Controller para ello, buscar en la parte inferior de la pantalla la siguiente opción:



Al dar clic aparecerá una pantalla para modificar el tamaño que debe ajustarse de la siguiente
manera:



Ciclo I-2016


Página 5

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



Ajustar de manera que quede con las opciones:

Al finalizar podrá apreciarse el View Controller de otro tamaño:



Creación de las Vistas para las opciones de menu
Cada pantalla presentada en el Main.storyboard es un objeto de tipo ViewController, los cuales se
pueden agregar desde la barra de utilidades ubicada a la derecha del área de trabajo, arrastrando
el objeto que se muestra a continuación hasta el área de trabajo del storyboard, generando así
varias pantallas en el mismo archivo Main.storyboard.



Ciclo I-2016


Página 6

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



Nota: en la parte inferior izquierda de la ventana de edición del Main.storyboard, esta una barra
de configuración de tamaños para su ventana, presione 2 veces el icono de zoom out para ver los
objetos de manera reducida.



Agregue las pantallas necesarias (7 View Controller más) para que el Main.storyboard se observe
como el que se muestra a continuación. Se observa que las pantallas agregadas no poseen la
flecha al lado izquierdo como la principal.

Para poder trabajar cada pantalla (vista), estas deben de tener archivos .m y .h correspondientes a
cada una de ellas, para eso se debe de crear archivos de este tipo.



Ciclo I-2016


Página 7

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



Creación de Aplicaciones
Para esto seleccionar la carpeta del proyecto (amarilla), hacer clic derecho sobre ella y seleccionar
la opción de “New File…”, como se presenta a continuación.



El tipo de archivo que se desea crear es “Cocoa Touch Class”, seleccionar esa opción cómo se
presenta en la imagen.



Ciclo I-2016



Página 8

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



Al presionar “Next” se presentará la ventana en la cual se ingresara el tipo la subclase de la clase a
crear y el nombre que se definirá para la clase, seleccionar la subclase “UIViewController” y
colocar el nombre de la clase como “ButtonViewController”.



Presionamos next y luego Create.



Ciclo I-2016



Página 9

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES


PDM115



Repetimos lo anterior para las otras seis vistas y adicionalmente crearemos dos para controlar el
tabView hasta tener la siguiente lista de archivos:



Vincular Vista con controlador (clases)
Para conectar cada “ViewController” con sus respectivos archivos .h y .m de los archivos de clase
creados anteriormente, seleccionar en el proyecto el main.storyboar