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.

  

Navigation Controller FROM Another View Controller

Or you may say "Navigation Controller as the second View," or "Navigation Controller's previous view is a ViewController." The purpose of this post is that the NavController is shown after a normal VC or any other views.

Our previous posts about Navigation Controllers only tackle about making it as our very first view. Now, what if you don't want your Navigation Controller as your first view? What if you want your first view to be a View Controller?

1. Create a New Project.

• If you choose an Empty Application, create a New File, View Controller subclass, connect it to your AppDelegate using xib (MainWindow) or code it in application:didFinishLaunching method in AppDelegate.m

• Or, you may choose Single View Application, a View Controller class is provided for you, and the View Controller Class is already connected to your AppDelegate Class (this is hasle free).

2. Add a label to your first ViewController (VC), and a button.

When we click the button, it must show a new view with navigation bar.

3. Create another ViewController subclass, name it "SecondViewController," add a label to your second VC just to indicate that the view belongs to the secondVC.

4. Go back to your first VC interface file, import your SecondVC. Add a UINavigationController property and synthesize it in your implementation file.

//.h file
@property (nonatomic, retain) IBOutlet UINavigationController *navController;

//.m file

@synthesize navController;

5. Go to your firstVC's .xib file, drag a Navigation Controller object from the Object's Library to your Placeholder/Object's panel (or you may simply double-click the Navigation Controller object from the Object's Library).

6. Connect your outlet to your NavigationController object.

7. Expand the Placeholders/Objects Panel by clicking the button inside the orange circle, expand the ViewController inside the Navigation Controller object. Change the class of that ViewController with the name of the class we create a while ago. In our case, it was the SecondViewController.

8. After changing the class, you must see that the ViewController is changed to "Second View Controller." This tells us that the SecondVC is the rootViewController of our NavigationController. When the NavigationController is shown, the UI of the SecondVC must be the view inside the NavigationController.

9. Go to your first VC's implementation file. Add an IBAction method to your button and let's add a code that will show the NavigationController with the SecondVC's view in it.

- (IBAction)goToNavigationController:(id)sender {

    [self presentModalViewController:self.navController animated:YES];

}

//Remember to connect your IBAction to your button in your .xib file.

10. And you're done! Hit Run!

Navigation-Based Project, Using Interface Builder

If you have decided to make Navigation-Based Projects through coding, refer to this tutorial: http://iosmadesimple.blogspot.com/2012/08/navigation-based-project-doing-it.html

Create an Empty Application Project.

1. Make MainWindow.xib file, make all the necessary steps and connections --> you already know how to do that! 

If not, refer to this tutorial: http://iosmadesimple.blogspot.com/2012/08/creating-our-own-mainwindowxib-for.html

2. In our AppDelegate.h, add "IBOutlet" to our UIWindow property.

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

3. Comment out the codes in AppDelegate.m, application:didFinishLaunchingWithOptions: function

    //self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    // Override point for customization after application launch.

    //self.window.backgroundColor = [UIColor whiteColor];

4. Go to MainWindow.xib, check the connections between your File's Owner, Object and Window.

 

5. Drag Navigation Controller from Objects Library, put it in the Placeholder/Object Panel with the File's Owner, Object, and UIWindow. 

6. Add a UINavigationController object in AppDelegate.h and connect navController variable to our NavigationController object in .xib

7. Right-click Window object in .xib, you'll see a "rootViewController" outlet. Connect it to the navigationController object. //this action corresponds to this line of code self.window.rootViewController = navController_; 

8. Expand the "Placeholder/Objects Panel" in Interface Builder.

9. Click the Navigation Controller Button on the left side. You should see objects like Navigation Bar, UIViewController, and under UIViewController, Navigation Item.

Let's create our first view!

Make a new file, subclass of UIViewController, let's name it FirstViewController. Play around with its xib file, add some labels and buttons. I added a label and a button to FirstVC's xib file.

10. Select UIViewController, change its class to "FirstViewController." You know where the Identity Inspector is! //Don't forget to import FirstViewController Class!

11. Hit Run!

Let's create a new ViewController Class, name it SecondViewController. Put some labels and buttons for its UI.

1. In FirstViewController.m, let's add an IBAction function. We can show the SecondViewController by:

-(IBAction)goToSecondVC:(id)sender {

    SecondViewController *secondVC = [[SecondViewController alloc] init];

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

}

Make sure you imported the SecondViewController class in FirstViewController.

2. Connect the IBAction to your UIButton in InterfaceBuilder. TouchUpInside.

3. Done! Hit run!

When you click the button in the SampleViewController, you should be navigated to the SecondViewController.
/*Optional*/

If you want to add a Navigation Title to your SecondView, put this in SecondVC's viewDidLoad function. 

self.title = @"Second VC";

4. Without adding a code for a back button, UINavigationController automatically makes it for you. As you can see in your SecondViewController, there's a backbutton titled "Root View Controller"  <-- the Navigation Title of the previously showed ViewController.

UINavigationController keeps track of the ViewControllers opened by the user. It's a STACK of ViewControllers. The very firstVC or the rootVC is the first one in the stack, when you click the button to go to the next VC, it will push the second VC to the stack. And when you tap the "back button," it pops the second VC, thus, showing the previous VC.

Navigation-Based Project, Doing it Programmatically

The objective of this tutorial is to be able to make Navigation-Based Projects. But this time, when we create our project, I want you to select "Empty Application" instead of "Master-Detail Application." Master-Detail Application, if you still don't know yet, it creates classes and Xcode puts codes in it that when you run the program, you're done!
So, why not Master-Detail Application? Well, it's because we HAVE to understand how they do it. Coding it ourselves will not only let us understand, but we LEARN from it.

Let's start!

1. Create Project, Empty Application.

2. Create New File, ViewController. Add Labels and buttons.

3. Import The ViewController class to AppDelegate.h

#import "SampleViewController.h"

4. Create properties for Navigation Controller and SampleViewController in AppDelegate.h

@property (strong, nonatomic) UINavigationController *navController;

@property (strong, nonatomic) SampleViewController *firstVC;

5. Synthesize these properties in AppDelegate.m

@synthesize navController;

@synthesize firstVC;

6. Allocate and initialize the firstVC variable; 

7. Allocate and initialize with rootViewcontroller of navController. 

8. set rootViewcontroller of appDelegate window.

Your application:didFinishLaunchingWithOptions function in AppDelegate.m should look like this:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{

    firstVC = [[FirstViewController alloc] init]; //step6

    navController = [[UINavigationController alloc] initWithRootViewController:firstVC]; //step7

    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    self.window.backgroundColor = [UIColor whiteColor];

    self.window.rootViewController = navController; //step8

    [self.window makeKeyAndVisible];

    return YES;

}

You may set the Navigation Title of SampleViewController by:

9. Going to SampleViewController.m, under initWithNibName or viewDidLoad function

self.title = @"My First View";

You may set the Navigation bar style to black, opaque, etc by:

10. Going to SampleViewController.m, under viewDidLoad function

self.navigationController.navigationBar.barStyle = UIBarStyleBlack; //UIBarStyleBlackOpaque, UIBarStyleBlackTranslucent, UIBarStyleDefault

11. Hit Run! You should see the Navigation Title as "First View"

Let's now add another ViewController, so that we will see that it navigates from the firstViewController to the second.

12. Add another file, subclass of UIViewController, let's name it SecondViewController.

13. Go to SecondViewController.xib file, add some labels or buttons.

14. Let's add a Navigation Title to our SecondVC, add this code under initWithNibName or viewDidLoad,  self.title = @"My Second View";  [same with step  9]

15. Go to FirstViewController class, add an IBAction method, and connect that IBAction to your button in FirstViewController.xib file.

16. Inside your IBAction method, allocate and initialize SecondViewController, remember to import that class first.

SecondViewController *secVC = [[SecondViewController alloc] init];

[self.navigationController pushViewController:secVC animated:YES]; //secVC is the variable name of SecondViewController.

17. Hit Run! You should be able to navigate to the secondVC once you tap the button from the first VC.