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:

1 2 3 4

UIButton *btn1; UIButton *btn2; UIButton *btn3; UIButton *btn4;

And declare our new method:

1	-( void ) addCustomElements;

So now our CustomTabBar.h looks like this:

1 2 3 4 5 6 7 8 9 10

@interface CustomTabBar : UITabBarController {      UIButton *btn1;      UIButton *btn2;      UIButton *btn3;      UIButton *btn4; }   -( void ) hideTabBar; -( void ) addCustomElements; @end

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

-( void )addCustomElements {      // Initialise our two images      UIImage *btnImage = [UIImage imageNamed: @"NavBar_01.png" ];      UIImage *btnImageSelected = [UIImage imageNamed: @"NavBar_01_s.png" ];        btn1 = [UIButton buttonWithType:UIButtonTypeCustom]; //Setup the button          btn1.frame = CGRectMake(0, 430, 80, 50); // Set the frame (size and position) of the button)      [btn1 setBackgroundImage:btnImage forState:UIControlStateNormal]; // Set the image for the normal state of the button      [btn1 setBackgroundImage:btnImageSelected forState:UIControlStateSelected]; // Set the image for the selected state of the button      [btn1 setTag:0]; // Assign the button a "tag" so when our "click" event is called we know which button was pressed.      [btn1 setSelected: true ]; // Set this button as selected (we will select the others to false as we only want Tab 1 to be selected initially            // Now we repeat the process for the other buttons      btnImage = [UIImage imageNamed: @"NavBar_02.png" ];      btnImageSelected = [UIImage imageNamed: @"NavBar_02_s.png" ];      btn2 = [UIButton buttonWithType:UIButtonTypeCustom];          btn2.frame = CGRectMake(80, 430, 160, 50);      [btn2 setBackgroundImage:btnImage forState:UIControlStateNormal];      [btn2 setBackgroundImage:btnImageSelected forState:UIControlStateSelected];      [btn2 setTag:1];        btnImage = [UIImage imageNamed: @"NavBar_03.png" ];      btnImageSelected = [UIImage imageNamed: @"NavBar_03_s.png" ];      btn3 = [UIButton buttonWithType:UIButtonTypeCustom];          btn3.frame = CGRectMake(160, 430, 80, 50);      [btn3 setBackgroundImage:btnImage forState:UIControlStateNormal];      [btn3 setBackgroundImage:btnImageSelected forState:UIControlStateSelected];      [btn3 setTag:2];        btnImage = [UIImage imageNamed: @"NavBar_04.png" ];      btnImageSelected = [UIImage imageNamed: @"NavBar_04_s.png" ];      btn4 = [UIButton buttonWithType:UIButtonTypeCustom];          btn4.frame = CGRectMake(240, 430, 80, 50);      [btn4 setBackgroundImage:btnImage forState:UIControlStateNormal];      [btn4 setBackgroundImage:btnImageSelected forState:UIControlStateSelected];      [btn4 setTag:3];            // Add my new buttons to the view      [ self .view addSubview:btn1];      [ self .view addSubview:btn2];      [ self .view addSubview:btn3];      [ self .view addSubview:btn4];            // Setup event handlers so that the buttonClicked method will respond to the touch up inside event.      [btn1 addTarget: self action: @selector (buttonClicked:) forControlEvents:UIControlEventTouchUpInside];      [btn2 addTarget: self action: @selector (buttonClicked:) forControlEvents:UIControlEventTouchUpInside];      [btn3 addTarget: self action: @selector (buttonClicked:) forControlEvents:UIControlEventTouchUpInside];      [btn4 addTarget: self action: @selector (buttonClicked:) forControlEvents:UIControlEventTouchUpInside]; }

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

1 2 3 4 5 6

- ( void )viewDidAppear:( BOOL )animated {      [ super viewWillAppear:animated];        [ self hideTabBar];      [ self addCustomElements]; }

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.

1 2 3 4 5

..... -( void ) hideTabBar; -( void ) addCustomElements; -( void ) selectTab:( int )tabID; ......

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

- ( void )selectTab:( int )tabID {      switch (tabID)      {          case 0:              [btn1 setSelected: true ];              [btn2 setSelected: false ];              [btn3 setSelected: false ];              [btn4 setSelected: false ];              break ;          case 1:              [btn1 setSelected: false ];              [btn2 setSelected: true ];              [btn3 setSelected: false ];              [btn4 setSelected: false ];              break ;          case 2:              [btn1 setSelected: false ];              [btn2 setSelected: false ];              [btn3 setSelected: true ];              [btn4 setSelected: false ];              break ;          case 3:              [btn1 setSelected: false ];              [btn2 setSelected: false ];              [btn3 setSelected: false ];              [btn4 setSelected: true ];              break ;      }          self .selectedIndex = tabID;   }

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.

1 2 3 4 5

- ( void )buttonClicked:( id )sender {      int tagNum = [sender tag];      [ self selectTab:tagNum]; }

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:

1 2 3 4 5 6

if ( self .selectedIndex == tabID) {      UINavigationController *navController = (UINavigationController *)[ self selectedViewController];      [navController popToRootViewControllerAnimated: YES ]; } else {      self .selectedIndex = tabID; }

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

转载于:https://www.cnblogs.com/liuboo/archive/2012/10/19/2731184.html