How to change style of tabbar in iphone sdk

Question

I am developing an application in which I need bit customize tabbar as I have attached Image below. As in Image home tabbar item show I want as it is, I tried but I couldn't change highlighted area as show in first Image and I am getting result as shown in second Image . So I want to get as it is in first Image for this do I need to crop whole tabbar Item Image as in home button or do I need to change color of selected area?

Thanks advance for you guidance.

Answer 1

Try this,

didFinishLaunchingWithOptions

    UIImage *selectedImage0 = [UIImage imageNamed:@"home_sel.png"];
    UIImage *unselectedImage0 = [UIImage imageNamed:@"home.png"];

    UIImage *selectedImage1 = [UIImage imageNamed:@"weight_sel.png"];
    UIImage *unselectedImage1 = [UIImage imageNamed:@"weight1.png"];

    UIImage *selectedImage2 = [UIImage imageNamed:@"rewards_sel.png"];
    UIImage *unselectedImage2 = [UIImage imageNamed:@"rewards.png"];

    UIImage *selectedImage3 = [UIImage imageNamed:@"menu_sel.png"];
    UIImage *unselectedImage3 = [UIImage imageNamed:@"menu.png"];

    UIImage *selectedImage4 = [UIImage imageNamed:@"shop_sel.png"];
    UIImage *unselectedImage4 = [UIImage imageNamed:@"shop.png"];

    UIImage *selectedImage5 = [UIImage imageNamed:@"account_sel.png"];
    UIImage *unselectedImage5 = [UIImage imageNamed:@"account.png"];

    UITabBar *tabBar = tabBarController.tabBar;

    UITabBarItem *item0 = [tabBar.items objectAtIndex:0];
    UITabBarItem *item1 = [tabBar.items objectAtIndex:1];
    UITabBarItem *item2 = [tabBar.items objectAtIndex:2];
    UITabBarItem *item3 = [tabBar.items objectAtIndex:3];
    UITabBarItem *item4 = [tabBar.items objectAtIndex:4];
    UITabBarItem *item5 = [tabBar.items objectAtIndex:5];

    [item0 setFinishedSelectedImage:selectedImage0 withFinishedUnselectedImage:unselectedImage0];
    [item1 setFinishedSelectedImage:selectedImage1 withFinishedUnselectedImage:unselectedImage1];
    [item2 setFinishedSelectedImage:selectedImage2 withFinishedUnselectedImage:unselectedImage2];
    [item3 setFinishedSelectedImage:selectedImage3 withFinishedUnselectedImage:unselectedImage3];
    [item4 setFinishedSelectedImage:selectedImage4 withFinishedUnselectedImage:unselectedImage4];
    [item5 setFinishedSelectedImage:selectedImage5 withFinishedUnselectedImage:unselectedImage5];

window.rootViewController=tabBarController;

Answer 2

In iOS 6 you can now use UIAppearance to style a tabbar and many other iOS UI's.

Add the following code to your AppDelegate:

    [[UITabBar appearance] setBackgroundImage:[[UIImage imageNamed:@"MY_TABS_BACKGROUND"]
    resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)]];  
    [[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"MY_SELECTION_IMAGE"]];

Take a look at the following tutorial to get better idea and see a sample project http://www.raywenderlich.com/21703/user-interface-customization-in-ios-6

BooRanger