Search code examples
iosxcodestoryboarduitabbarcontrollermaster-detail

Using Xcode Storyboard to create Master-Detail views where the Detail view is Tab Bar to three different views


I'm trying to implementing master-detail scenes where the detail scene can be tabbed to show three different scenes. The example is a list of stories and for each story, I am interested to present an introduction, author info and reviews. So the scenes are as the following:

  1. Master scene: a list of stories

When a story is selected:

  1. Detail - Introduction scene (about the selected story)
  2. Detail - Author scene (about the author)
  3. Detail - Reviews scene (a list of reviews)

I attached the storyboard that I used to kind of achieve this: https://docs.google.com/file/d/0B6I7Mlt7gqCBVTFZR2lsX0Q4MUk/edit?usp=sharing

I also attached the resultant scene on the iPhone simulator that showed the Detail - Author scene: https://docs.google.com/file/d/0B6I7Mlt7gqCBQWhLTlNwWjZ2TG8/edit?pli=1

My problem is with there are 2 navigation bars presented in the detail - author scene: The top one with Stories back button, and the bottom one with Author label and B button. I want them to be collapsed into just one navigation bar. This means that when I click on a story from the Stories scene to transition to the detail author view, there will be only one navigation bar that has the Stories back button, the Author label, and the B button.

My question is: How can I collapse these two navigation bars together? Any advice would be greatly appreciated.


Solution

  • I figured out one solution:

    Objectives: When combining a Master-Detail scheme with the Detail part spreads to several scenes via tab bar controller using Push segue from Master to the tab bar scene, I want to: 1). retain the back button from the push segue, 2). set the navigation item on the tab bar scene to whichever detail scene that is visible, 3). set the right button on the detail scene. Another objective is to just use Storyboard to convey the GUI design and interaction flow, without getting into the code.

    Problems: There were many problems with which controllers to use. (And one can play with the Xocde project that I uploaded here to see them.) One good solution is to use a navigation controller for each detail scene, which enables the bar button item to be added to the navigation bar on the detail scene (do not add a navigation bar to the detail scene yourself). Just from Storyboard, this worked fine, except that the navigation bar from the navigation scene would show up under the navigation bar from the tab bar scene, and the upper navigation bar wouldn't have the correct title or the correct button on it.

    Solutions: The basic use of all the scenes as described in the original post is fine. For the programmatic changes part, create a view controller .h and .m for the detail scene. Then in the viewDidAppear method, retrieve the bar button that was added to the right side of the detail scene's navigation bar, and then assign it to the right bar button item on the tab bar scene's navigation bar.

    The code snippet is as the follows - this is applicable to scenes that I described earlier:

        UIBarButtonItem *detailButton = self.navigationItem.rightBarButtonItem;
        self.parentViewController.parentViewController.navigationItem.rightBarButtonItem = detailButton;
    

    On the Storyboard canvas, select the navigation scene, and make sure it's navigation bar is turned off.

    One thing that I particularly liked abut this that the separation of the GUI design and flow are totally there.

    Hope this helps.