Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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
like image 942
propstm Avatar asked Feb 20 '15 16:02

propstm


People also ask

How do I add a controller to my tab bar controller storyboard?

Open Main. storyboard and select the map view controller. From Xcode's Editor menu, choose Embed In → Tab Bar Controller. This will add the map view controller to the view controllers array of a new tab bar controller.

What is a tab bar controller?

A Tab Bar Controller is a container view controller that manages an array of view controllers in a radio-style selection interface so that the user can interact with the interface to determine the view controller to display. It is the instance of UITabBarController, which inherits UIViewController.

What is the use of tab bar controller in Xcode?

The tab bar interface displays tabs at the bottom of the window for selecting between the different modes and for displaying the views for that mode. This class is generally used as-is, but may also be subclassed. Each tab of a tab bar controller interface is associated with a custom view controller.


3 Answers

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.

enter image description here

  1. 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];
}
  1. In case the list size is dynamic, you can create tabbar items also programatically.

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

like image 170
bllakjakk Avatar answered Jan 27 '23 14:01

bllakjakk


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.

like image 33
gabriel_101 Avatar answered Jan 27 '23 14:01

gabriel_101


I've used a similar functionality for an app I'm currently working on. In my app, The screenshot of my view controllers

  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.

like image 41
Naveen George Thoppan Avatar answered Jan 27 '23 14:01

Naveen George Thoppan