Tutorial Programación iOS: Transición con pushViewController (Clase 2)

Para dar las gracias debes entrar o registrarte en el foro

iMiembro Pro 3G
iMiembro Pro 3G
Mensajes: 1334 Agradecido: 992
06 Abr 2012, 12:18# 1
Imagen


Curso de programación realizado por nuestros amigos de iPhone4Spain.com que nos han pedido que compartamos esta serie de cursos de programación en iOS con la comunidad de iPadForos


Bienvenidos a la Clase 2 del Curso de programación iOS de iPhone4Spain.

En esta clase vamos a aprender a hacer transiciones "pushViewController" entre diferentes escenas de nuestra aplicación.

La transición "pushViewController" es muy común en las aplicaciones iOS. Se suele utilizar, sobre todo, para mostrar el detalle de una fila en un listado. Los listados("TableView") los veremos en la Clase 4.
Vamos ya a empezar la explicación de cómo hacer transiciones con "pushViewController". Podéis combinar el ejercicio de hoy con ejercicios anteriores o ampliarlo, añadiendo componentes o funcionalidades.

Como siempre, empezamos creando un nuevo proyecto, New -> Project -> Empty Application. Le ponemos un nombre, nosotros le hemos puesto "Clase2".

Imagen


Una vez creado el proyecto, agregamos dos ficheros. Uno va a ser para la primera escena y otro para la segunda.

Imagen


Ambos ficheros van a ser "Objective-C class".

Imagen


A la primera escena la vamos a llamar "MainViewController" y a la segunda "SecondViewController". Acordaos de agregar los ficheros generados en carpetas para tener el proyecto ordenado.

La estructura de ficheros del proyecto tendrá que ser como el que vemos en la siguiente imagen.

Imagen


Abrimos y editamos el fichero "AppDelegate.m".

Importamos "MainViewController.h" para poder hacer referencia a la clase. Creamos un objeto de la clase "MainViewContoller".

Ahora vamos a crear un objeto de la clase "UINavigationController" asignando el objeto de "MainViewController". Para ello, utilizaremos la propiedad "initWithRootViewController".

El objeto de "UINavigationController" es el encargado de hacer las transiciones entre escenas. Como vamos a ver, a lo largo de la clase, es muy sencillo hacer este tipo de transiciones y, además, le dá dinamismo a la aplicación.

Imagen


Vamos a editar el fichero "MainViewController.h". Lo único que hay que hacer en este fichero es declarar un "IBAction" que nosotros hemos llamado "pushButton".

Imagen


En el fichero "MainViewController.m" implementamos el "IBAction" que hemos declarado en "MainViewController.h".

Antes que nada importamos "SecondViewController" y, en el método "viewDidLoad", hemos modificado el "title" de "MainViewController".

Imagen


El "IBAction" será el encargado de llamar a la siguiente escena. Dentro del método, declararemos un objeto de la clase "SecondViewController", le cambiamos el title y decimos que el "navigationController" haga "pushViewController" con el objeto de "SecondViewController". También le decimos que, cuando haga la transición, haga la animación.

Imagen


Los fichero de "SecondViewController" no los vamos a editar porque no va a hacer ningún tipo de función.

Por último, modificaremos las interfaces.

En la interfaz de "MainViewController" vamos a agregar un "Round Rect Button" y lo enlazaremos con "File´s Owner". Para enlazar el "Round Rect Button" con el "IBAction", hay que combinar la tecla "Ctrl" y el botón derecho del ratón sobre el "Round Rect Button" y arrastramos hasta "File´s Owner"

Vía | iPhone4Spain.com - Clase 2
Gracias  
2 personas han dado las gracias: CarlosVEPmanelalbert
Etiquetado en:
iMiembro Pro 3G
iMiembro Pro 3G
Mensajes: 1334 Agradecido: 992
10 Abr 2012, 19:05# 2
Imagen


Curso de programación realizado por nuestros amigos de iPhone4Spain.com que nos han pedido que compartamos esta serie de cursos de programación en iOS con la comunidad de iPadForos


Bienvenidos a la solución y explicación del ejercicio propuesto en la Clase 2 del Curso de Programación de iPhone4Spain.

El ejercicio propuesto de la Clase 2 del Curso de Programación de iPhone4Spain es muy simple y se puede realizar con la explicación de la clase, sin buscar información adicional.

Os recordamos que, en el ejercicio de la Clase 2, vemos cómo realizar transiciones con "pushViewController".


Lo primero que haremos, como siempre, es crear un proyecto nuevo, "File -> New -> Project". Seleccionamos "Empty Application".

Imagen


Le escribimos un nombre al proyecto. Nosotros lo hemos nombrado "EjercicioClase2".

Imagen


Ahora, agregamos tres ficheros "Objective-C class": "MainViewController", "GreenViewController" y "YellowViewController" con sus correspondientes interfaces.

Imagen


Nombramos los ficheros y marcamos la opción "With XIB for user interface".

Imagen


Y los agrupamos por carpetas para tener el proyecto ordenado.

Imagen


El proyecto debe tener esta estructura de ficheros.

Imagen


Abrimos el fichero "AppDelegate.m" para editarlo.

Lo primero que haremos en el fichero es importar "MainViewController.h" para poder realizar objetos.

En el método "didFinishLaunchingWithOptions" creamos un objeto "MainViewController".

Como ya comentamos en la Clase 2 del Curso de Programación de iPhone4Spain, hay que declarar un objeto "UINavigationController" para que se encargue de realizar la transición entre escenas. En la declaración del objeto "UINavigationController" asignamos "mainViewController" mediante el método "initWithRootViewController".

Por último, vamos a hacer que arranque la aplicación con "mainViewController". Para ello, asignamos, con el método "rootViewController" de la clase "window", al objeto "navigationController".

Imagen


El siguiente paso es editar el fichero "MainViewController.h", en el que declararemos los "IBAction" necesarios para acceder a las escenas.

Van a ser dos "IBAction". Nosotros les hemos llamado "greenScene" y "yellowScene".

Imagen


Accedemos en al fichero "MainViewController.m" y lo editamos.

Importamos "GreenViewController.h" y "YellowViewController.h" para poder hacer objetos de esas clases y, en el método "viewDidLoad" modificamos el "title".

Imagen


En el fichero "MainViewController.m", también vamos a hacer la programación de los "IBAction" que hemos declarado en el fichero "MainViewController.h".

Los métodos "IBAction" se encargarán de crear objetos, tanto de "GreenViewController" como de "YellowViewController". Una vez creados los objetos los asignaremos a "navigationController" con el método "pushViewController".

Imagen


Ahora, sólo queda realizar las interfaces.

En "MainViewController.xib" vamos a agregar dos botones. Uno para acceder a "GreenViewController" y otro para acceder a "YellowViewController". Los botones los enlazaremos con los "IBAction" como vimos en la Clase 2 del Curso de Programación de iPhone4Spain.

Imagen


Ahora tanto en "GreenViewController" como en "YellowViewController" cambiamos el color de fondo.

Imagen


El último paso es ejecutar la aplicación y ver que funciona correctamente.

Imagen


Con esta explicación damos por concluida la Clase 2 del Curso de Programación de iPhone4Spain. Poco a poco, vamos viendo conceptos básicos de cómo hacer una aplicación iOS. Conforme vayamos viendo nuevos conceptos, podremos hacer aplicaciones más complejas.

Vía | iPhone4Spain.com - Clase 2
Gracias  
2 personas han dado las gracias: CarlosVEPmanelalbert
iMiembro
iMiembro
Mensajes: 1 Agradecido: 0
21 Jun 2012, 01:33# 3

Hola, gracias por los tutoriales.

Tengo una duda como puedo hacer lo mismo de pasar de una pagina a otra pero solo con botones.

Por ejemplo de amarillo a verde y viceversa pero sin usar la barra de navegación superior solo los botones.


Saludos y gracias de antemano.

Gracias  