December 31st, 2009

Applying Tint to Bars

iPad, iPhone, by BigSprocket.

Looking at the screenshots of a lot of apps flowing through the App Store, it seems that less than half of developers have noticed this … when you have a “bar” element on your form, be it a UINavigationBar, UIToolBar, UISegmentedControl, or even (with a little extra work) UITabBar, you’re not stuck with the stock Apple colors of either Blue or Black. Applying a custom color can give your app a little extra “pop”.All the controls mentioned above, with the exception of UITabBar give you the ability to specify a Tint color, either through Interface Builder, or via code like this:

[myBar setTintColor:[UIColor redColor]];

Note that these elements have a gloss on top, and do some caustic shading at the bottom, so out of the 44 vertical pixels of the control, you’re getting only one row of pixels that is exactly the color you asked for! This usually isn’t a problem, but it does make some colors look slightly different than you (or your designer) might expect. To combat this problem, I wrote a free app called BarTint that allows you to play with color values and see in real-time what they’ll look like on your device, and against a background color of your choosing. It has a favorites system and some other goodies, and it’s free, so you might as well grab it, right? It’s available through the BigSprocket web page.

Custom colors on UITabBars require a little extra work. To get another color in there, you need to create your own view, color or otherwise style the view (say, with an image), then get that view to the back of the tab bar’s view hierarchy, like this:

CGSize tabBarSize = [tabBar frame].size;
tabBarFakeView = [[UIView alloc] initWithFrame:
          CGRectMake(0,0,tabBarSize.width, tabBarSize.height)];
[tabBar insertSubview:tabBarFakeView atIndex:0];
[tabBarFakeView setBackgroundColor:[UIColor redColor]];

What’s happening here is this. You’re creating a UIView of the same size as your tab bar, and inserting it into the view hierarchy at zero. The lower the number, the further down the visible stack it is. So, by putting it at zero, you’re behind all buttons that later get put on top. Finally, you’re applying color to that fake view. You could just as easily do this with a UIImageView, and supply an image that shows a gloss, if you like, since the tab bar doesn’t show a gloss by default.

Back Top

Responses to “Applying Tint to Bars”

  1. Awsome app …. any chance you could add support for Three20 controls like TTTabBar which use tints as well but not exactly the same as the controls on your app?



  1. No trackbacks yet.

Leave a Reply

You must be logged in to post a comment.