User Experience (UX)
David Addison
by David Addison
share this
?fl
« Back to the Blog

iPhone Application Development: Tab Bar with Multiple Views in Each Tab

12/15/2010
iPhone Application Development: Tab Bar with Multiple Views in Each Tab

When I first started working with Objective-C for iPhone development using the Apple SDK I had a difficult time   understanding how navigation controllers work, and how to get one view to animate to another. This concept is the foundation of any App and is an important topic to understand. I read a ton of tutorials and devised this simple method with very little code to easily switch between views. Here are the steps.

First make a new project as a tab bar application. Open the MainWindow.xib in interface builder. Change the view mode to list view and click the little gray arrow next to your tab bar controller. You’ll see two view controllers that are assigned to each tab as shown on the right.

Click on the tab bar controller and then open its attributes tab. The two view controllers are listed. Click on them, and change them from view controllers to navigation controllers.

Then click on the first Navigation Controller's little gray arrow. When it opens you’ll see an icon of a view controller. Click on the view controller, and go to the Inspector Tab. Change the view controller’s class to your first view controller class. By default there is no class for the second view controller so create one if you wish (I would recommend keeping the naming convention so you know which controller goes with which xib file) and open its .xib file and change its class from view controller to your newly created class. Repeat the last step with the second tab.

Now you have a tab bar controller with two tabs and a navigation controller with a starting view for each. All that’s left is to give the navigation controller a view to push onto the navigation stack. Create another view controller class with a .xib file and call it whatever you want.

Push this view to the stack via a command. The easiest way is to create a button but this can also be done by using anything in which the user can interact (i.e. table cells, uisegmentedcontrollers, uinavigation items, etc.). Open the FirstView.xib file and click on the File’s Owner. Then click on the inspector tab and change the class to FirstViewController. Then drag a button from the library over to the view, and change its text to whatever you want. Now that you have a button you need to create an IBAction in which to connect. In the FirstViewController.h file enter the following code:

@interface FirstViewController : UIViewController {
}
-(IBAction)changeView:(id)sender;
@end

This code tells the program to add an outlet in interface builder that will connect to this function that will be written in the .m file. To do this switch to the FirstViewController.m file and add a second import statement under the default one:
#import “ViewtoPush.h”

Then add the IBAction under the @implementation statement:
-(IBAction)changeView:(id)sender {
ViewtoPush *viewtoPush = [[ViewtoPush alloc] initWithNibName:@"ViewtoPush" bundle:[NSBundle mainBundle]];
[self.navigationController pushViewController:viewtoPush animated:YES];
[viewtoPush release];
viewtoPush = nil;
}

Basically the above code allocates and creates an instance of your new view using the class and the xib file. It then pushes it on the navigation stack and finally releases the allocated memory.

Now go back to the FirstView.xib click on your button and then on its connections tab. There are many options the user can interact with the button but the one you want is called “Touch Up Inside.” Click and drag the little circle beside it to your File’s owner and select the changeView function.

Don’t forget to save and go back to your .m file. You can now save and then build and run.

This code can be used as many times as you want so you can give the new view a button and have it push a different controller on the stack, and so on. If you have any questions, or a request for a tutorial that expands on this, please comment and I will respond back.    

   

Thanks!

Thank you for contacting us!

We'll be in touch!

Back Home ×