Tuesday, October 2, 2012

Navigation Controller and a Tabbar Controller in One View

If you 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 below 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.

No comments:

Post a Comment