How To Customise the Tab Bar (UITabBar) in an iPhone Application (Part 2 of 2)

This is the much overdue followup to Part 1 which can be found here:

http://www.rumexit.co.uk/2010/07/how-to-customise-the-tab-bar-uitabbar-in-an-iphone-application-part-1-of-2/

We had subclassed UITabBarController and hidden the existing buttons. Now all we need to do is replace then and create the functionality.

To download a demo project demoing the below click here: https://github.com/rumex/RXCustomTabBar

3. Add My Own Items

Now we are going to create our new buttons. You need to create your four buttons in both a selected and unselected state and add them to your project. Assuming a portrait orientation you are looking at 320px wide in total and 50px high. I am going to assume that our new buttons are 80px X 50px each.

So, back to XCode.

Let’s create a new method called addCustomElements.

First we need to declare our four new UIButtons:

And declare our new method:

So now our CustomTabBar.h looks like this:

In our CustomTabBar.m we are going to create our addCustomElements method.

Now we need to call this method in viewDidAppear. Our viewDidAppear should now look like this:

We are now done. If we run up our application we will see our new custom buttons at the bottom of the screen. Unfortunately they still don’t do anything so lets now build in the functionality to allow the buttons the change tab.

4. Making it all Work

Let’s make a new method called selectTab that take an integer parameter called tabID to tell it which tab was selected.

In our CustomTabBar.h let’s declare it.

Now in our CustomTabBar.m we need to add it. We are going to do three things.

We are going to use a switch command to see which btnID was passed.

We are going to set the selected state of each button according to which btnID was passed.

Finally we will change the selectedIndex parameter or out TabBarController which will actually change our tab.

So the code will look like this:

So now we have a method that will change the state of the buttons and the selected page depending on which btnID is passed to it.

Finally we need to create the buttonClicked method that we set to be called on the TouchUpInside event of our custom buttons.

All it will do is get the tag number of the button and then call our selectTab method passing the tag number as a parameter.

And that should be all there is to it. If you run this up you will now have a working custom tab bar.

NOTE:
The only functionality this doesn’t reproduce is if you press the built in tab bar button of the currently selected tab it will pop any navigation controller back to the root (if there is one on the page). To replicate this on our fake tab bar we could replace the line there we set the selectedIndex of the tab controller with this code:

This checks to see if the tab of the button you are pressing is currently selected. If it is then it will pop the navController on that page back to root, alternatively it will just select the tab. But be careful, this is not a complete solution. This assumes that all of your tab has a navigation controller. If you put this on a page that didn’t and then you press the tab bar button twice it would crash out so if some of your pages have a controller and some don’t that you either want to code in a test to see if one is present, or you could simply hard code additional conditions to the if clause which checks which tab is active and only allow the navcontroller code to run for tabs you know have them.

Here you can download a project based on this method: https://github.com/rumex/RXCustomTabBar