TabBarExampleDemo In iPhone

In this example we will see how to work TabBarController in the Window base application.

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

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 in the class folder. Select classes -> Add -> New File -> Cocoa Touch Class -> select UIViewControllersubclass . Create the corresponding .xib file. Give the classes name “FirstTableViewController”,”SecondViewController” and “ThirdTableViewController”.

Step 4: We add pList in the Resource folder. Give the PropertyList name “ThirdpList.plist”.

Step 5: In the AppDelegate.h file, we have added UITabBarController, FirstTableViewController, ThirdTableViewController. So make the following changes in the file:

 

#import <uikit/UIKit.h>

@class FirstTableViewController;
@class ThirdTableViewController;

@interface TabBarController_WindowbaseAppDelegate : NSObject {
UIWindow *window;
UITabBarController *rootViewController;
FirstTableViewController *firstTableViewController;
ThirdTableViewController *thirdTableViewController;
}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UITabBarController *rootViewController;
@property (nonatomic, retain) IBOutlet FirstTableViewController *firstTableViewController;
@property (nonatomic, retain) IBOutlet ThirdTableViewController *thirdTableViewController;

 

 

Step 6: 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. Double click the TabBarController from the MainWindow and open it. Now drag the  TabBar Item from the library and place it to the TabBarController window. Select the ViewController from the TabBar Controller and bring up Identity Inspector and change the class name into FirstTableViewController, and bring up Attribute Inspector, load the FirstTableViewController NIB file. Select the Next ViewController from the TabBar Controller, and bring up Identity Inspector change the class name into SecondViewController, after doing that bring up Attributes Inspector and load the SecondViewController NIB file. Select another ViewController from the Tab Bar Controller and bring up Identity Inspector  and change the class name into ThirdTableViewController , after doing that bring up Attributes Inspector and load the ThirdTableViewController NIB file. Now drag Tab Bar Controller Windowbase App Delegate icon to the Tab Bar Controller icon and select rootViewController. Now save the MainWindow.xib file, close it and go back to the Xcode.

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

 

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

[window addSubview:rootViewController.view];

[window makeKeyAndVisible];

return YES;
}

 

 

Step 8: In the FirstTableViewController.h file, we have added  UITableView and NSMutableArray. So make the following changes in the file:

 

#import <uikit/UIKit.h>
#import "FirstTableViewController.h"
#import "ThirdTableViewController.h"

@interface FirstTableViewController : UITableViewController <uitableViewDelegate, UITableViewDataSource>
{

IBOutlet UITableView *firstTableView;
NSMutableArray *firstScreen;
}
@property (nonatomic, retain) NSMutableArray *firstScreen;

 

 

Step 9: Double click the FirstTableViewController.xib file and open it to the Interface Builder.First drag the TableView from the library and place it to the view window. Select the TableView from the view window and bring up Connection Inspector, connect dataSource to the File Owner icon and delegate to the File Owner icon. Connect File’s Owner icon to the Table view and select firstTableView. Select the File’s Owner icon from the mainwindow and bring up Connection Inspector and connect view to the Table View. You have done all the connection, now save the FirstTableViewController.xib file,close it and go back to the Xcode.

Step 10: Open the FirstTableViewController.m file and make the following changes in the file:

 

- (void)viewDidLoad {
[super viewDidLoad];

NSMutableArray *array = [[NSArray alloc] initWithObjects:@"Select Item2", @"Select Item3", nil];
self.firstScreen = array;
[array release];

}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 1;
}

// Customize the number of rows in the table view.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return [self.firstScreen count];
}

// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *CellIdentifier = @"Cell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
}

// Set up the cell...
NSUInteger row = [indexPath row];
cell.textLabel.text = [firstScreen objectAtIndex:row];

return cell;
}

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

if ([[firstScreen objectAtIndex:indexPath.row] isEqual:@"Select Item2"])
{
self.tabBarController.selectedIndex = 1;
}

if ([[firstScreen objectAtIndex:indexPath.row] isEqual:@"Select Item3"])
{
self.tabBarController.selectedIndex = 2;
}

}

 

 

Step 11:Double click the SecondViewController.xib file  and open it to the Interface Builder. Select the view window and bring up Attribute Inspector,and change the background color. Connect File’s Owner icon to the View icon and select view.

Step 12: In the ThirdTableViewController.h file, we have added UITableView, and NSMutableArray. So make the following changes in the file:

 

#import <uikit/UIKit.h>
@interface ThirdTableViewController : UIViewController {

IBOutlet UITableView *thirdTableView;
NSMutableArray *thirdScreenList;
}
@property (nonatomic, retain) NSMutableArray *thirdScreenList;

 

 

Step 13: Double click the ThirdTableViewController.xib file and open it to the Interface Builder. First drag the TableView from the library and place it to the view window. Select the TableView from the view window and bring up Connection Inspector, connect dataSource to the File Owner icon and delegate to the File Owner icon. Connect File’s Owner icon to the Table view and select thirdTableView. Select the File’s Owner icon from the mainwindow and bring up Connection Inspector and connect view to the Table View. You have done all the connection, now save the ThirdTableViewController.xib file,close it and go back to the Xcode.

Step 14: Open the ThirdTableViewController.m file and make the following changes in the file:

 

- (void)viewDidLoad {
[super viewDidLoad];
NSString *myfile = [[NSBundle mainBundle]
pathForResource:@"ThirdpList"ofType:@"plist"];

NSMutableArray *array = [[NSArray alloc] initWithContentsOfFile:myfile];
self.thirdScreenList = array;
[array release];
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 1;
}

// Customize the number of rows in the table view.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return [self.thirdScreenList count];
}

// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *CellIdentifier = @"Cell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
}

// Set up the cell...
NSUInteger row = [indexPath row];
cell.textLabel.text = [thirdScreenList objectAtIndex:row];

return cell;
}

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

 

 

Step 15: Double click the MainWindow.xib file and open it to the Interface Builder. Connect the Tab bar Controller Windowbase App Delegate to the FirstTableViewController and select firstTableView. Do the same thing for the ThirdTableViewController and select secondTableView. Now save the MainWindow.xib file, close it and go back to the Xcode.

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

You can Download SourceCode from here TabBarController_Windowbase

Leave a Comment:

3 comments
John Kofod says September 8, 2010

Great site you have!

I’m at the beginner-state. My biggest issue is mixing the different tutorials to a useful app. At the moment I’m trying to get a scrollbar (from the scrollbar walkthrough) in one of the views from this tab bar walkthrough to work. But where to implement the code you added to the App.h / App.m ?

Reply
Sushant says September 8, 2010

In our blog you can see so many TabBar application is there go though the tutorials and if you want to add scrollbar then create another tab from the tab bar application and implement it. You can get the scrollbar application also.

See the below link for scrollbar.

Link: https://www.edumobile.org/iphone/iphone-programming-tutorials/impliment-scrolling-in-iphone/

Hope this link will help you.

Reply
moulali says September 24, 2010

very helpful for beginners

Reply
Add Your Reply