iPhone SDK: Creating a Modal Tab Bar Controller
Posted by Tim Stephenson, RaddOnline® on Friday, February 20, 2009
In the Apple Developer Forum for iPhone SDK, I noticed a question about how to create a UITabBarController in a Modal View. Since I was curious, I decided to test it out. Here's my project, and the steps I took to create it.
Start by creating a new project in Xcode using the view based application project template, I called my project "Modal_TabBar." Sorry, it's late, I couldn't come up with a better name. After the project is created, you'll have just a few files that should look something like the picture to the left. In this example we'll only need to edit three files. The Modal_TabBarViewController, both the header and the implementation file, and the NIB file Modal_TabBarViewController.xib.
First the Header File
The first thing we'll edit is the header file, Modal_TabBarViewController.h. Open it up and add the following code:
#import <UIKit/UIKit.h>
@interface Modal_TabBarViewController : UIViewController {
UITabBarController *tbc;
}
- (IBAction)showModalTabBar;
- (void)dismissTabBar;
@property (nonatomic, retain) UITabBarController *tbc;
@end
I added a property to hold the actual tab bar controller so that I could release it when the modal view is dismissed. I also added two methods. One to show the modal tab bar, and one to dismiss it. The method to show the tab bar is defined as an IBAction so that I can link it up in Interface Builder. Which brings us to the next step.
Link the Show Modal Method in Interface Builder
Open the nib file that was created as part of the project template in the resources folder. In my case it is called Modal_TabBar View Controller.xib. Since my primary goal is to display a modal tab bar, I added a single button to the view and labeled it "Show Modal Tab Bar."
Connect the button to the IBAction method in the controller by control dragging from the button to the Files Owner icon. Then select "showModalTabBar" when it pops up. See the illustration on the right. When done, return to Xcode.
Complete the Implementation
As you've probably guessed by now, we need to implement two methods to complete our simple project. Open the "Modal_TabBarViewController.m" file. At the top of the file, synthesize our property for the tab bar controller.
@synthesize tbc;
Then implement the showModalTabBar method.
- (IBAction)showModalTabBar {
UIViewController *blueController = [[UIViewController alloc] initWithNibName:nil bundle:nil];
blueController.view.backgroundColor = [UIColor blueColor];
blueController.title = @"Blue";
UIViewController *redController = [[UIViewController alloc] initWithNibName:nil bundle:nil];
redController.view.backgroundColor = [UIColor redColor];
UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[button setFrame:CGRectMake(20.0f, 140.0f, 280.0f, 40.0f)];
[button setTitle:@"Done" forState:UIControlStateNormal];
[button addTarget:self action:@selector(dismissTabBar) forControlEvents:UIControlEventTouchUpInside];
[redController.view addSubview:button];
redController.title = @"Red";
tbc = [[UITabBarController alloc] initWithNibName:nil bundle:nil];
tbc.viewControllers = [NSArray arrayWithObjects:blueController, redController, nil];
tbc.selectedViewController = redController;
NSLog(@"Selected index = %d of %d", tbc.selectedIndex, [tbc.viewControllers count]);
[blueController release];
[redController release];
[self presentModalViewController:tbc animated:YES];
}We're adding two controllers to the tab bar controller. The first controller will be blue, and it will have a button on the tab bar with the title "Blue." The second will be red, and it will have a button on the tab bar with the title "Red" and a button in the middle of the screen labeled "Done." When the done button is clicked, the modal controller will be dismissed.
First instantiate the two controllers and set the color and title properties. The title will be what gets displayed in the buttons of the tab bar. After instantiating the redController, create a button and add it as a subview. The line:
[button addTarget:self action:@selector(dismissTabBar) forControlEvents:UIControlEventTouchUpInside];
sets our dismissTabBar method so that it will be called when the button is clicked. Here's how to dismiss the modal controller after clicking the button.
- (void)dismissTabBar {
[self dismissModalViewControllerAnimated:YES];
[tbc release];
}Hey, that's it. You should be able to build and run your project. Click Show Modal Tab Bar button, click both tabs, and click the Done button in the Red tab. Download the project .zip file, about 1.4 MB.
Comments
BlackICE said on Monday, March 23, 2009:
Interesting post.
However, I tried to do the same thing using IB and not programmatically. So, no building of the tabBarController with it's array of views... instead, I used a new nib file containing the tab bar controller already configured with the views (all with their own nib files) and called the [[... alloc] initWithNibName:"the name of the nib file"...] to create my tabbar controller to call in modal view.
The view comes up but I can't see any of the IB configured tabs... just a black tabbar at the bottom (with no tabs) and a white view...
Any hint?
BlackICE
Tim Stephenson said on Monday, March 23, 2009:
I'm curious about that too, I'll play around with it and get back to you.
seattle said on Friday, March 27, 2009:
You have to declare an instance of UITabBarController and connect them via IB, and load the subview of IB within the controller class of the TabBarController.
Rafael said on Friday, April 03, 2009:
thanks for the tutorial it has helped me a lot.
could you show how we could pass data to the two views, lets say I want to pass from a table with different cells an image to one and text to the other one.
Thanks again
Tim Stephenson said on Friday, April 03, 2009:
Hi Rafael
In this sample I used the same controller for both the blue and the red one. You could subclass the UIViewController, add custom properties and them instantiate the two controllers with the data set how you need it. Each controller can then handle the property as needed.
For example assuming BlueViewController is a subclass of UIViewController and had a property named image, the blue controller might end up being instantiated like this:
BlueViewController *blueController = [[BlueViewController alloc] initWithNibName:nil bundle:nil];
blueController.image = [UIImage imageNamed:@"blueSky.png"];
blueController.view.backgroundColor = [UIColor blueColor];
blueController.title = @"Blue";
Scott said on Saturday, May 09, 2009:
I am having the same problem that BlackICE is having. Has anyone one figured out how to do it with loading xib's?
Edward said on Thursday, June 18, 2009:
Hi Scott,
What you can do is create another view controller and put this in the .h file:
UITabBarController *tabBarController;
}
@property (nonatomic, retain) IBOutlet UITabBarController *tabBarController;
Then create another xib and put a tab bar controller into it and make the connections. Then have the model view controller push the view.
koti said on Monday, January 18, 2010:
how we can got more than two tab bar items
when clicking button.i am not getting.plz send that code fastly.
Austen said on Saturday, February 06, 2010:
> koti
Create your view controllers, just like blueController and redController, and add it into the array like so:
tbc.viewControllers = [NSArray arrayWithObjects:blueController, redController, myNewViewController, nil];
Bryce Steinhoff said on Saturday, April 10, 2010:
I know this thread is old, but I'm having the same problem that BlackICE and Scott were having. I have a view controller that loads a view when the app launches, but would like to have a modal view controller that is a tab bar controller slide up when a button is pushed. I have an IBAction setup that calls this code:
module1 = [[UITabBarController alloc] initWithNibName:@"Module1" bundle:nil];
[self presentModalViewController:module1 animated:YES];
[module1 release];
The controller slides up and is a tab bar controller, but none of the content from the NIB is loaded... it's just a blank tab bar and empty view.
Any thoughts?
stephanetgroup said on Thursday, April 22, 2010:
for those still wondering of how to load a xib check out my solution
i've added this codes in the function replacing former one
twelfthViewController = [[TwelfthViewController alloc] initWithNibName:@"TwelfthView" bundle:nil];
twelfthViewController.title = @"Espace client";
twelfthViewController is the class controlling my xib file which is TwelfthView which am calling in my tab bar controller