Noticias, Aplicaciones, Jailbreak y Tutoriales de iPhone, iPad y iPod Touch

10

abr

Curso de Programación iOS. Clase 3: secciones con tabBarController

,

10 de abril de 2012 a las 17:44

Bienvenidos a la Clase 3 del Curso de Programación de iPhone4Spain.

En la clase de hoy veremos cómo separar escenas según su categoría. Para ello, vamos a utilizar el conocido componente “tabBarController”.

Este componente es utilizado en la "App Store", entre otras aplicaciones, y dá un aspecto integrado a todas las aplicaciones que realicemos.
En el ejercicio, que vamos a realizar a continuación, podemos ampliarlo con ejercicios vistos en anteriores clases del Curso de Programación iOS de iPhone4Spain.

Empezamos, como siempre, creando un nuevo proyecto. “File -> New -> Project...”. Seleccionamos un proyecto “Empty Application”.


Le damos un nombre. Nosotros le hemos llamado “Clase3” y lo guardamos en el directorio que nos convenga.


Ahora, crearemos los ficheros de las clases que contendrán las escenas: “FirstScene” y “SecondScene”.

Agregamos un nuevo fichero al proyecto.


Seleccionamos “Ojective-C class”.


Le damos un nombre y marcamos la opción “With XIB for user interface”.


Recordad agrupar los ficheros generados en una carpeta, dentro del proyecto, para tenerlo más organizado.


Abrimos el fichero "AppDelegate.m" para crear el "tabBarController" y enlazarlo con el inicio de la aplicación.

Antes que nada, en el fichero "AppDelegate.m", importaremos las clases creadas en el paso anterior, "FirstViewController" y "SecondViewController".

Creamos un objeto de la clase "FirstViewController" y otro "SecondViewController".

También creamos un objeto de la clase "UITabBarController" que es el que utilizaremos para separar por categorías nuestra aplicación.

Una vez hecho lo anterior, creamos un objeto de "NSArray" que inicializaremos con los objectos de "FirsViewController" y "SecondViewController".

Por último, asignamos el objeto "NSArray" a "tabBarController" con el método "setViewControllers" y a la propiedad "rootViewController" de "window" le asignamos el "tabBarController".


Vamos a ponerle imágenes a los botones del "tabBarController".

Hay que saber que las imágenes que hay que añadir para el "tabBarController", tienen que ser de fondo transparente para que el propio componente se encargue de dar el color si está pulsado o no.

Primero hay que agregar las imágenes al proyecto. Pulsamos con el botón derecho del ratón sobre la carpeta de la clase donde queremos agregar la imagen y elegimos "Add Files to "Clase3"...".


Seleccionamos la imagen que queremos y pulsamos "Add"


Para hacer que se cargue la imagen en el botón correspondiente del "tabBarController", hay que programarlo ya que la carga se hará de forma dinámica.

Vamos a ver cómo sería en "FirstViewController". El proceso hay que repetirlo para "SecondViewController".

Abrimos el fichero "FirstViewController.m" y accedemos a la imagen del "tabBarController" mediante "self.tabBarItem.image". Con el método "imageNamed" de la clase "UIImage" decimos el nombre de la imagen que tenemos agregada al proyecto.

Además de cargar la imagen, vamos a cambiar el titulo de la escena. Todo se hace en el método "initWithNibName".


Por último, cambiamos el color de fondo de las escenas.


Sólo queda ejecutar la aplicación y comprobar que funciona correctamente.


El ejercicio que vamos a proponer para esta semana no es más que hacer el mismo que hemos realizado en la explicación de la Clase 3 pero con tres escenas. La dificultad del ejercicio propuesto no es la programación sino en conseguir que se vean bien las imágenes que insertemos en el proyecto. Intentad que sean lo más parecidas a las de la siguiente imagen.


Como podéis ver, estamos obteniendo conocimientos para poder hacer aplicaciones que se asemejan mucho a las que podéis comprar en la "App Store". Seguiremos viendo, en las próximas clases, más componentes que sirven para contextualizar, aún más, nuestras aplicaciones.

Ya está disponible la solución al ejercicio de esta clase: Solución.

Siguiente clase: Clase 4, introducción a TableViewController.

Un saludo!!!

Comentarios de Facebook