Tutorial Programación iOS: Secciones con tabBarController (Clase 3)

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 "FirstViewController" 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.h" 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.

El viernes día 13 de abril publicaremos la solución al ejercicio propuesto.

Vía | iPhone4Spain.com - Clase 3

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

Hoy explicaremos la realización del ejercicio propuesto en la Clase 3, en la que vimos cómo realizar una aplicación con diferentes categorías utilizando el popular componente "TabBarController". Vimos cómo añadir imágenes en el "TabBarController" y cambiar el título que aparece debajo de la imagen.

El ejercicio propuesto en la Clase 3 es muy parecido al de la explicación por lo que, al igual que el ejercicio propuesto de la Clase 2 del Curso de Programación iOS de iPhone4Spain, no hay que buscar información adicional para realizarlo.

Empezamos creando un proyecto nuevo, "File -> New -> Project...". Seleccionamos "Empty Application".



Le ponemos nombre al proyecto. Nosotros lo hemos llamado "EjercicioClase3".



Agregamos todos los ficheros que necesitamos para hacer la aplicación. Les hemos llamado "HomeViewController", "ChatViewController" y "AppleViewController".

Para agregar los ficheros, pulsamos el botón derecho del ratón dentro de la carpeta "EjercicioClase3".



Seleccionamos "Objective-C class".



Nombramos los ficheros.



Agrupamos en carpetas todos los ficheros relacionados para tener ordenado el proyecto.



La estructura del proyecto ha de ser la siguiente.



Vamos ya a editar el fichero "AppDelegate.m", como hicimos en la Clase 3, para crear el "UITabBarController" por código y hacer que "rootViewController" se ejecute en la escena que queremos.



Insertamos al proyecto las imágenes que queremos que lleven los botones del "TabBarController". El tamaño aproximado de las imágenes es 30x30. Modificad el tamaño si veis que no se consigue cuadrar dentro del cuadro correspondiente. Las imágenes serán con formato .png con fondo transparente.

Nosotros hemos subido al proyecto 3 imágenes: "home.png", "chat.png" y "apple.png"



Seleccionamos la imagen y quedará insertada en la correspondiente carpeta.

Modificamos el método "initWithNibName" de los ficheros "HomeViewController.m", "ChatViewController.m" y "AppleViewController.m" para que las escenas tengan título e imagen en el "TabBarController".



Por último, vamos a cambiar el color de fondo de las interfaces para ver el cambio entre las escenas.



Probamos la aplicación y vemos su correcto funcionamiento.

Ya damos por terminada la Clase 3. El lunes 16 de abril publicaremos la Clase 4 donde veremos una introducción al componente "TableView".

Vía | iPhone4Spain.com - Clase 3