Desarrollo IOS: “Temas” o modificación del aspecto del interfaz.

Sabemos que Apple no es muy amante de la personalización de la interfaz UI. En Mac deja elegir algún que otro ajuste de color. Y en iOS no permite configurar nada.



Evidentemente no consideran algo importante poder cambiar los colores por defecto del sistema.

Sin embargo, para las aplicaciones creadas por los desarrolladores, la política es otra: total libertad. Uno puede usar los colores de sistema, o alterarlos de acuerdo a nuestro criterio. Esto es muy útil al hacer branding o simplemente darle un look distinto, personal, a las apps. Ni hablar al hacer juegos, que la interfaz por lo general cambia totalmente.

Si has hecho alguna incursión en este tema, conocerás propiedades y métodos como [UIToolbar setTintColor:(UIColor*)] que permiten alterar el color de una toolbar o [UIActivityIndicatorView setColor:(UIColor*)] que cambia el color del indicador. En general la mayoría de los elementos de interfaz puede ser alterado ajustando colores o, para los más complejos, ajustando imagenes de mapas de bits.

Ya que estamos en Halloween, si quisiéramos cambiar los colores de una app para que todo se torne “negro y naranja”, vamos a tener un arduo trabajo de seteo de propiedades (algunas a través de Interface Builder, otras escribiendo código) para cada uno de los Controls contenidos en todos los ViewController que hagamos.

La novedad es que iOS 5 lleva esta personalización a un nivel de facilidad increíble. Y además, todo lo que conocemos sobre este tema, nos sigue sirviendo!.

La magia viene de la mano de UIAppearence, una clase nos permite alterar la apariencia de los controles en forma global. Esto significa que, vamos a configurar los Controls en un solo lugar de nuestra app, y cada instancia del control que se crea, va a ganar esta configuración.

Entonces, si a nuestra app le tenemos que dar un aspecto particular, lo podemos hacer en el AppDelegate, y todo ViewController que se cree a continuación, no necesitará ni una línea de código para cambiar la apariencia. Vean lo bueno que es esto para reutilizar ViewControllers, porque no tenemos nada de coerción con su aspecto.

Si quisiéramos implementar “temas” visuales, centralizaremos el seteo de aspecto solamente en un ViewController (por ejemplo definamos el ThemeViewController ) que nos permita elegir entre distintos temas que programemos (Océano, San Valentin, Forest, Blood, Dark, Pink, etc) y toda nuestra aplicación cambiará el aspecto sin tener que hacer nada adicional.

UIAppearence
En iOS 5, cada objeto UI dispone de un appearance proxy, que es la clase que nos permite modificar a todas las instancias del objeto en cuestión. Por ejemplo, para cambiar todos los UISlider y hacerlos de color naranja y negro, escribimos:

[[UISlider appearance] setMinimumTrackTintColor:[UIColor orangeColor]];
[[UISlider appearance] setMaximumTrackTintColor:[UIColor blackColor]];


Esta es la regla: obtenemos el appeance de cada objeto que queremos modificar, y luego usamos los métodos que ya conocemos para alterar su apariencia.
A continuación un ejemplo de personalización hecho en el AppDelegate:



- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
//
// defino los colores que usaré para customizar
//
UIColor* naranja = [UIColor orangeColor];
UIColor* negro = [UIColor blackColor];

//
// seteo los valores globales para customizar los controles de la app
//

[[UISlider appearance] setMinimumTrackTintColor:naranja];
[[UISlider appearance] setMaximumTrackTintColor:negro];
[[UISlider appearance] setThumbTintColor:negro];

[[UIProgressView appearance] setProgressTintColor:naranja];
[[UIProgressView appearance] setTrackTintColor:negro];

[[UISwitch appearance] setOnTintColor:naranja];

[[UIToolbar appearance] setTintColor:naranja];
[[UINavigationBar appearance] setTintColor:naranja];

[[UIBarButtonItem appearance] setTintColor:negro];

[[UIActivityIndicatorView appearance] setColor:naranja];

[[UISegmentedControl appearance] setTintColor:naranja];

[[UILabel appearance] setTextColor:naranja];

//
// continúo con el código normal de didFinishLaunchingWithOptions
//

...

}

Para terminar, Apple nos provee una forma de poder alterar los controles en forma “controlada” y no para todas las instancias. La idea es indicar el container al momento de pedir el appearence. Así, podemos modificar los controles de un determinado contenedor. Por ejemplo, para distinguir los UIBarButtonItem de una Toolbar vs. los de una NavigationBar, escribimos:

[[UIBarButtonItem appearanceWhenContainedIn:[UINavigationBar class], nil]
setTintColor:naranja];
[[UIBarButtonItem appearanceWhenContainedIn:[UIToolbar class], nil]
setTintColor:negro];