UINavigationController Inside UITabBarController With Storyboard

A very common user interface pattern is to use a UITabBarController as the root view controller for an app, and then embed UINavigationControllers in tabs that require navigation. In iOS apps, this is one way to avoid the controversial “hamburger menu”. You can read more about that here from Luis A, and in this article about Spotify removing it from their app. Let’s build a demo app to illustrate how to have navigation within tabs.

This particular pattern is probably best explained if you can watch me building it, so for this post I have created a video tutorial that walks through building this app from start to finish. I will also explain it with screenshots and text as I normally would. If you rather sit back and watch the app as it is built, you can click the video below. Note that full screen will look best if you choose 1080p60 under Settings > Quality.

 

If screen captures and videos are something that you are interested in making, the tools I use are ScreenFlow, a Samson Meteor Mic, and a Nady MPF-6 Microphone Pop Filter. ScreenFlow’s reputation speaks for itself (I love it), and the Samson/Nady combo is a nice video tutorial setup on a budget.

I’ll leverage the template for a tabbed application to get started with the demo app.

Select File > New > Project …, then Tabbed Application, and Next. I’ll name the project NavigationInsideUITabBarController, and click Create.

This gives you an app with two UIViewControllers, each in a tab.

In this tutorial, I’ll add a UINavigationController for the Second View, and then add another UIViewController so that we can navigate between the two controllers on that tab. Just so it is very clear, I’ll also be adding a third tab, with it’s own UINavigationController, and two UIViewControllers. I’m doing this last part to illustrate starting a tab from scratch, since the first two are present from using the Tabbed Application template.

For the Second View, here are the steps I’ve taken to implement navigation within the controllers of the tab:

  1. Drag over a new UIViewController into the Storyboard.
  2. Add a UILabel to the View. Center it vertically and horizontally, and set the Text to I am Scene 2B.
  3. Set the Title of the controller to Scene 2B.
  4. For the original controller in the Second View, embed it in a UINavigationController using Editor > Embed In > Navigation Controller.
  5. For triggering the navigation to our new Scene 2B controller, add a button to the original controller in the Second View. I put Take me to 2B please … for the button text.
  6. Create a Segue from the original Second View Controller to the Scene 2B controller, specifying the Show action.
  7. Set the title of the Navigation Item on the Second View Controller to be Scene 2. You’ll see this as the back button text when on the Scene 2B controller.

The screenshot below shows step 6 where the segue is created.

Running the app now will illustrate the navigation for the second view, between Scene 2 and Scene 2B.

Since the second tab existed based on using the Tabbed Application template, I’ll create a third UIViewController on its own tab from scratch, to illustrate making a tab and corresponding controllers with navigation.

Here are the steps to do that.

  1. Drag over a new UIViewController into the Storyboard. This will be the first controller for Scene 3.
  2. To make it the controller for a new tab, Ctrl-Drag from the Tab Bar Controller to the new View Controller, as you can see in the screenshot below.
  3. Change the Tab Bar Item to be a System Item, and select the Favorites item.
  4. Set the Title of the navigation controller to be Second Nav, just so it is clear which one is the navigation scene as we add more controllers.
  5. Set the Title of the new controller to be Scene 3.
  6. For triggering the navigation to the soon to be defined Scene 3B controller, add a button to the Scene 3 controller. I put Take me to 3B please … for the button text.
  7. Embed Scene 3 in a UINavigationController using Editor > Embed In > Navigation Controller. Set the Title of the new navigation controller to be Scene 3 Nav.
  8. Drag over another new UIViewController into the Storyboard, which will be the second controller in Scene 3.
  9. Add a UILabel to the View. Center it vertically and horizontally, and set the Text to I am Scene 3B.
  10. Set the Title of the controller to Scene 3B.
  11. Create a Segue from the Scene 3 button, to the Scene 3B controller, specifying the Show action.
  12. Set the Title of the Navigation Item for the Scene 3 controller, to be Scene 3.

Everything is now setup, so we can go ahead and run the app, observing that we’ve got a new third tab with the same navigation functionality that we defined for the second tab.

The Tab Bar Item is Favorites, as we defined earlier in Step 3 during setup of the third tab.

That concludes this demo app. You can download the completed app from GitHub and see the final result, or watch the video and try it in your own app.

 

Disclosure: I’m happy with the products I’ve mentioned above for creating video tutorials. If you are thinking of purchasing equipment and software for the same purpose, please do your own research to confirm that the products you choose will meet your individual requirements. If you choose to purchase a product through the links in this post, I would receive a small affiliate commission at no additional cost to you. If you do elect to purchase a product through one of my links, I thank you in advance. This helps me cover hosting and other costs associated with running this blog, and therefore is much appreciated.

Leave a Comment: