Posts Tagged "Tab Bar Controller"

How to Customize the background of a UITabBarController

How to Customize the background of a UITabBarController

Customizing the background of a UITabBarController

Here is a common question I get and I see this question a lot on the forums “how do I change the background of a UITabBarController?”. Well, it’s really quite easy, and it can make a big difference on how your iPhone application is presented.

Step 1

In order to achieve the above you are going to need to create a custom UITabBarController class. In XCode, choose ‘New File’ and then select ‘Cocoa Touch Class/Objective-C Class (subclass NSObject)’. Call the class ‘CustomUITabBarController’.

Open up CustomUITabBarController.h and ensure the code looks like the following:

#import <UIKit/UIKit.h>

@interface CustomUITabBarController: UITabBarController {
IBOutlet UITabBar *tabBar1;

@property(nonatomic, retain) UITabBar *tabBar1;

Open up CustomUITabBarController.m and ensure the code looks like the following:

#import “CustomUITabBarController.h”
@implementation CustomUITabBarController
@synthesize tabBar1;

– (void)viewDidLoad {
[super viewDidLoad];
tabBar1.backgroundColor = [UIColor clearColor];
CGRect frame = CGRectMake(0, 0, 480, 49);
UIView *v = [[UIView alloc] initWithFrame:frame];
UIImage *i = [UIImage imageNamed:@”grad.png”];
UIColor *c = [[UIColor alloc] initWithPatternImage:i];
v.backgroundColor = c;
[c release];
[[self tabBar] insertSubview:v atIndex:0];
[v release];


Step 2

Open up the ‘MainWindow.xib’ and choose the Tab Bar Controller. Now look at the property inspector and change the class to your custom class, then associate the tabBar1 outlet to the Tab Bar Controller.

You may have noticed from the code that it references a file called ‘grad.png’. This is the new background image for your tab bar. In my example the image is 320px x 49px, however you may want to double this for the retina display.

You should now have a custom UITabBarController background! What do you think?

Read More