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. In this article, I will take you through the process of building a Tab Bar application, and combines it with a Navigation controller. [login]
Adding a Navigation Controller
Using Xcode, create a new Tab Bar Application (iPhone) project (see Figure 1) and name it TabBarAndNav.





#import "MoviesListViewController.h"@implementation MoviesListViewControllerNSMutableArray *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]            initWithStyle:UITableViewCellStyleDefault          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.
Displaying the Movie Selected
Now that the second tab bar item is able to display a list of movies, you will now modify your application so that when a movie is selected, the details of the movie will be displayed in another View window. For simplicity, you will navigate to another View window which will then display the name of the movie selected. Add a new UIViewController subclass item to the Classes folder and name it MovieDetailController.m. This time, ensure that only the With XIB for user interface option is selected (see Figure 8).


#import <UIKit/UIKit.h>@interface MovieDetailViewController : UIViewController { IBOutlet UILabel *label; NSString *movieSelected;}@property (nonatomic, retain) UILabel *label;@property (nonatomic, retain) NSString *movieSelected;@end
In Interface Builder, control-click the File's Owner item and drag it over the Label view. Select label.Insert the following lines in bold to the MovieDetailViewController.m file:
#import "MovieDetailViewController.h"@implementation MovieDetailViewController@synthesize label;@synthesize movieSelected;-(void)viewWillAppear:(BOOL)animated { Â Â Â label.text = self.movieSelected;}
In the MoviesListViewController.m file, add the following lines in bold:
#import "MoviesListViewController.h"#import "MovieDetailViewController.h"@implementation MoviesListViewController- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { Â Â Â MovieDetailViewController *detailViewController = Â Â Â Â Â Â Â [[MovieDetailViewController alloc] Â Â Â Â Â Â Â Â Â Â Â initWithNibName:@"MovieDetailViewController" bundle:nil]; Â Â Â detailViewController.movieSelected = [listOfMovies objectAtIndex:indexPath.row]; Â Â Â [self.navigationController pushViewController:detailViewController animated:YES]; Â Â Â [detailViewController release];}
Press Command-R to test the application on the iPhone Simulator. You should now be able to select a movie from the list and then see the movie name selected displayed in another view (see Figure 11). Figure 11. Navigating to another view showing the movie selected.
Displaying Icons
One of the most common things that developers working with tab bar applications do is to modify the icons used by each of the tab bar items. According to Apple's specification (see this: http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW8), each tab bar icon must be 30x30 pixels. It must also use the PNG format. To save you the trouble of manually creating the icons, you can use the ready-made icons downloadable from http://glyphish.com/. In the following example, you will see how you can modify the tab bar item icons. Download the icons from http://glyphish.com/. Drag and drop the two icons as shown in Figure 12 into the Resources folder of Xcode.

