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;
}
-(void)loadView{
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
