Customizing UITabBar (Or, tenuous principles to UIKit customization)

UITabBarController is cool, but (un)fortunately it has only one flavor. People might resort to brute-force, re-creating the entire controller from scratch. This is extremely troublesome: a) it takes a lot more effort; b) it needs reverse engineering; c) quirk-for-quirk compatibility is not fun.

Most of the time, you’ll want to skin the thing, not create a new thing that works like the old thing, and then skin that new thing. If you can’t skin it (because the view hierarchies are private) thru UIKit, work around UIKit. Work from Core Animation.

Use a fully black CALayer on the tab bar’s maskLayer in a custom subclass. Then use NSKeyedUnarchiver and NSKeyedArchiver to swizzle the tab bar (thanks cocoa-unbound) with your own subclass.

If things proceed correctly, you’ll get a tab bar that is transparent, but still handles all the touch events, and works “correctly” in all cases. Now go on and intercept all its delegate calls, reconfiguring your own faux tab bar overlay whenever necessary.


  • Don’t hack view hierarchies; if it looks hack-ish, there’s probably an easier way.
  • Stealing Apple code, and avoiding writing code, is extremely fun.
how to set set Background Image for UITabBar


    UIImage *bgimage =[UIImage imageNamed:@“tab.png”];

    if([self respondsToSelector:@selector( setBackgroundImage:)])

        [self setBackgroundImage:bgimage];


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

        UIImageView *imageView = [[UIImageView alloc]initWithImage:bgimage];

        imageView.frame= frame;

        [self insertSubview:imageView atIndex:0];

        [imageView release];


UITabBar background

CGRect frame = CGRectMake(0, 0, 480, 49);

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

    UIImage *i = [UIImage imageNamed:@“redGradient.png”];

    UIColor *c = [[UIColor alloc] initWithPatternImage:i];

    v.backgroundColor = c;

    [c release];

    [tabBar insertSubview:v atIndex:0];

    [v release];

//or with color

UIColor *color = UIColorFromRGB(0xF42626);

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

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

    [v setBackgroundColor:color];

    [v setAlpha:0.5];

    [tabBar insertSubview:v atIndex:0];

    [v release];

P20: Tab Bar using an Interface Builder controller

In Interface Builder, drag a tab bar controller to the object panel on the left hand side. Then link that to a property in its File Owner. In that UIViewController you must add the view of the tab bar i.e. [self.view addSubView: self.tabBarController.view];

Drag tab bar buttons onto the tab bar. For each tab bar button, they’ll be a UIViewController in the object panel. In the properties section of Interface Builder make sure you set the XIB, and its custom class to be the XIB’s view controller.