Category: iOs


Después de un largo tiempo de inactividad, vuelvo a postear. Cambio de trabajo, estudios y directamente, falta de ganas por actualizar. Pero vuelta a la carga, como novedades, he subido mi primera aplicación para iOS al apple store, ya pondré más información en cuanto haya pasado el proceso de aprobación de apple. Por otro lado, he creado un twitter de la página @projectlonginus. Quizás haya alguna novedad más próximamente.

Y como consejo del día, me encontré con el siguiente problema a la hora de crear el distribution de la aplicación de iOS. La solución es bastante sencilla, si sois como yo y no habeis podido esperar y estais trabajando con la beta del ios5 y el xcode con la beta, este no permite firmar aplicaciones para distribución, así que habrá que desinstalar completamente el xcode e instalar la ultima versión no beta. Para desinstalar el xcode es suficiente con la siguiente línea de comando:

<pre>sudo /Developer/Library/uninstall-devtools --mode=all

Al empezar a desarrollar con iOs y el entorno XCode, lo que más me ha gustado, ha sido la simpleza para poder tener aplicaciones bonitas. La verdad que el Interface Builder es mano de santo, y luego cambiar el aspecto de la mayoría de los widgets es bastante sencillo, ya que son muy personalizables. Pero… ¿todos?, la respuesta es no, tras haber estado investigando y navegando por la red, he visto que los TabBar son los widgets menos personalizables que existen, tanto que ni tan siquiera se le puede cambiar el color de fondo. Así que aqui vamos a ver como podemos crear nuestro propio TabBar personalizado.

Prerrequisitos.

Necesitaremos tener una pequeña idea del uso de CoreGraphics, para ello os animo a visitar los tutoriales de Ray Wenderlich sobre CoreGraphics y  personalización de TableViews aquí y aquí.

Poniendole color al fondo

La idea es cambiar el fondo por un degradado de dos colores que nosotros decidamos, añadiendole el efecto brillo para que quede tan bien como el TabBar negro por defecto. Para hacer todo esto, lo primero que tendremos que hacer es crearnos una clase CustomTabBar que herede de UITabBar.


#import <Foundation/Foundation.h>

@interface CustomTabBar : UITabBar {
 UIColor *firstColor;
 UIColor *secondColor;
}
@property(nonatomic,retain) UIColor *firstColor;
@property(nonatomic,retain) UIColor *secondColor;

@end

Hasta aquí, nada raro, hemos heredado de UITabBar y creado con dos atributos para los colores del degradado, siendo el first el color superior y second el inferior. Lo siguiente, es sobreescribir el método drawRect y pintar el fondo a nuestro gusto.


#import "CustomTabBar.h"
#import "Common.h"

@implementation CustomTabBar

@synthesize firstColor,secondColor;

-(void) drawRect:(CGRect)rect{
 CGContextRef context = UIGraphicsGetCurrentContext();
 drawGlossAndGradient(context, rect, firstColor.CGColor, secondColor.CGColor);
 }
@end

El código es bastante sencillo, dentro de drawRect obtenemos el contexto actual para pintar en él y llamamos a la función drawGlossAndGradient para pintar el gradiente con brillo. Esta función está dentro de una pequeña librería Common que he extraido de los ejemplos de Ray Wenderlich puestos más arriba. Llegados a este punto, solo nos falta indicar como utilizar nuestro TabBar personalizado, para ello vamos a crear un nuevo proyecto del tipo “Tab Bar Application” y vamosa  copiar nuestras dos clases utilitarias (CustomTabBar y Common). Ahora abrimos el xibfile MainWindow, desplegamos el TabBarController y seleccionamos el TabBar asociado. Y ahora en el inspector le cambiamos la clase de este TabBar  a nuestro CustomTabBar.

inspector3

Si ejecutamos ahora nuestro ejemplo, veremos que nos sale el tabbar con el fondo blanco. Solo nos falta poner por código los colores de nuestro degradado, para ello nos vamos al AppDelegate de nuestra aplicación y justo antes de insertar la vista ponemos lo siguiente:

CustomTabBar *tb = (CustomTabBar *) tabBarController.tabBar;
 tb.firstColor = [UIColor blueColor];
 tb.secondColor = [UIColor redColor];

De esta forma, ya tenemos nuestro TabBar con los colores que queramos en un bonito degradado con efecto brillo, esta simpleza hará que nuestra aplicación gane bastantes enteros.

Poner una imagen de fondo

Ya que estamos, es posible que queramos poner una imagen de fondo, en vez de un color plano o un degradado. Para ello vamosa  hacer las siguientes modificaciones a nuestra clase CustomTabBar, de forma que la misma clase nos sirva para ambas cosas.
En CustomTabBar.h añadimos un atributo que representará a la imagen:

UIImage *backgroundImage;

@property(nonatomic,retain) UIImage *backgroundImage;

Y en CustomTabBar.m modificamos drawRect para dejarlo como sigue:


#import "CustomTabBar.h"
#import "Common.h"


@implementation CustomTabBar

@synthesize firstColor,secondColor,backgroundImage;



-(void) drawRect:(CGRect)rect{
 CGContextRef context = UIGraphicsGetCurrentContext();
 if(backgroundImage==nil)
 drawGlossAndGradient(context, rect, firstColor.CGColor, secondColor.CGColor);
 else{
 [backgroundImage drawInRect:rect];
 }
}
@end

Usamos el mismo método drawInRect de UIImage que se encarga de pintar la imagen en el contexto gráfico actual. Y mediante la comprobación de si la imagen es nula o no, podemos tener una clase de doble proposito. Un fondo coloreado o que pinte una imagen según esta esté definida o no.