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

Solution 1

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/

Solution 2

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.

Solution 3

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.

Solution 4

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.

View more solutions

Comments

[propstm]

where does Apple say this? I've heard this line of reasoning before, however I've never seen the explicit documentation from Apple on the topic.

[Dhaivat Vyas]

@propstm If any query please let me know.