2:51 pm | by olifarago

Just as we were about to go live with iOrlando, it became clear that due to some requirements from our sponsor a standard UITabBar would not work for our needs.  The sponsor wanted to use just their logo for their tab and not have a text label.

Unfortunately the standard UITabBar controller is quite limited in terms of the styling.  I know this is deliberate on apples part to provide uniformity of interface but that doesn’t always work as this example proves.

So, creating a custom nav bar.  I found surprisingly little information on the internet on how to achieve this.  I was clear that I would need to subclass UITabBarController but many of the solutions involved using private APIs and I needed to avoid this as I needed to get my apple approved for sale on the AppStore.

The basis of my approach is to create a “fake” tab bar that sits on top of the old tab bar and replicated it’s functionality.

A demo of part’s 1 and 2 of the tutorial is available here: https://github.com/rumex/RXCustomTabBar

Before we start I know Apple’s guide for this control says “Not Intended for Subclassing”.  This article is purely the approach I took, I am not claiming it is the best to do it, I am just sharing what I did.  What I can say is that it is the method I used in iOrlando Tourist Map and it has been approved by Apple with no issues through a number of updates.

For the sake of this demo I am going to use the navigation for iOrlando.  The basic concept of my approach was:

  1. Create the UITabBar as normal adding an item for each view you require.
  2. Hide the existing Tab Bar Items
  3. Add my own items (custom buttons designed to mimic the TabBar)
  4. Create the functionality to make the buttons perform the expected actions.

1. Create the Tab Bar Based Application as Normal
This tutorial starts with an application that already has a Tab Bar in use (with four items in my case).  If you don’t know how to get to this point I have created another tutorial detailing how to create a basic Tab Bar application and would recommend you read that first.  You can find that at: http://www.rumexit.co.uk/2010/07/tutorial-how-to-create-an-iphone-application-with-a-tab-bar/

2. Hide the Existing Tab Bar Items
OK, now we have a working Tab Bar application we need to subclass UITabBarController.  Right click in Xcode and Add a new file.

Select a new Objective-C Class and make it a subclass of NSObject.

Give it a name (I have called mine CustomTabBar).

We are going to edit CustomTabBar.h so select it and you will see the current contents of the file.  Since we are subclassing UITabBarController we need to change NSObject to UITabBarController.  I am also going to declare a method called hideExistingTabBar. My CustomTabBar.h now looks like this:

@interface CustomTabBar : UITabBarController {

}

-(void) hideExistingTabBar;
@end

Now I am going to edit CustomTabBar.m.  We are going to create our new hideExistingTabBar method and override viewDidAppear (to call hideExistingTabBar) and dealloc to take care of our garbage collection later on.

#import "CustomTabBar.h"

@implementation CustomTabBar

- (void)viewDidAppear:(BOOL)animated {
    [super viewWillAppear:animated];

    [self hideExistingTabBar];
}

- (void)hideExistingTabBar
{
	for(UIView *view in self.view.subviews)
	{
		if([view isKindOfClass:[UITabBar class]])
		{
			view.hidden = YES;
			break;
		}
	}
}

- (void)dealloc {
    [super dealloc];
}

You will see our hideExistingTabBar method is iterating through every subview in the view.

for(UIView *view in self.view.subviews)

Checking to see if it is a TabBar.

if([view isKindOfClass:[UITabBar class]])

If it is a tab bar then it is hiding it.

view.hidden = YES;

We have now created a subclass of UITabBarController that at runtime will hide the existing Tab Bar items. Now all we need to do is to change our existing TabBar to use our custom controller instead of the standard one.

Make sure you CustomTabBar.h and .m are saved and then double click on MainWindow.xib again to open up Interface Builder.

Select the tab bar controller.  Then in the identity inspector change the Class to CustomTabBar.

Now save and close interface builder.

You can now run your project in the simulator and you will see Tab Bar has completely disappeared.  Clearly this is not very useful as you can’t access any other views but it is a good start as we are now ready to add our custom buttons.

Part 2 can be found here: http://www.rumexit.co.uk/2010/11/how-to-customise-the-tab-bar-uitabbar-in-an-iphone-application-part-2-of-2/#more-143

20 Responses to “How To Customise the Tab Bar (UITabBar) in an iPhone Application (Part 1 of 2)”

  1. [...] Rumex Skip to content Home ← Welcome How To Customise the Tab Bar (UITabBar) in an iPhone Application (Part 1 of 2) → [...]

  2. samar says:

    when the part 2 will be published i m waiting very helpful tutorial
    thx…..

  3. olifarago says:

    @samar apologies for the delay between articles, I will finish part 2 ASAP.

  4. azia says:

    Waiting for the part 2 very much! I need the same thing you’ve done in iOrlando Tourist Map. Please share some more code with us :)

  5. Thanks for this. I wrote some rough sample code yesterday based on the solution above. Feel free to have a look @ http://github.com/aalittle/ALCustomTabBarController

  6. olifarago says:

    @azia Things are so busy right now I just haven’t found any time to write this. See the link that Andrew Little has provided as this shold help you with the second part.

    @Andrew thanks very much, I’m sure people will find this very useful.

  7. John says:

    Hi,
    I just was trying this out. I had some difficulty in doing it, but I eventually realized that I had to give my buttons Tag numbers in IB.

    The custom tab bar seems to work and my views change when I select the buttons, but if I have anything in my view, I can’t interact with it. I am not sure what is causing that.

    Thanks,
    John

  8. [...] Apple tab bar template to work exactly the way I wanted to, so I searched the internet. I found a website that explained how to do it a little different way – which didn’t work out for me. I [...]

  9. antho says:

    John, I have the exact same problem!
    Did you find a solution?

  10. antho says:

    Ok, I found the problem.

    In Andrew’s code, you have to change the size of the custom tabbar XIB (eg: if your tabbar is 50px height, set the view height to 50px as well. In the current version, the view height is 480px so it covers everything else in your screen and you can’t use your components.

    When you set the correct size to your view, the toolbar will appear at the top of your screen, you have to change his position like this (in your viewDidAppear method) :

    self.customTabBarView.frame = CGRectMake(0.0, 480-50, self.customTabBarView.frame.size.width, self.customTabBarView.frame.size.height);

    It works like a charm!

    Thanks for this post.

  11. [...] How To Customise the Tab Bar (UITabBar) in an iPhone Application (Part 1 of 2) « Rumex IT says: November 18, 2010 at 4:54 pm [...]

  12. vassa says:

    Awesome tutorial, keep on the good work

  13. Hate TabBar says:

    Great thanks, this give me great help

  14. Sejin Park says:

    wow!!

    amazing source!!

    thx for your help :)

  15. Yuji Baba says:

    Thank you very much for this good document!

  16. [...] http://www.rumexit.co.uk/2010/07/how-to-customise-the-tab-bar-uitabbar-in-an-iphone-application-part… This entry was posted in Uncategorized. Bookmark the permalink. ← UITabBar Tutorial LikeBe the first to like this post. [...]

  17. Regina says:

    I had this problem, that I wanted my custom TabBar to have another height than the normal TabBar. I fixed this with adding two lines to my hideTabBar-method:
    - (void)hideTabBar
    {
    for(UIView *view in self.view.subviews)
    {
    if([view isKindOfClass:[UITabBar class]])
    {
    view.frame = CGRectMake(0, 450, 320, 30); // 30 is the height of my custom TabBar
    view.hidden = YES;
    //break;
    }
    else
    view.frame = CGRectMake(0, 0, 320, 450); //450 is the over all height minus height of my custom tabbar
    }
    }

  18. Go Inspired says:

    How can I see the second tutorial? Thanks

  19. sonia says:

    i implemented your code in my project with slight changes and it works perfectly but the problem is at times it hooks the images(which get changed with tab change).Instead of using different images for all buttons i used single imageview which covers the entire area of tabbar hiding the buttons..


Leave a Reply

Videos, Slideshows and Podcasts by Cincopa Wordpress Plugin