Tab Bar Controller Tutorial For iPhone
In iOS, UITabBarController works as an access point for different view controllers and its views. The tab bar contains set of tabs corresponding to the view controllers that we need to populate. Each tab of a tab bar controller is associated with a custom view controller. When the user selects a specific tab, the tab bar controller displays the root view of the corresponding view controller, replacing any previous views. Using viewController property of tab bar, we can configure the tabs of a tab bar controller. The order in which you specify the view controllers determines the order in which they appear in the tab bar. Another property selectedViewController determines which controller is selected at a particular time. In this tutorial, I will explain UITabBarController with UINavigationControllers as its tabs.
Open Xcode, start a new project with TabBar application template as follows.
By default Xcode creates a tab bar with two tabs and corresponding viewControllers named FirstViewController and SecondViewController with .xib files. It also creates tab bar tabs background images named first and second with .png extension in retina and non retina mode. Delete second.png and rename first.png as tab_image.png. Because I am going to add one more custom tab such that all the three tabs will have the same background image. Now add a UIButton in first and second viewController .xib files. Build and run the code, you will get the following output.
 |
 |
Suppose you want to push some other view controller from First and SecondViewControllers then we need to add UINavigationController with FirstViewController, SecondViewController as their rootViewControllers. For that, open appDelegate.m file and add/modify the following lines of code.
UINavigationController *navController1 = [[UINavigationController alloc] initWithRootViewController: viewController1]; UINavigationController *navController2 = [[UINavigationController alloc] initWithRootViewController: viewController2]; self.tabBarController.viewControllers = @[navController1, navController2];
Now run the code. You will see the navigation bar on top of two viewControllers.
If you want to navigate from First and SecondViewController to other controllers then we need to add two new viewControllers. Add new viewControllers named ImageViewController and TableViewController. Add an imageView outlet to ImageViewController.xib file and connect it with the imageView outlet in corresponding .h file. Now open TableViewController.xib file, add a tableView outlet and its dataSource, delegate protocols, also connect it with associated outlet placed in .h file. Open viewDidLoad method of ImageViewController.m file and add the following code.
imgView.image = [UIImage imageNamed:@"123.jpg"];
[/code]
Now open TableViewController.m file and add the code as follows.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 5;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier: nil];
cell.textLabel.text = [NSString stringWithFormat:@"Row ---------- %d",indexPath.row];
return cell;
}
Build and run the code, you will see the tab bar with two navigation controllers. Now tap the buttons placed in respected viewControllers, we will navigate to the ImageViewController and TableViewController. Now I will add a third view controller called ThirdViewController without the navigation controller. Open the appDelegate.m file and modify didFinishLaunchingWithOptions method as follows.
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; UIViewController *viewController1 = [[FirstViewController alloc] initWithNibName:@"FirstViewController" bundle:nil]; UIViewController *viewController2 = [[SecondViewController alloc] initWithNibName: @"SecondViewController" bundle:nil]; ThirdViewController *viewController3 = [[ThirdViewController alloc]initWithNibName: @"ThirdViewController" bundle:nil]; UINavigationController *navController1 = [[UINavigationController alloc] initWithRootViewController: viewController1]; UINavigationController *navController2 = [[UINavigationController alloc] initWithRootViewController: viewController2]; self.tabBarController = [[UITabBarController alloc] init]; self.tabBarController.viewControllers = @[navController1, navController2, viewController3]; self.window.rootViewController = self.tabBarController; [self.window makeKeyAndVisible]; return YES;
Open ThirdViewController.xib file and change it according to the following figure.
Now open ThirdViewController.m file and in its initWithNibName method add the following line of code.
self.tabBarItem.image = [UIImage imageNamed:@"tab_image"];
Compile and run the code, you will see three tabs, first two with navigationControllers and last one without navigationController.
If you want more number of tabs you can add their associated controllers. According to the apple documentation, the tab bar has limited space for displaying tab items. If you add six or more custom view controllers to a tab bar controller, the tab bar controller displays only the first four items plus the standard More item on the tab bar. Tapping the More item brings up a standard interface for selecting the remaining items. The interface for the standard More item includes an Edit button that allows the user to reconfigure the tab bar. By default, the user is allowed to rearrange all items on the tab bar. If you do not want the user to modify some items, though, you can remove the appropriate view controllers from the array in the customizableViewControllers property.
Related Posts
Top 10 performance tuning tips for relational databases
Grand Central Dispatch for iPhone
Updating A Progress Bar (iPhone)
Tab Bar Controller in iPhone
Table Views in iOS 7 for iPhone
Segment Control in TabBar Application in iPhone
A Picker Lottery for iPhone
Address Book tutorial for iPhone – Part 2