How To Create Navigation Base Application In iPhone?

Xcode offers a perfectly good template for creating navigation-based applications, and you will likely use it much of the time when you need to create hierarchical applications. We are going to construct our navigation-based application from the ground up so you get a feel for how everything fits together.

Step 1: In Xcode, create a new project, and select Window-Based Application from the iphone template list. And give your new project name of Nav. If you click the classes and Resources folder, this template gives you an application delegate, a MainWindow.xib. We need to add a navigation controller to MainWindow.xib,which will be our applications root controller. And, since all navigation controllers have to have their own root view controller, we’ll need to create that as well.

Step 2: We need to add four UIViewController class in the project. Select New File > Cocoa Touch Classes and UIViewController, give the name “SecondViewController”,”RootViewController”,”DisclosureButtonController”,”DisclosureDetailController” and create DisclosureDetail.xib file.

Step 3: In the SecondViewController.h file, we have added UIImage in the file, so make the following changes in the file:

 

 

 

Step 4: Open the SecondViewController.m and make the following changes in the file:

 

 

 

Step 5: First we declare an array in RootViewController.h, and change the parent class to the UITableViewController:

 

 

 

Step 6: Double click the MainWindow.xib file and open it to the Interface Builder. First drag NavigationController from the library and place it to the main window. Select ViewController from the NavigationController, and bring up Identity Inspector and change the class name into “RootViewController”. Connect Window icon to the NavAppDelegate icon. Select the NavAppDelegate icon from the mainwindow and bring up Connection Inspector and connect navController to NavigationController (See figure 1). We have done all the connection, now save the MainWindow.xib file, close it and go back to the Xcode.

Figure 1:

Step 7: Open the RootViewController.m file, in this file, We declared three methods, the tableView:numberOfRowsInSection: method simply returns the count fron our arry. The tableView:cellForRowAtIndexPath: methos it gets a reusable cell,or creates anew one if there aren’t any, and then grabs the controller object from the array corresponding to the row being asked about. Its set the cell text to the controller’s title and returns the cell. The last method we added is most important one here, tableView:didSelectRowAtIndexPath: method. Its the one that gets called after a user taps a row. if tapping a row needs to trigger a drill down.

 

 

 

Step 8: Now we are just going to show a number of rows from an array , so we will declare an NSArray named list. We need to declare an instance variable to hold one instance of our child controller, which will point to an instance of the DisclosureDetailController class. We could allocate a new instance of that controller class every time the user taps a detail disclosure button, but it’s more efficient to create one then keep reusing it. Make the following changes to DisclosureButtonController.h .

 

 

 

Step 9: By now, you should be fairly comfortable with every up to and including the three datasource methods in the DisclosureButtonController.m file. Lets look at our three new delegate methods. The first one is tableView:accessoryTypeForRowWithIndexPath:,since we want every row to show a disclosure button, this method returns UITableViewCellAccessoryDetailDisclosureButton, ignoring the passed in parameters. Since we know that all of our rows can be drilled into,we’re able to just return the same value foe every row. The second method, tableView:didSelectRowAtIndexPath:,which gets called when the row is selected, puts up a polite little alert telling the user to tap the disclosure button instead of selecting the row. And the last delegate methods is , tableView:accessoryButtonTappedForRowWithIndexPath: is called.

 

 

 

Step 10: In the DisclosureDetailController.h file we have added UILabel for display text. So make the following changes in the file:

 

 

 

Step 11:Double click the DisclosureDetail.xib in Xcode to the file in Interface Builder. Once’s it open, single click File’s Owner, bring up identity inspector. Change the underlying class to DisclosureDetailController. Now control-drag from tje File’s Owner icon to the View icon,and select the view outlet. Next drag a Label from the library, and place it on the View window. Control-drag from File’s Owner to the label, and select the label outlet. Save, close nib, and go back to Xcode.

Step 12: Open the DisclosureDetailController.m file, make the following changes in the file.

 

 

 

Step 13: Now your application should compile and then lunch in the similutor. When it comes up, there should be just a single row. see figure below:

Figure 1: Our application after adding the first of six second-level controllers.

Step 14: If you touch the one row, it will take you down to the table view we just implemented (See figure below). Notice that the title that we set for our controller is now displayed in the navigation bar, and the title of the view controller we were previously at (Root Level) is contained in the navigation button.

Figure 2: The Disclosure Button View.

Step 15: Now if you select any disclosure button in this table, then new view shows information that we passed into it . The basic technique is used anytime you show a detail view.

Figure 3: The View Detail.

You can downloaded SourceCode from here Nav 2

Leave a Comment:

6 comments
Jay says April 9, 2010

Hi,
Thanks for the tutorial. Would you consider providing the source code for this? I tried following the tutorial but at the end when I tried to compile it produced a very large number of errors. I suspect there are a few simple things that I’m missing that could be remedied with a look at the working project.

Reply
Jay says April 9, 2010

Hi,
Thanks for the tutorial. Would you consider providing the source code for this? I tried following the tutorial but at the end when I tried to compile it produced a very large number of errors. I suspect there are a few simple things that I’m missing that could be remedied with a look at the working project.

Reply
Sushant says April 9, 2010

If you want full source code for Navigation base application, then you should signing up for the iPhone Course. Also we are preparing for source code package for who do not want to sign up, but would like the code. We will let you know shortly.
For signing up iPhone course, visit: http://www.edumobile.org

Reply
phillip says August 12, 2010

Very nice tutorial, thank you.

Reply
Nandha says September 28, 2010

what is navController? we cannot find in under NavAppDelegate

Reply
Sushant says September 29, 2010

@Nandha: We are using here UINavigationController class, navController is an object of UINavigationController class. How to use navController, i have mention in the Step 6 and attached one screen shot. Please have a look.

Reply
Add Your Reply