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 : Page 2

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


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;

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, 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 Glyphish.com.

In the following example, you will see how you can modify the tab bar item icons. Download the icons from 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.


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.

Wei-Meng Lee is a Microsoft MVP and founder of Developer Learning Solutions, a technology company specializing in hands-on training on the latest Microsoft technologies. He is an established developer and trainer specializing in .NET and wireless technologies. Wei-Meng speaks regularly at international conferences and has authored and coauthored numerous books on .NET, XML, and wireless technologies. He writes extensively on topics ranging from .NET to Mac OS X. He is also the author of the .NET Compact Framework Pocket Guide, ASP.NET 2.0: A Developer's Notebook (both from O'Reilly Media, Inc.), and Programming Sudoku (Apress). Here is Wei-Meng's blog.
Email AuthorEmail Author
Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date