How to customize the appearance of a tab bar?

Question

I am looking to customize the appearance of a tab bar. Specifically I want to:

• Change the default tabBar color
• Add a custom image on top of the tabBar
• Add custom images to tabBarButtons
• Change the font of tabBarButtons

In a nutshell, I want all of the functionality of a tab bar but with a completely custom look.

Should I start subclassing elements, or using categories or what?

Answer 1

When faced with this situation I've just written a custom class (subclassing UIViewController) and used buttons as the UI object the user interacts with. With this technique you can be pretty aggressive in memory management, dropping and recreating unused tabs in a way that the UITabViewController doesn't manage. The only area I didn't cover was the MORE...swap into a table view - but then I didn't want that either really!

EDIT... There is no reusable code as such. For each tab just use a custom button styled in the way you want. I've got three states for each button normal(deselect), pressed(on) and current(off). My touchupinside handler swaps out the normal and pressed buttons as required by calling greytherightbuttons and passing the tag of the button.

- (void) greytherightbuttons:(int)n {


    switch (n) {
        case 0:
            [b0 setImage:[UIImage imageNamed:@"btn_gallery_your_designs_off.png"] forState:UIControlStateNormal];
            [b1 setImage:[UIImage imageNamed:@"btn_gallery_recent_editions_deselect.png"] forState:UIControlStateNormal];
            [b2 setImage:[UIImage imageNamed:@"btn_gallery_highest_rated_deselect.png"] forState:UIControlStateNormal];
            break;
        case 1:
            [b0 setImage:[UIImage imageNamed:@"btn_gallery_your_designs_deselect.png"] forState:UIControlStateNormal];
            [b1 setImage:[UIImage imageNamed:@"btn_gallery_recent_editions_off.png"] forState:UIControlStateNormal];
            [b2 setImage:[UIImage imageNamed:@"btn_gallery_highest_rated_deselect.png"] forState:UIControlStateNormal];         
            break;

        case 2:
            [b0 setImage:[UIImage imageNamed:@"btn_gallery_your_designs_deselect.png"] forState:UIControlStateNormal];
            [b1 setImage:[UIImage imageNamed:@"btn_gallery_recent_editions_deselect.png"] forState:UIControlStateNormal];
            [b2 setImage:[UIImage imageNamed:@"btn_gallery_highest_rated_off.png"] forState:UIControlStateNormal];

            break;
        default:
            break;
    }

}

The next step is to swap in the correct view.

The actual way you swap in the view will depend on how you want to create the views, but its no more complicated than alloc/initWithFrame your new view controller. [self.view addSubview:newvc.view] then remove it from the view and nil it when you change tabs.