NavigationController Example In iPhone

In this application , we will see how display image when we select any row from tableview. This is the very simple example. So let see how it will be worked.

Step 1: Create a Navigation base application using template. Give the application name ‚ÄúNavigationController‚ÄĚ.

Step 2: Xcode automatically creates the directory structure and adds essential frameworks to it. You can explore the directory structure to check out the content of the directory.

Step 3: We need to add one UIViewController, select Choose New file -> Select cocoa touch classes group and then select UIViewController and corresponding xib file. Give the class name “AnimalViewController”. And add one class, give the name”Animal”.

Step 4: In the NavigationControllerAppDelegate.h file, we have added UINavigationController and NSMutableArray. So make the following changes in the file.


#import <uikit/UIKit.h>
#import "Animal.h"

@interface NavigationContollerAppDelegate : NSObject {

UIWindow *window;
UINavigationController *navigationController;
NSMutableArray *animals;

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UINavigationController *navigationController;
@property (nonatomic, retain) NSMutableArray *animals;



Step 5: Open the NavigationControllerAppDelegate.m file and make the following changes in the file:


- (void)applicationDidFinishLaunching:(UIApplication *)application {
animals = [[NSMutableArray alloc] init];
NSString *aName = @"Kangaroo";
NSString *aImageUrl = @"";
Animal *aAnimal = [[Animal alloc] initWithName:aName url:aImageUrl];
[animals addObject:aAnimal];
[aAnimal release];
NSString *bName = @"Lion";
NSString *bImageUrl = @"";

Animal *bAnimal = [[Animal alloc] initWithName:bName url:bImageUrl];
[animals addObject:bAnimal];
[bAnimal release];
NSString *cName = @"Elephant";
NSString *cImageUrl = @"";

Animal *cAnimal = [[Animal alloc] initWithName:cName url:cImageUrl];
[animals addObject:cAnimal];
NSLog(@"anmimals count : %i",animals);
[cAnimal release];

[window addSubview:[navigationController view]];
[window makeKeyAndVisible];



Step 6: In the RootViewController.h file, we have added AnimalViewController class in the file , so make the following changes in the file.


#import <uikit/UIKit.h>
#import "AnimalViewController.h"

@interface RootViewController : UITableViewController {
AnimalViewController *animalView;

@property(nonatomic, retain) AnimalViewController *animalView;



Step 7: Now open the RootViewController.m file and make the following changes in the file.


- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 1;

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
NavigationContollerAppDelegate *appDelegate = (NavigationContollerAppDelegate *)[[UIApplication sharedApplication] delegate];
NSLog(@"animals count cell : %i",[appDelegate.animals count]);
return appDelegate.animals.count;

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

NSLog(@"cellFor Row");
static NSString *CellIdentifier = @"Cell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];

NavigationContollerAppDelegate *appDelegate = (NavigationContollerAppDelegate *)[[UIApplication sharedApplication] delegate];
Animal *animal = (Animal *)[appDelegate.animals objectAtIndex:indexPath.row];

return cell;

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
NavigationContollerAppDelegate *appDelegate = (NavigationContollerAppDelegate *)[[UIApplication sharedApplication] delegate];
Animal *animal = (Animal *)[appDelegate.animals objectAtIndex:indexPath.row];

if(self.animalView == nil) {

AnimalViewController *viewController = [[AnimalViewController alloc] initWithNibName:@"AnimalViewController" bundle:nil];
self.animalView = viewController;
[viewController release];

[self.navigationController pushViewController:self.animalView animated:YES];
self.animalView.title = [animal name];
NSData *imageData = [NSData dataWithContentsOfURL:[NSURL URLWithString:[animal imageURL]]];
UIImage *animalImage = [[UIImage alloc] initWithData:imageData cache:YES];
self.animalView.animalImage.image = animalImage;


- (void)viewDidLoad {
[super viewDidLoad];
self.title = @"My Zoo";
- (void)viewWillAppear:(BOOL)animated {

animalView.animalName.text = nil;
animalView.animalImageUrl.text = nil;
[super viewWillAppear:animated];
NSLog(@"View Will appear");
[self.tableView reloadData];



Step 8: In the AnimalViewController.h file we have added two UITextfield and UIImageView for displaying the image and import Animal.h file. So make the following changes in the file.


#import <uikit/UIKit.h>
#import "Animal.h"

@interface AnimalViewController : UIViewController {
IBOutlet UITextField *animalName;
IBOutlet UITextField *animalImageUrl;
IBOutlet UIImageView *animalImage;
Animal *animal;

@property (nonatomic, retain) IBOutlet UITextField *animalImageUrl;
@property (nonatomic, retain) IBOutlet UIImageView *animalImage;
@property (nonatomic, retain) Animal *animal;
@property (nonatomic, retain) IBOutlet UITextField *animalName;



Step 9: Double click the AnimalViewController.xib file and open it to the Interface Builder. Open the view window , first drag the ImageView from library and place it to the view window. Connect File’s Owner icon to View icon and select view and connect File’s Owner icon to the ImageView and select animalImage. Now save the AnimalViewController.xib file, close it and go back to the Xcode.

Step 10: In the Animal.h file , we have added NSString and add one method in the file:


#import <uikit/UIKit.h>

@interface Animal : NSObject {
NSString *name;
NSString *imageURL;

@property (nonatomic, retain) NSString *name;
@property (nonatomic, retain) NSString *imageURL;

-(id)initWithName:(NSString *)n url:(NSString *)u;



Step 11: Open the Animal.m file and make the following changes in the file.


#import "Animal.h"

@implementation Animal
@synthesize name, imageURL;

-(id)initWithName:(NSString *)n url:(NSString *)u { = n;

self.imageURL = u;
return self;



Step 12: Now compile and run the application in the file.

You can Download SourceCode from here NavigationContollerDemo

Leave a Comment:

derp says March 24, 2011

lame little things missing! but really helpful tutorial

Genar says July 1, 2011

Thanks for the post!

In the source code:
NSLog(@”anmimals count : %i”,animals);
NSLog(@”anmimals count : %i”,[animals count]);

Also to avoid other warnings, replace:
cell.textLabel.text =;

And also, for new iOS versions remove the Cache:YES argument when allocating an Image

Add Your Reply