Custom colors in UITabBar

Question

Is it possible to use custom colors and background images in a UITabBar? I realize that Apple would like everyone to use the same blue and gray tab bars, but is there any way to customize this?

Second, even I were to create my own TabBar-like view controller, along with custom images, would this violate Apple's Human Interface Guidelines?

Answer 1

As far as the UITabBar class is concerned, the icons in the bar are limited to the colours: blue for selected and grey for unselected. This is because the tab bar only uses the alpha value from the icons you supply to create the image on the bar.

The bar itself is limited to being black, as far as I can remember. I've not seen anything like the 'tint' property on UINavigationBar in the docs.

I guess you could go ahead and create your own tab bar style class and do what you want with it, but I have absolutely no idea how that fits in with Apple's HIG, or whether or not they'd challenge it during the review process.

In my experience, Apple reviewers only rejected my app if I didn't use THEIR UI elements according to the HIG. They might have a different view when it's your own UI elements you're playing with.

Answer 2

I found an answer to this at Silent Mac Design.

I implemented this way:

First make a subclass of UITabBarContoller

// CustomUITabBarController.h

#import <UIKit/UIKit.h>

@interface CustomUITabBarController: UITabBarController {
  IBOutlet UITabBar *tabBar1;
}

@property(nonatomic, retain) UITabBar *tabBar1;

@end  

// CustomUITabBarController.m

#import "CustomUITabBarController.h"

@implementation CustomUITabBarController

@synthesize tabBar1;

- (void)viewDidLoad {
  [super viewDidLoad];

  CGRect frame = CGRectMake(0.0, 0, self.view.bounds.size.width, 48);

  UIView *v = [[UIView alloc] initWithFrame:frame];

  [v setBackgroundColor:[[UIColor alloc] initWithRed:1.0
                                               green:0.0
                                                blue:0.0
                                               alpha:0.1]];

  [tabBar1 insertSubview:v atIndex:0];
  [v release];
}

@end

And in your Nib file replace the class of your TabBar Controller with CustomUITabBarController.

Answer 3

This can be done with a little private API hacking.

Answer 4

At the beginning of ***ViewController.m add the following might help set background image of UITabBar.

@implementation UITabBar (CustomImage)
- (void)drawRect:(CGRect)rect {
    UIImage *image = [UIImage imageNamed: @"background.png"];
    [image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}
@end

Answer 5

Here's the document that says we can't change pressed or selected appearance with our icons.

https://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW1

It's under the heading Icons for Navigation Bars, Toolbars, and Tab Bars