6

I'm trying to create a tabbed application with navigation elements inside the tab bar, as seen in the picture below (the red bar) using Swift/XCode 6.2. Basically those three icons in the middle will direct the user to different view controllers. The other two icons would be context-based. For example, on a table view page you would see the menu icon and add new icon as seen in the image. However, clicking on a row would change the menu icon to a back icon, and the add icon to something else.

That's the general idea, but I'm having a very hard time implementing something even close to this. The first issue is that whenever I embed a view in a Tab Bar Controller, I can't move the tab bar to the top. However, when I create a custom UITabView in a View Controller, Control + Click and dragging a Tab Bar Item to another view doesn't create a segue. I haven't even begun to tackle having the navigation elements inside the bar.

I guess what I'm asking is just for a little guidance on what route to take to tackle this. I'm assuming I can't use a Tab Bar Controller or Navigation Controller because it doesn't seem like I can customize them all that much. So custom Tab Bar and Navigation Bars, and then implemnt the segues and button changes programmatically?

Thanks.

Tab Bar with Navigation

Ryan Bobrowski
  • 2,641
  • 3
  • 31
  • 52

2 Answers2

12

I will try to guide you from an architectural perspective (so you won't find much code below).

Using a UITabBarController

In order to achieve what you are suggesting, you are right you cannot use a UITabBarController straight away, among several reasons, the most immediate one is that they are meant to be always at the bottom and you want it in top (check Apple's docs). The good news is that probably you don't need it!

Note: If you still want to go with a UITabBarController for whatever reason, please see @Matt's answer.

Using a UINavigationController

You can use a UINavigationController to solve this task, since the UINavigationBar of a UINavigationController can be customized. There are multiple ways on how you can organize your view's hierarchy to achieve what you propose, but let me elaborate one option:

  1. To customize a UINavigationBar's to add buttons, you just need to set its navigationItem's title view:

    // Assuming viewWithTopButtons is a view containing the 3 top buttons
self.navigationItem.titleView = viewWithTopButtons

  2. To add the burger menu functionality on a UINavigationController you can find several posts on how to do it and infinite frameworks you can use. Check this other SO Question for a more detailed answer (e.g. MMDrawerController, ECSlidingViewController to mention a couple).

  3. About organizing your view hierarchy, it really depends on if when the user taps one of the main top buttons, it will always go to the first view controller in the new section or if you want to bring him back to the last view in the section where he was.

    3.1 Switching sections displays the first view of the new section

    Your app's UIWindow will have a single UINavigationController on top of the hierarchy. Then each of the 3 top buttons, when tapped, will change the root view controller of the UINavigationController.

    Then, when the user changes section, the current navigation hierarchy is discarded by setting the new section view controller as the UINavigationController root view controller.

    self.navigationController = [sectionFirstViewController]

    3.2 Switching sections displays the last displayed view in the new section

    This will require a slightly modified version of the above, where your each of your sections will have its own UINavigationController, so you can always keep a navigation hierarchy per section.

    Then, when the user taps one of the top buttons to switch section, instead of changing as previously described, you will change the UIWindowroot view controller to the new section's UINavigationController.

    window.rootViewController = sectionNavigationController

Using a custom implementation

Of course, the last and also very valid option would be that you implement yourself your own component to achieve your requirements. This is probably the option requiring the biggest effort in exchange of the highest customizability.

Choosing this option is definitely not recommend to less experienced developers.

Community
  • 1
  • 1
veducm
  • 5,933
  • 2
  • 34
  • 40
  • Where should I be setting my titleView attribute? If I do it in a custom NavigationController associated with the storyboard nav controller, the titleView doesn't show up. If I do it in one of the 3 main ViewControllers, it works, but wouldn't this imply I would have to initialize the custom titleView three times? – Ryan Bobrowski Mar 27 '15 at 17:54
  • 1
    You don't really need to initialize the custom view with the items every time, only once and then yes, you still need to assign it as the `titleView` in each `UIViewController`. I can't think of another way of doing it if it is not using some sort of appearance setup, but not sure how that would work. Anyway, it might be worth taking a look at the [docs](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/index.html) for `UINavigationController`, section *Updating the Navigation Bar* might give you some ideas. – veducm Mar 27 '15 at 18:16
3

I'd like to take a stab at this--I think it is possible to use a tab bar controller here.

  • Your topmost-level view controller will be a UITabBarController with a hidden UITabBar.
  • Each tab is contained in a UINavigationController.
  • All view controllers in the navigation controller will be a subclass of a view controller (say, SwitchableViewController).
  • In SwitchableViewController's viewDidLoad, you set the navigation item's title view (i.e. whatever's at the center; self.navigationItem.titleView) to be the view that holds the three center buttons. Could be a UISegmentedControl, or a custom view.
  • Whenever you tap on any of the buttons, you change the topmost UITabBarController's selected index to the view controller you want to show.

Issues you may encounter:

  • Table views inside tabs will have a scrollIndicatorOffset at the bottom even if the tab bar is hidden.
  • Your title view will be animated every time you push a new view controller in the navigation stack.
    • Solution: Take a look at creating a custom transition animation for the UINavigationController.
Community
  • 1
  • 1
Matthew Quiros
  • 13,385
  • 12
  • 87
  • 132
  • I am not sure about the benefits of having a hidden `UITabBarController` just to effectively change the window's root view controller. But *I still think it is an interesting approach* and I would like to ask you, although I know it would mean not increasing your reputation, but for the sake of completion, if you would consider editing my answer to add this option. – veducm Mar 25 '15 at 20:51
  • Ah, but the `UITabBarController` is *the* window's root view controller here. – Matthew Quiros Mar 25 '15 at 21:07
  • Yes, I understand that, but what I was trying to say is that the only reason you are using it is to change the window's root view controller... which you could do straight away in the `UIWindow` anyway, if you did not have the `UITabBarController`, couldn't you? – veducm Mar 25 '15 at 21:10
  • With a `UITabBarController`, you are giving each tab its independent navigation stack. The `titleView` buttons are obviously functioning as tabs, and it's in iOS's design language that the navigation stack of each tab is preserved even when you switch them. Your approach **discards the current navigation stack every time a selection is made**. Is that what @itstrueimryan wants? I don't know. We both didn't see the full specs of his app. I'm just giving him another option. – Matthew Quiros Mar 25 '15 at 21:22
  • I agree, and as I said, I think it is an interesting approach. I will mention it in my answer, in the `UITabBarController` section, if that is fine with you. – veducm Mar 25 '15 at 21:36