TabBarController With NavigationController And TableView In iPhone

This is the TabBarController Application. In this application we will see how to implement NavigationController and TableView together in the TabBarController application. Let see will it will be worked.

Step 1: Create a new application using Window base template. Give the application name  “WindowTabBar”.

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 three UIViewController class to the project. Choose New file -> Select cocoa touch classes group and then select UIViewController and corresponding .xib file . Give the project names “FirstView”, “SecondView”, and ”TableViewDetailViewController”.

Step 4: In the AppDelegate.h file we have added UITabBarController for the displaying tabbar in the application . So make the following changes in the file:


#import <uikit/UIKit.h>

@interface WindowTabBarAppDelegate : NSObject {
UIWindow *window;
UITabBarController *tabbarController;

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic,retain) IBOutlet UITabBarController *tabbarController;



Step 5: Double click the MainWindow.xib file and open it to the Interface Builder. First drag the TabBarController from the library and place it to the MainWindow. Select the UIViewController from the TabBarController and bring up Connection Inspector change UIViewController to the NavigationController. You can see into the Selected Navigation Controller there is one UIViewController, select the UIViewController and bring up Identity Inspector change the class name into the FirstView and bring up Attribute Inspector and load the FirstView NIB file(See figure 1). Select the Second tab from the TabBar Controller and bring up Identity Inspector and change the class name into SecondView and bring up Attribute Inspector, load the SecondView NIB file. Now save the MainWindow.xib file, close it and go back to the Xcode.

Step 6: Open the AppDelegate.m file and make the following changes:


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

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

return YES;



Step 7: In the FirstView.h, we are doing here is conforming our class to the two protocols that are needed for it to act as the delegate and datasource for the tableview and declare the array. Make the following changes in the file:


#import <uikit/UIKit.h>

@interface FirstView : UIViewController<uitableViewDelegate,UITableViewDataSource>
NSMutableArray *itemsList;
UITableView *myTableView;


@property(nonatomic,retain)NSMutableArray *itemsList;
@property(nonatomic,retain)UITableView *myTableView;



Step 8: Now open the FirstView.m file and include the TableViewDetailViewController.h file  and make the following changes:


- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return [itemsList count];

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

static NSString *CellIdentifier = @"Cell";

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

// Set up the cell...
NSString *cellValue = [itemsList objectAtIndex:indexPath.row];
cell.textLabel.text = cellValue;

return cell;

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

NSString *selectDay = [NSString stringWithFormat:@"%d", indexPath.row];

TableViewDetailViewController *fvController = [[TableViewDetailViewController alloc] initWithNibName:@"TableViewDetailViewController" bundle:[NSBundle mainBundle]];
fvController.selectDay = selectDay;
[self.navigationController pushViewController:fvController animated:YES];
[fvController release];
fvController = nil;



myTableView = [[UITableView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame] style:UITableViewStylePlain];
myTableView.delegate = self;
myTableView.dataSource = self;

myTableView.autoresizesSubviews = YES;

itemsList = [[NSMutableArray alloc] init];

[itemsList addObject:@"Sunday"];
[itemsList addObject:@"MonDay"];
[itemsList addObject:@"TuesDay"];
[itemsList addObject:@"WednesDay"];
[itemsList addObject:@"ThusDay"];
[itemsList addObject:@"FriDay"];
[itemsList addObject:@"SaturDay"];

self.navigationItem.title = @"Day List";

self.view = myTableView;




Step 9: Double click the SeconView.xib file and open it to the Interface Builder. Open the View window and select the view window and bring up Attribute Inspector and change the background color (See the figure 2). Save the SeconView.xib file, close it and go back to Xcode.

Step 10: Now open the TableViewDetailViewController.h file,added UILabel for display message and NSString and make the following changes:


#import <uikit/UIKit.h>

@interface TableViewDetailViewController : UIViewController {
IBOutlet UILabel *displayText;
NSString *selectDay;

@property (nonatomic, retain) NSString *selectDay;



Step 11: Double click TableViewdetailViewController.xib file and open it to the Interface Builder. Drag label from the library and place it to the view window, select the label and change the name into “Selected Row:”. Once again drag label from the library and place it to the view window and connect File’s Owner icon to the label and select the displayText. Now save the .xib file , close it and go back to the Xcode.

Step 12: Open the TableViewDetailViewController.m file and make the following changes:


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



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

You can Download SourceCode from here WindowTabBar 2

Leave a Comment:

chris says February 14, 2011

How can you show the name of the day selected from your list?


pbunny says April 13, 2011

MANY THANKS for this tutorial. I have been trying to accomplish this for sometime now but without success. You’ve made it so easy to follow!

Two questions, if I may?

I see you create the uitableview programmatically. How would I restrict the size of this uitableview? How can I set the height and width of the uitableview?

Finally, it this tutorial an example of the content of Edumobile’s training courses?

ghouse says June 22, 2011

how to implement searchbar to this program and in first view u specifed a label but the firstview is not loading but table is displayed i don’t know how plz help me

rick says March 11, 2012

How to show webview on each itemlist?

Paul Mulroney says July 24, 2012

I tried this using XCode 4.3.2 and iOS 5.x and it doesn’t work. Could you produce an updated example of this using iOS 5.x?

Dalia says April 6, 2013

Thanks for this tutorial! Couldn’t find on the internet some example on how to use tab bar with table view. Very helpful!!

Add Your Reply