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. 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 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). Figure 8. Adding a UIViewController subclass item to the project.The Classes folder should now have three additional files as shown in Figure 9. Figure 9. The three files added to the project.Double-click on the MovieDetailViewController.xib file to edit it in Interface Builder. Populate the View window with a Label view (see Figure 10). Figure 10. Populating the View window.Back in Xcode, insert the following lines in bold to the MovieDetailViewController.h file:

#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. Figure 12. Adding images to the project.In the MainWindow.xib window, select each of the tab bar item and in the Attributes Inspector window, set the Image attribute to the images that you have just added (see Figure 13). Figure 13. Setting the icons for each tab bar item.Press Command-R to test the application on the iPhone Simulator. Figure 14 shows the icons for the two tab bar items. Figure 14. Viewing the icons.

Summary

In this article, you have seen how to combine a Tab Bar application with a Navigation Controller. You have also seen how to change the icons displayed by the tab bar items.