Custom UITabBar background image not working in iOS 5 and later

Question

I have a simple piece of code that places a background image on the tabBar.

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tabBG.png"]];
[self.tabBarController.tabBar insertSubview:imageView atIndex:0];
[imageView release];

This works fine in iOS 4 but when testing in iOS 5, it doesn't work.

I'm trying to do the following:

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tabBG.png"]];

NSString *reqSysVer = @"4.3";
NSString *iOSVersion = [[UIDevice currentDevice] systemVersion];

if ([iOSVersion compare:reqSysVer options:NSNumericSearch] !=NSOrderedDescending) {
    // code for iOS 4.3 or below
    [self.tabBarController.tabBar insertSubView:imageView atIndex:0];
}
else {
    // code for iOS 5
    [self.tabBarController.tabBar insertSubView:imageView atIndex:1];
}

[imageView release];

Alas, this isn't working... Can anyone offer a solution?

Answer 1

iOS5 offers the UIAppearance Proxy.

Also, it's best practice to switch your code based on the capability (in this case it's respondsToSelector) instead of iOS version - that's a fragile assumption (who's to say it doesn't change in the future).

You can set it for just that instance or globally for all tab bars:

// not supported on iOS4    
UITabBar *tabBar = [tabController tabBar];
if ([tabBar respondsToSelector:@selector(setBackgroundImage:)])
{
    // set it just for this instance
    [tabBar setBackgroundImage:[UIImage imageNamed:@"tabbar_brn.jpg"]];

    // set for all
    // [[UITabBar appearance] setBackgroundImage: ...
}
else
{
    // ios 4 code here
}

Answer 2

//---- For providing background image to tabbar

UITabBar *tabBar = [tabBarController tabBar];
if ([tabBar respondsToSelector:@selector(setBackgroundImage:)])
{
    // ios 5 code here
    [tabBar setBackgroundImage:[UIImage imageNamed:@"PB_MD_footer_navBg_v2.png"]];

}
else
{
    // ios 4 code here

    CGRect frame = CGRectMake(0, 0, 480, 49);
    UIView *tabbg_view = [[UIView alloc] initWithFrame:frame];
    UIImage *tabbag_image = [UIImage imageNamed:@"PB_MD_footer_navBg_v2.png"];
    UIColor *tabbg_color = [[UIColor alloc] initWithPatternImage:tabbag_image];
    tabbg_view.backgroundColor = tabbg_color;
    [tabBar insertSubview:tabbg_view atIndex:0];

}

Answer 3

I realize this has been solved, I'm posting this for others who had the same issue as me. I wanted to add a background image to the selected tab in a tabbar. Here is the solution:

[[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:@"tabbar.png"]];
[[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"tabbar-item.png"]];

The second line here adds a background image to the selected tab in a tabbar.

Answer 4

After reviewing various articles, I found the answer for anyone that's having the same problem:

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tabBG.png"]];

if ([[[UIDevice currentDevice] systemVersion] floatValue] > 4.9) {
    //iOS 5
    [self.tabBarController.tabBar insertSubview:imageView atIndex:1];
}
else {
    //iOS 4.whatever and below
    [self.tabBarController.tabBar insertSubview:imageView atIndex:0];
}

[imageView release];

Works like a charm! Enjoy.

Answer 5

There is something new in iOS 5 forBarMetrics:UIBarMetricsDefault

Here is the apple doc on that

[[UINavigationBar appearance] setBackgroundImage:toolBarIMG forBarMetrics:UIBarMetricsDefault];