Thursday, January 27, 2011


In this post we will learn to use the UINavigationController class and will become familiar to some of its most commonly used functionality.

UINavigationController class description: The navigation controller manages a stack of views and the user can use the navigation controller to go to the next view. 
The UINavigationController class inherits from the UIViewController class and has the view property. The navigation view contains the navigation bar on the top whenever a new view has been popped or pushed in the window the navigation controller updates the view property.

The current post is divided into two parts:

  1. User selects a row from the table view and gets traversed into the next view.
  2. User selects a row from the table view and gets traversed into the next view displaying appropriate data as per the users selection.
Part 1: User selects a row from the table view and gets traversed into the next view.

Design Phase: For the part one app 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 loaded in the window.

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

Step 2: Add a mutable array to both the files and arrange the section and title as per the MutableArray(refer to this post if you have forgot).

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

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

Now go to the AppDelegate .m file of your application and add the UINavigationController class and heres the code to do that

#import "NavigationControllerDemoAppDelegate.h"
#import "firstviewController.h"

@implementation NavigationControllerDemoAppDelegate
@synthesize window;

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

    // Override point for customization after application launch
firstviewController *firstviewObject = [[firstviewController alloc]initWithStyle:UITableViewStyleGrouped];
UINavigationController *nav = [[UINavigationController alloc]initWithRootViewController:firstviewObject];
[window addSubview:nav.view];
 [window makeKeyAndVisible];

Code Explanation: In the above code I have created the object of the firstviewController and also I have created the object of UINavigationController, initwithRootViewController method of the navigationController will display the first view that you want to be visible to the user. 
And ultimately its the navigation view that you will be adding into the window because this is a navigation project.

Step 4: Hold on a second we are not done yet into the firstviewController.m you earlier created the object of secondviewController right, so now its time to tell the navigationController that on the hit of  any row of the tableview of the firstviewcontroller 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 {

secondviewController *secondviewObject = [[secondviewController alloc]initWithStyle:UITableViewStyleGrouped];
[self.navigationController pushViewController:secondviewObject animated:YES];

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

Phase 2: User selects a row from the table view and gets traversed into the next view displaying appropriate data as per the users selection.

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 secondviewController.h file write your own init method which should look like this

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

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

- (id)initWithStyle:(UITableViewStyle)style getIndexNumber:(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 firstviewController 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 firstviewController.m file and go to the selected index method and create the object of the class secondviewController, and use your init method which would look like this

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

secondviewController *secondviewObject = [[secondviewController alloc]initWithStyle:UITableViewStyleGrouped getIndexNumber:indexPath.row];
[self.navigationController pushViewController:secondviewObject animated:YES];

Code Explanation: The indexPath.row will  supply that integer data about which row was selected by the user.

Step 3: Almost done with the second phase as well just hit build and go and your all done.

Step 4: The final output would be like the images given below.

Intel row selected

                                    Apple row selected

I hope that the above post was useful to you, feel free to comment and post in your request if you would like to see some post of your choice at iPhone by radix

No comments:

Post a Comment