Desarrollo IOS: “Temas” o modificación del aspecto del interfaz con iOS 5

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];

Hasta la próxima!

0 0 votos
Article Rating
Subscribe
Notify of
3 Comments
Oldest
Newest Most Voted
Opiniones Inline
Ver todos los comentarios
Angelillo Mactl
12 years ago

Me parece genial que dediquéis una entrada a la programación para dispositivos de Apple. Ojalá no sea la última.

12 years ago

Echa un vistazo: hay por lo menos ya 4 o 5 artículos específicos dedicados a la programación en iOS

http://www.faq-mac.com/search/node/desarrollo+iOS

—————
http://www.faq-mac.com

Anónimo
12 years ago

Lo que me gustaría es que permitieran una aplicación que nos deje cambiar todos los colores; no me gusta el color celeste/gris ese que viene en el iPhone, yo me creo mi propio tema, pero para usarlo necesito el WinterBoard y por lo tanto necesito hacer el Jailbreak para poder instalarlo y esa es casi mi única razón para hacer el Jailbreak y creo que mucha gente lo hace mas que nada por personalizar el teléfono, si Apple permitiera que por lo menos le cambiaramos el color completo de la interfaz por lo menos yo no me preocuparía más por hacer Jailbreak.

Lost your password? Please enter your email address. You will receive mail with link to set new password.

wpDiscuz
3
0
Me encantaría saber tu opinión, por favor, deja un comentariox
()
x
Salir de la versión móvil