iPhone Modal Tab Bar Controller with Navigation Controller

Open Xcode and go to File - New Project. Select Navigation-Based application with the Use Core Data for Storage option unchecked. Name it ModalTabBarController. Before we begin to write code, we need to create a couple of ViewControllers. Press ⌘ - N, select UIViewController subclass and only check the With XIB for user interface. Name it TabBarViewController. Now add two UITableViewControllers named TabBarOneViewController and ViewTwoController and a UIViewController with an XIB named TabBarTwoViewController.

Now lets go write some code. Open up the RootViewController.m and write this under #import "RootViewController.h":

#import "TabBarViewController.h"

Under the numberOfRowsInSection method, change return 0; to return 1;

Under the cellForRowAtIndexPath method, write:

cell.textLabel.text = @"Modal Tab Bar Controller";

return cell;

Now uncomment the didSelectRowAtIndexPath method and write this in:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

TabBarViewController *tabBarView = [[TabBarViewController alloc] initWithNibName:@"TabBarViewController" bundle:[NSBundle mainBundle]];

[self.navigationController presentModalViewController:tabBarView animated:YES];

[tabBarView release];

}

Save it and open up TabBarViewController.h and type this in:

#import

@interface TabBarViewController : UIViewController {

UITabBarController *tabBarController;

UIBarButtonItem *backButtonOne;

UIBarButtonItem *backButtonTwo;

}

@property (nonatomic, retain) IBOutlet UITabBarController *tabBarController;

@property (nonatomic, retain) IBOutlet UIBarButtonItem *backButtonOne;

@property (nonatomic, retain) IBOutlet UIBarButtonItem *backButtonTwo;

- (IBAction)backButtonOnePressed;

- (IBAction)backButtonTwoPressed;

@end

Open the .m file and type this in:

#import "TabBarViewController.h"

@implementation TabBarViewController

@synthesize tabBarController, backButtonTwo, backButtonOne;

- (void)viewDidLoad {

[super viewDidLoad];

self.view = tabBarController.view;

}

- (IBAction)backButtonOnePressed {

[self dismissModalViewControllerAnimated:YES];

}

- (IBAction)backButtonTwoPressed {

[self dismissModalViewControllerAnimated:YES];

}

- (void)didReceiveMemoryWarning {

// Releases the view if it doesn't have a superview.

[super didReceiveMemoryWarning];

// Release any cached data, images, etc that aren't in use.

}

- (void)viewDidUnload {

// Release any retained subviews of the main view.

// e.g. self.myOutlet = nil;

}

- (void)dealloc {

[super dealloc];

[tabBarController release];

[backButtonTwo release];

[backButtonOne release];

}

@end

Save it and open up TabBarViewController.xib. In Interface Builder, drag a UITabBarController into the project pane (not the view). Click on the UITabBarController and press ⌘ - 1. Change the class for Item 1 and 2 to a UINavigationController. Double click the UITabBarController and rename the two tabs to Tab One and Tab Two. Click on Tab One and rename the UINavigationBar title to TableView. Grab a UIBarButtonItem from the library and drag it to the left side of the UINavigationBar. Name the button 'Back'. Click where it says View in the view pane and press ⌘ - 4 to rename the class to TabBarOneViewController. Now click on Tab Two and change the UINavigationBar title to View From Nib. Drag a UIBarButtonItem from the library and drag it to the left side of the UINavigationBar. Name the button 'Back'.  Click where it says View in the view pane and press ⌘ - 4 to change the class to TabBarTwoViewController. Now press ⌘ - 1 and change the nib name TabBarTwoViewController. In the project pane, connect the view and the tabBarController to the File's Owner. Now click on Tab One and connect the Back button to the File's owner (make sure to select backButtonOne). Control drag from the UIBarButtonItem to the File's Owner and select the backButtonOnePressed action. Repeat the process for the second UIBarButtonItem in Tab Two (Make sure to connect it as backButtonTwo and select the backButtonTwoPressed action). Save it and exit interface builder.

Open TabBarOneViewController.m and type this in:

#import "TabBarOneViewController.h"

#import "ViewTwoController.h"

@implementation TabBarOneViewController

- (void)viewDidLoad {

[super viewDidLoad];

// Uncomment the following line to display an Edit button in the navigation bar for this view controller.

// self.navigationItem.rightBarButtonItem = self.editButtonItem;

}

- (void)didReceiveMemoryWarning {

// Releases the view if it doesn't have a superview.

[super didReceiveMemoryWarning];

// Release any cached data, images, etc that aren't in use.

}

- (void)viewDidUnload {

// Release any retained subviews of the main view.

// e.g. self.myOutlet = nil;

}

#pragma mark Table view methods

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {

return 1;

}

// Customize the number of rows in the table view.

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

return 1;

}

// Customize the appearance of table view cells.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *CellIdentifier = @"Cell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if (cell == nil) {

cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];

}

// Set up the cell...

cell.textLabel.text = @"Next View";

return cell;

}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

ViewTwoController *viewTwo = [[ViewTwoController alloc] initWithStyle:UITableViewStyleGrouped];

[self.navigationController pushViewController:viewTwo animated:YES];

[viewTwo release];

}

Save it and open up ViewTwoController.m and type this in under the cellForRowAtIndexPath: cell.textLabel.text = @"Next View";

Also, don't forget to change the numberOfRowsInSection to 1.

Save and open up TabBarTwoViewController.xib. Drag a UIToolbar and put it at the bottom of the view. Next drag a UISegmentedControl and a UILabel to the middle of the view and rename the label to Here is View Two! Save the xib file and click build and go in xcode. The source code can be found here: http://sites.google.com/site/iprogramiphones/bukisatutorials/iphonemodaltabbarcontrollerwithnavigationcontroller. Thanks for reading!

What kind of tutorial would you like next? Post your answer as a comment on this page.

Problems with coding? Email me @ edwardhinsa@gmail.com.

Have a dog and an iPod Touch and an iPhone? http://itunes.apple.com/WebObjects/MZStore.woa/wa/browserRedirect?url=itms://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=332655618&mt=8