Friday, 17 June 2011


In this tutorial , we will see how to use navigation controller ( UINavigationController ) to do the basic navigation in iPhone applications.

In iPhone, navigation controller is the object that takes care of changing the views. So we do not directly add and remove view from the window instead we use navigation object. We pass the different ViewController’s object to the navigation and it takes care of adding the views and removing the views of those view controllers. Internally it maintains a stack of the view controllers. So to switch to a new view, we need to push the corresponding controller object into the navigation object’s stack. Lets see how we do that.
Design Phase: We need a two UITableViewController subclass file with each containing some appropriate data and on the selection of any row by the user the second view will be displayed.

Step 1: Open Xcode and create window based application project now add two UITableViewController subclass file to your class group with the name FirstTableViewController and SecondTableViewController. Now at this moment your class group must contain four new files with the name
FirstTableViewController.h, FirstTableViewController.m , SecondTableViewController.h and SecondTableViewController.m

Step 2: Add a mutable array to both the files and arrange the section and title as per the MutableArray (refer our table view tutorial for this ).

Step 3: In the FirstTableViewController.m import the SecondTableViewController.h file and create its object in the following function

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath 
SecondTableViewController *sTVC = [[SecondTableViewController alloc]initWithStyle:UITableViewStyleGrouped];
Now go to the AppDelegate .m file of your application and add the UINavigationController class and here is the code to do that

#import "NavigationControllerDemoAppDelegate.h"
#import " FirstTableViewController.h"

@implementation NavigationControllerDemoAppDelegate
@synthesize window;

- (void)applicationDidFinishLaunching:(UIApplication *)application {    

    // Override point for customization after application launch
 FirstTableViewController *firstTVC = [[FirstTableViewController alloc]initWithStyle:UITableViewStyleGrouped];

 UINavigationController *nav = [[UINavigationController alloc]initWithRootViewController: firstTVC];

 [window addSubview:nav.view];
 [window makeKeyAndVisible];

Code Explanation: In the above code, We have created the object of the FirstTableViewController and also We have created the object of UINavigationController using initWithRootViewController method of the navigationController. This means we are pushing FirstTableView controller’s object at the root of the navigation. So the first view that would be displayed would be of FirstTableViewController.
And ultimately it’s the navigation’s view that you will be adding on to the window because the navigation object now will take care of all the visible views.

Step 4: Hold on a second we are not done yet into the FirstTableViewController.m . You must have earlier created the object of SecondTableViewController right, so now its time to tell the navigationController that on the hit of  any row of the tableview of the FirstTableViewController you should be traversed to the secondview, so you do that with the help of the following code

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
 SecondTableViewController *sTVC = [[SecondTableViewController alloc]initWithStyle:UITableViewStyleGrouped];
 [self.navigationController pushViewController: sTVC animated:YES];
[sTVC release];


Step 5: Just press build and Go and enjoy the simple navigation app that you made,


Now from the above code it is clear that the above code is of no use and was for you people to know how the navigation controller works, what we are actually keen to learn is that when the user will select an particular index from the row of that table he must be traversed to the next view with the next view showing the data which must be related as per the selection of the user. So here’s how you will do that

Step 1: In the SecondTableViewController.h file write your own init method which should look like this

- (id)initWithStyle:(UITableViewStyle)style andIndexNumber:(int)_indexNumber;

Now the reason why you will write your own init method is that we will first fetch the data from the FirstTableViewController regarding which row was selected and then supply that data to the SecondTableViewController and then add some code so that the SecondTableViewController displays the data as per the selected row from the FirstTableViewController, so now in the init method I will have the following code

- (id)initWithStyle:(UITableViewStyle)style andIndexNumber:(int)_indexNumber  {
    // Override initWithStyle: if you create the controller programmatically and want to perform customization that is not appropriate for viewDidLoad.
    if (self = [super initWithStyle:style]) {
  switch (_indexNumber) {
   case 0:
    companyProducts = [[NSMutableArray alloc]initWithObjects:@"iPod",@"iPhone",@"Macbook pro",@"Apple TV",nil];
   case 1:
    companyProducts = [[NSMutableArray alloc]initWithObjects:@"i3 processor",@"i7 processor",@"Core 2 duo Processor",@"Quad Core Processor",nil];
   case 2:
    companyProducts = [[NSMutableArray alloc]initWithObjects:@"Office Suite",@"Visual Studio",@"Windows Vista",@"Windows 7",nil];
   case 3:
    companyProducts = [[NSMutableArray alloc]initWithObjects:@"Search Engine",@"Google Earth",@"Google Map",@"Android",nil];
  self.title = @"Second View";
    return self;

Code Explanation: In the above code the currentIndex will be coming from the FirstTableViewController and if you look at the code its quite self explanatory like once I know the currentIndex value based upon that I am initializing my NSMutableArray.

Step 2: select the FirstTableViewController.m file and go to the selected index method and create the object of the class SecondTableViewController, and use your init method which would look like this

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

 SecondTableViewController *sTVC = [[SecondTableViewController alloc]initWithStyle:UITableViewStyleGrouped andIndexNumber:indexPath.row];
 [self.navigationController pushViewController: sTVC animated:YES];
 [sTVC release];

Now If you select the second row in the first view ( Intel ) , you will be navigated to the intel's second view. Have a look below.


                       Intel row selected 

Apple row selected

No comments:

Post a Comment