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

Para dar las gracias debes entrar o registrarte en el foro

iMiembro Pro 3G
iMiembro Pro 3G
Mensajes: 1334 Agradecido: 992
10 Abr 2012, 19:13# 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 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”.

Imagen


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

Imagen


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

Agregamos un nuevo fichero al proyecto.

Imagen


Seleccionamos “Ojective-C class”.

Imagen


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

Imagen


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

Imagen


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

Imagen


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

Imagen


Seleccionamos la imagen que queremos y pulsamos "Add"

Imagen


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

Imagen


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

Imagen


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

Imagen


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.

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
Gracias  
2 personas han dado las gracias: CarlosVEPmanelalbert
Etiquetado en:
iMiembro Pro 3G
iMiembro Pro 3G
Mensajes: 1334 Agradecido: 992
16 Abr 2012, 01:16# 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 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".

Imagen


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

Imagen


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

Imagen


Seleccionamos "Objective-C class".

Imagen


Nombramos los ficheros.

Imagen


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

Imagen


La estructura del proyecto ha de ser la siguiente.

Imagen


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.

Imagen


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"

Imagen


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

Imagen


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

Imagen


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
Gracias  
2 personas han dado las gracias: CarlosVEPmanelalbert

Publicidad
Publicidad