Navigation Controller and a Tabbar Controller in One View

If wanted to show a Navigation Controller and a Tabbar Controller in one view, should the navigation controller be inside the tabbar controller or is it the other way around? 

Most beginners happen to do this in an INappropriate manner. The answer to my first question is that the Navigation Controller should be put inside the Tabbar Controller. And the worst part for those who do not know how to do that is that they will just put a Navigation bar at the top part of the view. Don't do this, let me help you how to do it properly.

If you could still remember how we created a Tabbed Application, do it first before following the next steps. Follow this tutorial up until Step 10. (http://iosmadesimple.blogspot.com/2012/09/tabbed-application-using-interface.html)

Let's Begin!

1. Expand the Placeholders/Objects Panel, and the Tab Bar Controller. Drag a Navigation Controller Object under the TabBar Controller.

2. Since I only want two tabs for my TabBar Controller, I will make my first tab a Navigation-Based view, so I will delete one View Controller bellow the Navigation Controller object.

For Step 1 and 2.

I edited the tint of the Navigation Bar and its Navigation Title.

Hit run and it should look like this.

3. Did you follow the tutorial above and reached step 10? If so, I'll assume that you created two view controllers already (the FirstViewController and the SecondViewController). In my FirstViewController, I added a button which will be used later on in this tutorial.

4. Import the two ViewControllers, then, go back to our MainWindow.xib, change the class of the ViewController inside the Navigation Controller. So as the ViewController inside the Tabbar Controller.

5. Create another ViewController, let's name it "ThirdViewController," put a label to indicate that it's the ThirdVC.

6. Import ThirdViewController in FirstViewController Class. Create an IBAction method that will push the ThirdVC and show it.

- (IBAction)goToThirdView:(id)sender {

    ThirdViewController *thirdVC = [[ThirdViewController alloc] init];

    [self.navigationController pushViewController:thirdVC animated:YES];

}

7. Connect the IBAction to our Button in FirstViewController.xib.

8. Hit Run, and you should be able to navigate from FirstVC to the ThirdVC and still have the TabbarController.

  

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

http://iosmadesimple.blogspot.com/2012/09/tabbed-application-using-interface.html

//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 alloc] init];

    

    firstTab.title = @"First Tab VC"; //TabTitle

    secondTab.title = @"Second Tab VC"; //TabTitle

    

    tabController = [[UITabBarController  alloc] init];

    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!

Tabbed Application, Using Interface Builder

If you want to create a Tabbed Application programmatically, refer to this tutorial:

http://iosmadesimple.blogspot.com/2012/09/tabbed-application-doing-it.html

Let's create a Tabbed application using Interface Builder! :D

1. Create a new empty application. Make your own MainWindow.xib file, you already know how to do this. (If not, refer to this tutorial: http://iosmadesimple.blogspot.com/2012/08/creating-our-own-mainwindowxib-for.html)

2. Go to AppDelegate.h, add a UITabBarControllerDelegate

@interface AppDelegate : UIResponder <UIApplicationDelegate, UITabBarControllerDelegate>

3. add a UITabBarController property.

@property (strong, nonatomic) UITabBarController *tabBarController;

4. Synthesize your tabBarController variable in AppDelegate.m.

5. Create at least 2 View Controllers, name it First and Second ViewController. Add UILabels and other stuff, to indicate that such UI belongs to either of the two ViewControllers.

6. Add "IBOutlet" to UIWindow and UITabBarController properties in AppDelegate.h

@property (strong, nonatomic) IBOutlet UIWindow *window;

@property (strong, nonatomic)  IBOutlet UITabBarController *tabController;

7. Go to your MainWindow.xib, Search for Tab Bar Controller from Objects Library and drag it to Placeholder/Objects Panel. Make the necessary connections from your AppDelegate Object outlets to your objects UIWindow and UITabBarController.

8. Right-click Window object in your Interface Builder, connect the "rootViewController" outlet to UITabBarController object.

9. Go to AppDelegate.m, under application:didFinishLaunchingWithOptions function, comment out all the codes inside that function, but leave these codes behind:

[self.window makeKeyAndVisible];

return YES;

10. Hit Run!

Let's set our two view controllers that we created a while a go, the First and Second View Controller.

11. Import the First and Second VC to your AppDelegate class.

12. Expand the Placeholders/Objects Panel, and the  TabController.

13. Select one of the two view controllers inside the Tab Controller, and change its class to "FirstViewController."

Do the same thing with the other view controller, set its class to "SecondViewController."

Hit Run and you're done! 

Note

You may add an image or a tabTitle for every ViewController by following these steps:

Expand the Placeholder/Objects Panel, the TabBarController object, and the ViewControllers under it. Click the "Tab Bar Item." Go to Attributes Inspector, the fourth button, next to "Identity Inspector." Change the Title or the Image under the "Bar Item" Category.

For the images, you have to import those images to your project first. Right-click the folders on the Project Navigator, choose "Add Files to project_name," choose the images you want to import.