How To Implement TableView With NavigationController In iPhone

In this application we will see how to implement TableView with NavigationController.We will be creating here simple tableview which display the DayList and when user pressed any day from the DayList then the new view gets displayed. So just have a look .

Step 1: Create a Window base application using template. Give the application “TableViewNav” .

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 here UITableViewController class to the project.Choose New file -> Select cocoa touch classes group and then select UITableViewController subclass and corresponding .xib file. Give the name “RootViewViewController”. Now add UIViewController class to the project.Choose New file -> Select cocoa touch classes group and then select UIViewController subclass and corresponding .xib file.Give the name “TableViewDetailViewController”.

Step 4: Open the AppDelegate.h file, we are declare here UINavigationController. We have added a UINavigationController object as a property to thisAppDelegate.h file. Make the following changes:


@interface TableViewNavAppDelegate : NSObject {
UIWindow *window;
UINavigationController *navigationController;

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



Step 5: Double click your MainWindow.xib file and open it to the Interface Builder. First drag NavigationController from the library and place it to  the main window . Connect TableViewNavAppDelegate icon to the NavigationController icon and select navigationController. Select the ViewController from the NavigationController, and bring up Identity Inspector, change the class name into the RootViewController after changing the class name  select once again RootViewController and bring up Attribute Inspector load the nib file RootViewController. Now save the nib file, close it and go back to the Xcode.

Step 6: Make the following changes in the AppDelegate.m file :


- (void)applicationDidFinishLaunching:(UIApplication *)application {
[window addSubview:[navigationController view]];
[window makeKeyAndVisible];



Step 7: Open the RootViewController.h file and add NSMutableArray which hold the list of day. So make the following changes:


@interface RootViewController : UITableViewController {
NSMutableArray *listDay;



Step 8: In the RootViewController.m file, make the following changes in the file :


- (void)viewDidLoad {
[super viewDidLoad];

listDay = [[NSMutableArray alloc] init];
NSArray *listofday = [NSArray arrayWithObjects:@"Sunday", @"MonDay", @"TuesDay", @"WednesDay", @"ThusDay", @"FriDay", @"SaturDay", nil];
NSDictionary *listofdayDict = [NSDictionary dictionaryWithObject:listofday forKey:@"Days"];

[listDay addObject:listofdayDict];

self.navigationItem.title = @"Days";

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

NSDictionary *dictionary = [listDay objectAtIndex:indexPath.section];
NSArray *array = [dictionary objectForKey:@"Days"];
NSString *selectDay = [array objectAtIndex:indexPath.row];
TableViewDetailViewController *tableViewDetailViewController = [[TableViewDetailViewController alloc] initWithNibName:@"TableViewDetailViewController" bundle:nil];
tableViewDetailViewController.selectDay = selectDay;
[self.navigationController pushViewController: tableViewDetailViewController animated:YES];
[tableViewDetailViewController release];
tableViewDetailViewController = nil;

- (UITableViewCellAccessoryType)tableView:(UITableView *)tableView accessoryTypeForRowWithIndexPath:(NSIndexPath *)indexPath {

return UITableViewCellAccessoryDisclosureIndicator;

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

[self tableView:tableView didSelectRowAtIndexPath:indexPath];



Step 9 : Now open the TableViewDetailViewController.h file , add UILabel which display the text and add NSString,used NSString object as a property to the file. So make the following changes in the file :


@interface TableViewDetailViewController : UIViewController {

IBOutlet UILabel *displayText;
NSString *selectDay;

@property (nonatomic, retain) NSString *selectedCountry;



Step 10: Double click your TableViewDetailViewController.xib file and open it to the Interface Builder. First drag two label from the library and place it to the view window. Select the first label and bring up Attribute Inspector, change the text into “Selected Day:” and  keep the second label as it is. Connect File’s Owner icon to the label and select displayText for display the text. Now save the nib file, close it , go back to the Xcode.

Step 11: In the TableViewDetailViewController.m file make the following changes :


- (void)viewDidLoad {
[super viewDidLoad];
displayText.text = selectDay;
self.navigationItem.title = @"Selected Day";



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

You can downloaded SourceCode from here TableViewNav 2

Leave a Comment: