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



Ciclo I-2014



Guía de Laboratorio N°04 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

Ciclo I-2014

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

Main.storyboard (Menu) .................................................................. 3

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

Creación de Aplicaciones .................................................................. 5

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

Configuración del menú .................................................................... 9

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

Enlace de Toolbars con Menu principal ........................................................................................ 14

Controles ........................................................................................ 17

ButtonViewController ................................................................................................................... 17

LabelViewController ...................................................................................................................... 19

TextFieldViewController ................................................................................................................ 22

SwitchViewController .................................................................................................................... 25

SliderViewController ..................................................................................................................... 27

PickerViewController .................................................................................................................... 30

GalleryViewController ................................................................................................................... 33

TabViewController ........................................................................................................................ 35

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

StoryBoard Final ............................................................................. 40

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.

Ciclo I-2014

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.



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-2014



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

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

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.

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.



2

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.

Ciclo I-2014



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.



3

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..

Ciclo I-2014



Agregue las pantallas necesarias (7 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 se deben de tener archivos .m y .h correspondientes
a cada una de ellas, para eso se debe de crear archivos de este tipo.



4

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.

Ciclo I-2014

El tipo de archivo que se desea crear es “Objective-C class”, seleccionar esa opción en cómo se
presenta en la imagen.



5

UNIVERSIDAD DE EL SALVADOR

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


PDM115



Ciclo I-2014
Al presionar “Next” se presentara la ventana en la cual se ingresara el tipo la subclase de la clase a
crear y el nombre de esta clase, para todas las que se crearan para controlar la storyboard
seleccionar la subclase “UIViewController” y colocar el nombre de “ButtonViewController”.

Presionamos next y luego créate.

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



6

UNIVERSIDAD DE EL SALVADOR

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


PDM115



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.storyboard y dentro de este, presionar
clic en el primer ViewController que se vinculara con la clase “ButtonViewController” antes creada.

Ciclo I-2014



Acceder a la barra de utilidades y ubicarse en la pestaña de “Identity inspector” (inspector de

identidad) que tiene como icono este:
“Custom Class”, y en el espacio de clase, escribir(o seleccionar en el combo) la clase que se acaba
de crear “ButtonViewController”, como se observa a continuación.

. Dentro de esta pestaña ubicarse en el apartado de

Ahora al acceder al storyboard se observa que la pantalla seleccionada posee el nombre de la clase
creada para ella.(si no lo logra ver presione zoom in una o dos veces)



7

UNIVERSIDAD DE EL SALVADOR

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


PDM115



Ciclo I-2014



Para ver este enlace de manera dinámica, habilitar la vista de asistente, presionando el icono de

“Assistent editor” con este icono:
pantalla que ya tiene archivos .m y .h vinculados, se muestra alguno de estos 2 archivos en la otra