We all want our apps to stand out in the appstore, Apple has provided us with some nice interface elements but the appearance of them is limited. Allmost every company has a corporate design that they want to see back in their app, and even if this is not the case you’ll probably find one of your designers getting a little overenthousiastic with his or her Photoshop skills.
I personally like “custom app” building, I prefer working on something that looks totally different then the rest, creating stuff that makes people say “whow that looks good” and taking some of the designers credit for my own. Having said that I guess we all know this doesn’t (or actually didn’t) come for free. Let’s take the navigation bar as an example.
We want to have give a navigation bar another background image in iOS4 so it fits the overall design better. Easy right? Well.. no. First we create a category on UINavigationBar, use method swizzling to overwrite insertSubview and sendSubviewToBack, we then keep track of the added view with a tag we declare to it and be careful with the placement and removal of the view. We can now set a custom background image to a navigation bar..
Now let’s say we wanted to skin a tabbar or a switch, the solution for this was pretty simple: write your own.
But luckily Apple heard our frustration all the way in Cupertino and actually did something about it: the UIAppearance protocol.
// Setting a background image to a navigation bar in iOS5 [[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"navbar_bg.png"] forBarMetrics:UIBarMetricsDefault];
That sure makes our lives a little bit easier doesn’t it?
Let’s do a quick overview of what we can do with this protocol;
We can set an image to UI elements, as the snipped above described for the navigation bar.
We can add tint color to about every UI element, this means navigation bars, buttons, sliders, switches, spinners, activity indicators, etc. So no more custom switch writing if someone decided that the switch should definitely be green.
[[UISwitch appearance] setOnTintColor:[UIColor greenColor]];
titleTextAttributes have been added so we can not only at a custom background image to our bar, but we can also style the title in terms of font, color etc.
[[UINavigationBar appearance] setTitleTextAttributes:
[NSDictionary dictionaryWithObjectsAndKeys:[UIColor redColor], UITextAttributeTextColor,
[UIFont fontWithName:@"AachenStd-Bold" size:22], UITextAttributeFont,
nil]];
Pretty straight forward stuff huh? But it gets better! You can define the scope of your customization.
Let’s say we want to set the background image for all the navigation bars in our project, we would use the code as described above:
// Setting a background image to all navigation bars [[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"navbar_bg.png"] forBarMetrics:UIBarMetricsDefault];
But we can also assign the appearance of a particular navbar like this:
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"navbar_bg.png"] forBarMetrics:UIBarMetricsDefault]; // or [myIBOutletNavbar setBackgroundImage:[UIImage imageNamed:@"navbar_bg.png"] forBarMetrics:UIBarMetricsDefault];
Now let’s sat we wan’t all our switches to have that nice green color, except that one little switch hidden deep down in the third hierarchy of your settings screen, well we can do that as well using +(id)appearanceWhenContainedIn:
// WhenContainedIn takes a nil terminated list of view controllers [[UISwitch appearanceWhenContainedIn: [myThirdSettingsViewControllor class], nil] setOnTintColor:[UIColor redColor]];
Conclusion:
Apple finally provided us with a better way to skin user interfaces, will it be all you need? Probably not, there will still be cases were you’ll have to go the hard way to please your customers or designers, but it’s definitely a big improvement on what we had. At the very least my navigationbar skinning code is easily readable by my co-workers now.
References: UIAppearance Protocol Reference
