jun 05

Cuando queremos crear una aplicación que contenga diferentes funcionalidades relacionadas con el uso de la aplicación, pero independientes entre si, como mostrar los datos de diferente manera o diferentes tareas, querremos usar una Tab Bar en nuestra aplicación.

La Tab Bar nos dará acceso a esas diferentes tareas o vistas, separándolas dentro de nuestra aplicación como módulos independientes, además, sitúa al usuario dentro de la aplicación indicándole lo que esta viendo en ese momento.

Hoy daremos las indicaciones básicas para crear y configurar una Tab Bar para nuestra aplicación. Dentro de Xcode tenemos una plantilla que nos crea una aplicación con un Tab Bar y dos vistas diferentes, aunque es un buen punto de partida, cuando miramos el código a penas vemos que es lo que realmente se esta haciendo ya que toda la configuración la hacen desde Interface Builder. Nosotros mostraremos algo más de código.

Estructura

Tenemos nuestra aplicación, dentro de ésta estará nuestra Tab Bar, a la que le indicaremos que vistas (UIViewController) ha de mostrar, cada vista se ocupará de su funcionalidad, pero tenemos que configurar la propiedad tabBarItem (UITabBarItem), de cada una de las vistas para que la Tab Bar nos pueda mostrar el icono y titulo de esa pestaña.

Datos

Para configurar la Tab Bar lo único que necesitamos es un icono para cada pestaña, y un título. Podemos usar ambos a la vez o cada uno por separado, obviamente una Tab Bar sin iconos pierde mucho, por lo que recomiendo que al menos se use un icono para representar lo que la pestaña hace, el título siempre va bien por si el icono no deja del todo claro.

El titulo no es más que una cadena que indicaremos dentro del código, pero el icono es algo más especial y aunque Apple nos suministra algunos iconos típicos del sistema, para usarlos echar un vistazo a  UITabBarSystemItem, también nos indica como tenemos que crear nuestros propios iconos:

▪ Usar formato PNG.
▪ El único color a de ser blanco puro con transparencia apropiada.
▪ No añadir sombras.
▪ Usar anti-aliasing.
▪ Tamaño de 30 x 30 pixeles.

Código

Para crear la Tab Bar y añadirla a nuestra aplicación simplemente usar lo siguiente:

- (void)applicationDidFinishLaunching:(UIApplication *)application {
 
tabBarController = [[UITabBarController alloc] init];
 
MyViewController* vc1 = [[MyViewController alloc] init];
 
MyOtherViewController* vc2 = [[MyOtherViewController alloc] init];
 
NSArray* controllers = [NSArray arrayWithObjects:vc1, vc2, nil];
 
tabBarController.viewControllers = controllers;
 
[window addSubview:tabBarController.view];
 
}

En el applicationDidFinishLaunching creamos el TabBarController, los UIViewController para cada una de nuestras pestañas, metemos estos últimos en un vector y le indicamos al controlador de la Tab Bar que serán esos los que ha de mostrar. Finalmente añadimos la vista de la Tab Bar a nuestra ventana y listos.

Para configurar cada uno de los UITabBarItem de cada una de las vistas podemos usar las siguientes líneas:

UIImage* anImage = [UIImage imageNamed:@"MyTabBarIcon.png"];
 
UITabBarItem* theItem = [[UITabBarItem alloc] initWithTitle:@"TabBarItemTitle" 
                                                     image:anImage tag:0];
 
[myViewController setTabBarItem:theItem];

Normalmente se usarán dentro del mismo controlador, al inicializarlo, pero puede ser necesario hacerlo desde otro lugar cuando no estamos creando nuestra propia clase, por ejemplo si una de las vistas usa un UINavigationBar, en ese caso se puede usar el código anterior justo cuando creamos el controlador para la barra de navegación.

VN:F [1.9.8_1114]
Rating: 5.0/5 (1 vote cast)
VN:F [1.9.8_1114]
Rating: -1 (from 1 vote)
Configurando una Tab Bar, 5.0 out of 5 based on 1 rating

Leave a Reply

You must be logged in to post a comment.

preload preload preload