Tuesday, September 25, 2012

Tabbed Application FROM Another ViewController

WHAT IF… you wanted the very first View to be an ordinary ViewController, then when you tap a button from the first View, the secondView uses a TabBarController, how do we do it? 

This is somehow related to the things we did from our previous tutorials:
http://iosmadesimple.blogspot.com/2012/09/tabbed-application-doing-it.html OR

//I'm using the latest Xcode as of this date, Xcode 4.5, you might find the views in my xib file a bit bigger in size than the usual ones.

1. I created a New Project, having "ViewController" class as my First View. Add a label and a button for this view. And it currently looks like this:

2. Create New Files, name it FirstTabViewController and SecondTabViewController, subclass of UIViewController. Add labels so as to indicate which tabVC is which.
First Tab ViewController UI

Second Tab ViewController UI

Doing it Programmatically

3. In ViewController Class, #import FirstTabVC and SecondTabVC, create a TabBarController property, synthesize it and make an IBAction method for our button.

4. Under viewDidLoad function of ViewController Class, allocate and initialize FirstTabVC and SecondTabVC and the tabBarController;

- (void)viewDidLoad {
    [super viewDidLoad];

    FirstTabViewController *firstTab = [[FirstTabViewController alloc] init];
    SecondTabViewController *secondTab = [[SecondTabViewController allocinit];
    firstTab.title = @"First Tab VC"; //TabTitle
    secondTab.title = @"Second Tab VC"; //TabTitle
    tabController = [[UITabBarController  allocinit];
    tabController.viewControllers = [[NSArray  alloc] initWithObjects:firstTab, secondTab, nil];

5. Add a code in IBAction that tells it that we should show the tabbed Controller. And remember to connect this IBAction to your button in your xib file.
-(IBAction)goToTabbedView:(id)sender {
    [tabController setSelectedIndex:0];
    //[self presentModalViewController:tabController animated:YES]; //deprecated in iOS 6.0; you may use this in older versions
    [self presentViewController: tabController animated:YES completion:NULL]; //you may put completion block here if there's anything you would like it to do after this task is successful

6. Hit Run! 

Doint it Using Interface Builder

1. Remove or comment out all your codes (the one we created above; step 4) in viewDidLoad in ViewController Class.

2. Drag a TabBarController from the Objects Library to the Placeholder/Objects Panel.
(Photo from previous posts.)

3. Add "IBOutlet" to your UITabBarController property and synthesize it; connect whatever outlets need to be connected.

4. Expand the Placeholder/Objects Panel, and the navigationController in ViewController.xib file.
(Photo from previous posts.)

5. Click the View Controllers under UITabBarController object, change their classes to FirstTabViewController and SecondTabViewController respectively.

How to go back from our very first View Controller?

1. Add a button to any of your Tab Controllers (FirstTabViewController or SecondTabViewController). Create an IBAction and connect it to the button you added.

-(IBAction)goToFirstView:(id)sender {
    [self.tabController dismissViewControllerAnimated:YES completion:NULL];

Hit Run!

Download Sample Project Here!


  1. Do you have something similar as of above, but having navigation controller as root one..and also having left and right bar buttons in tab view controllers..

    1. Maybe you can try this one: http://iosmadesimple.blogspot.com/2012/10/navigation-controller-and-tabbar.html