How should a tab bar controller be integrated into a navigation controller workflow?

Question

I've been given a design with the following workflow:

• User logs into an app
• Upon successful login the user sees a tableview with data rows
• Upon clicking a data row the user is taken to a view controller with a tabbed inteface. Each view controller in the tabbed interface provides a deep dive of an aspect of the data shown in the tableview.
• From any tab the user can push the back button and be taken back to the tableview.

Based on this description it seems to me that the app needs a navigation controller root view controller for login and the tableview, then upon clicking on the table row the app needs to utilize a tabbar controller for the deep dive of the data.

I cannot seem to add a UITabBarController to a Navigation Controller using a storyboard. Additionally I've found other SO posts that ask a similar question, but none of the answers provided seem current, or address this workflow using current (iOS7/8) best practices. Is there a way to accomplish this workflow? If there is not, is there a concise explanation I could use to inform the designer and stakeholders?

• How do I add a tab bar controller to a navigation-controller-based application?
• Tab bar controller inside a navigation controller, or sharing a navigation root view

Answer 1

Apple recommends that the UITabBarController is used mainly as root view controller.

In your case I suggest using a UISegmentedControl on the view of a normal UIViewController in stead of the UITabBarController. With some logic you can display different views in the suggested UIViewController corresponding to the segment of the UISegmentedControl which is pressed.

Further more, if you are using a navigation controller you could embed the UISegmentedControl in the navigation bar as title. (See the "Recents" tab in the Phone app.

Answer 2

Here is what you need to do.

Here I’ve used button to navigate as i’ve not created view with full description but don’t need to bind button with Table View Controller or tabbar.

1.) Select View Controller and then go to Editor>Embed In>Navigation Controller

2.) Bind View Controller with Table View Controller.

3.) Give identifire to segue so that you can call perform segue based on success of login.

4.) For correct flow of navigation using tabbar you need to bind tabbar controller with View Controller first and then embed navigation controller to tabbar. Similar way you can also embed navigation controller to tabbar controller, but its not the correct flow.

5.) Finally hoy your story board will look like.

6.) Result

Hope it helps in solving you problem.

Answer 3

You can make use of MHCustomTabBarController It's built with Apples Custom Container ViewController API and can be nested within your navigation controller

Answer 4

I've used a similar functionality for an app I'm currently working on. In my app,

1. I've a login and sign up in a navigation controller and once the login/sign up is successful, it goes to another navigation controller which has a table view.

2. On clicking the 'Tourism' cell in the table, I'll be taken to a tab bar controller with tabs having different details about the 4 different places. From any tab, you can go back to the main table view which appears after your successful login by clicking the back button in the navigation bar.

   If this is what you need, I've followed an 'embed in' tab bar controller as shown in the above answers. It worked perfectly for me. My app is in portrait mode. I've heard that this creates a problem in landscape mode. I'm a beginner and I've not tried the same in landscape mode.

   Embed in a new navigation controller for the table view after login view controller. I'm using the same in my app.

Answer 5

You can not push the TabBarController from the table view cell as "Push is depricated now". You can follow the below steps in storyboard:

1. Take navigation controller initial view controller.
2. Add tableview as its root view controller.
3. Then add TabBarController to the storyboard.
4. Then right click on the tableView Cell and link the tableview cell selection to the TabBarController with the "Show".

Answer 6

I checked your requirements.

Although not recommended by Apple Inc. for regular use cases,

https://developer.apple.com/library/ios/documentation/WindowsViews/Conceptual/ViewControllerCatalog/Chapters/TabBarControllers.html#//apple_ref/doc/uid/TP40011313-CH3-SW2

But it can be easily achieved by some work around to achieve the suggested design principle through following steps.

1. Create similar design in story board, do notice that Navigation Controller is before the Login screen.

2. Implement following list methods to invoke specific tab through List View programatically.

 (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"test" forIndexPath:indexPath];
    cell.textLabel.text = [NSString stringWithFormat:@"%ld", (long)[indexPath row]];
    return cell;
}

(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    UITabBarController *tbc = [self.storyboard instantiateViewControllerWithIdentifier:@"MainTabbedViewController"];
    tbc.selectedIndex= (long)[indexPath row];
    [self showViewController:tbc sender:self];
}

3. In case the list size is dynamic, you can create tabbar items also programatically.

https://24hrstech.wordpress.com/2012/08/19/create-tabbarcontroller-programmatically/

Answer 7

While doable it is not recommended to embed a tab bar inside a navigation bar. I goes against Apple guidelines and users are used to have the tab bar as the root controller.

I you only want to show a tab bar under some situations I recommend presenting it modally on top of your navigation controller.

---

From Apple:

Before creating a tab bar interface, you need to decide how you intend to use a tab bar interface. Because it imposes an overarching organization on your data,you should use one only in these specific ways:

• Install it directly as a window’s root view controller.
• Install it as one of the two view controllers in a split view interface. (iPad only)
• Present it modally from another view controller.
• Display it from a popover. (iPad only)

Installing a tab bar interface in your app’s main window is by far the most common way to use it. In such a scenario, the tab bar interface provides the fundamental organizing principle for your app’s data, with each tab leading the user to a distinct part of the app. You can use tab bar controllers by themselves or in conjunction with other view controllers to create even more sophisticated interfaces. For more information, see Combined View Controller Interfaces.

It is also possible to present a tab bar controller modally if a very specific need makes doing so worthwhile. For example, you could present a tab bar controller modally in order to edit some complex data set that had several distinct sets of options. Because a modal view fills all or most of the screen (depending on the device), the presence of the tab bar would simply reflect the choices available for viewing or editing the modally presented data. Avoid using a tab bar in this way if a simpler design approach is available.

Answer 8

you can design your UI like this

• make the navigation controller as initial view controller
• second view is for your login screen
• third view is table view to show your data
• and finally a tabbar controller with its item view controllers

Hope this helps....

Answer 9

It is not very difficult to embed a tab controller in a navigation controller, you can do it by setting a navigation controller as rootViewController, then make a segue that starts from your tableview cell to a tabBarController, here is an example of your workflow.