Category: Mac


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.

Otro montón de tiempo entre actualización y actualización, pero bueno, mejor MUY tarde que nunca no? jeje.

Desde hace unos meses que soy un usuario de MAC, y es cierto aquello que dicen que una vez que lo pruebas, no puedes dejarlo. La sencillez de usabilidad para la gran mayoría de problemas triviales que podemos encontrar en otros sistemas operativos, es un gran punto a favor. Y tras este tiempo trabajando, yo que soy una persona muy acostumbrada a usar los atajos de teclados, he descubierto unos cuantos atajos de teclado de uso bastante común supongo, que facilitan muchísimo la vida. Paso a listarlos:

Cmd + Q : Cierra el programa actual (Equivalente a Alt + F4 en Windows)
Cmd + W : Cierra la ventana actual.
Cmd + N : Abre una nueva ventana
Cmd + F : En Finder y en la mayoría de programas sirve para buscar.
Ctrl + Alt + Cmd + Eject : Apagar el equipo
Cmd + Tab : Cambiar de aplicación

Expose y Spaces

Las siguientes son por defecto, pero se pueden cambiar en Preferencias del sistema / Expose y Spaces :
F8 : Activa  Spaces
F9 : Activa Expose para todas las ventanas
F10 : Activa Expose para las ventanas de la aplicación actual (A mi me resulta muy util con el Xcode!! )
F11 : Muestra el escritorio
F12 : Muestra el DashBoard
Ctrl + número o Ctrl + flecha izq. o derech. : Para moverse por los diferentes spaces

Capturas de pantalla

Ctrl + shift + 3 : Hace una captura de pantalla y la guarda en el escritorio con extensión png
Ctrl + shift + 4 : Te permite seleccionar el area a capturar y guarda en el escritorio con extensión png.
Ctrl + shift + 4 + space : Igual que el anterior pero selecciona una ventana completa.

Moverse por el finder

Cmd + -> : Adelante
Cmd + <- : Atras
Cmd + Abajo : Entrar en la carpeta o ejecutar un programa
Cmd + Arriba : Volver al directorio padre
Cmd + 1-4 : Cambia el modo de visualización
Space : Hace un preview del fichero.
Alt + Space : Hace el preview del fichero a pantalla completa
Intro : Cambia el nombre del fichero
Cmd + Delete : Envia a la papelera de reciclaje