Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

iPhone: Using a Tab Bar App with a Navigation Controller : Page 2

Learn how to work with these two popular application templates.


advertisement

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; }</pre></code> In the MoviesListViewController.m file, add the following lines in bold: <pre><code> #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.


Wei-Meng Lee is a Microsoft .NET MVP and co-founder of Active Developer, a training company specializing in .NET and wireless technologies. He is a frequent speaker and author of numerous books on .NET, XML, and wireless technologies.
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap