RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


iPhone Programming: Using a Tab Bar App with a Navigation Controller

Learn how to combine these two popular application templates in your iPhone apps.

The iPhone SDK comes with various templates to let developers create different types of applications. Two popular application templates are Tab Bar Application and Navigation-based Application. In reality, it is common to find applications that use a tab bar together with a navigation controller.

One such application is the Phone application that comes with the iPhone. The Phone application has five tab items -- Favorites, Recents, Contacts, Keypad, and Voicemail. Tapping on the Favorites item shows you a list of favorite contacts. Of each contact shown, you can tap on the disclosure button displayed on the right to navigate to the view that shows the details of the contact.

[login] In this article, I will take you through the process of building a Tab Bar application, and combines it with a Navigation controller.

Adding a Navigation Controller

Using Xcode, create a new Tab Bar Application (iPhone) project (see Figure 1) and name it TabBarAndNav.

Figure 1: Creating a new Tab Bar application.

Double-click MainWindow.xib (located in the Resources folder of the Xcode project) to edit it in Interface Builder.

Select the Tab Bar Controller item and view its Attributes Inspector window. Set the Second view controller to Navigation Controller (see Figure 2).

Figure 2: Setting the second view controller to be a Navigation Controller.

Double-click the Tab Bar Controller item (see Figure 3) and click the second Tab Bar Item view located at the bottom of the window. You should see a Navigation Bar at the top of the view (displaying the word "Item").

Figure 3: Viewing the navigation bar on top of the window.

Back in Xcode, right-click the Classes folder and add a new UITableViewController subclass item. Name it MoviesListViewController.m. Ensure that the "UITableViewController subclass" and "With XIB for user interface" options are checked (see Figure 4).

Figure 4: Adding a new UIViewController subclass item to the project.

The Classes folder should now have the three new files as shown in Figure 5.

Figure 5: The three files added to the project.

Back in the MainWindow.xib window, expand the Tab Bar Controller item, followed by the Selected Navigation Controller. Select the view controller listed after the Navigation Bar. In its Identity Inspector window, set its Class name to MoviesListViewController (see Figure 6).

Figure 6: Setting the view controller to MoviesListViewController.

Back in Xcode, insert the following code that appears in bold into the MoviesListViewController.m file:
#import "MoviesListViewController.h"

@implementation MoviesListViewController

NSMutableArray *listOfMovies;

- (void)viewDidLoad {
    //---initialize the array--- 
    listOfMovies = [[NSMutableArray alloc] init];

    //---add items--- 
    [listOfMovies addObject:@"Training Day"]; 
    [listOfMovies addObject:@"Remember the Titans"];
    [listOfMovies addObject:@"John Q."]; 
    [listOfMovies addObject:@"The Bone Collector"]; 
    [listOfMovies addObject:@"Ricochet"]; 
    [listOfMovies addObject:@"The Siege"]; 
    [listOfMovies addObject:@"Malcolm X"]; 
    [listOfMovies addObject:@"Antwone Fisher"]; 
    [listOfMovies addObject:@"Courage Under Fire"]; 
    [listOfMovies addObject:@"He Got Game"]; 
    [listOfMovies addObject:@"The Pelican Brief"]; 
    [listOfMovies addObject:@"Glory"]; 
    [listOfMovies addObject:@"The Preacher's Wife"];

    //---set the title--- 
    self.navigationItem.title = @"Movies";
    [super viewDidLoad];   

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    // Return the number of sections.
    return 1;

- (NSInteger)tableView:(UITableView *)tableView 
 numberOfRowsInSection:(NSInteger)section {
    // Return the number of rows in the section.
    return [listOfMovies count];

// 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] 
          reuseIdentifier:CellIdentifier] autorelease];
    // Configure the cell...
    NSString *cellValue = [listOfMovies objectAtIndex:indexPath.row];
    cell.textLabel.text = cellValue;   
    return cell;

- (void)dealloc {
    [listOfMovies release];
    [super dealloc];
Press Command-R to test the application on the iPhone Simulator. Clicking the Second Tab Bar item should display a list of movies (see Figure 7).

Figure 7: Displaying a list of movies.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date