Overlapped nested tab bar controllers

I’ve created a UITaBarController with 4 UIViewControllers and embedded in (Editor -> Embed In -> Tab Bar Controller) them with another Tab Bar Controller. So, I have two levels of Tab Bar Controllers. But, the second level of tab bar is being hidden by the first level and I don't know how to fix that. How can I fix that?

Replies

That's not very clear:

Let me try to reformulate

I’ve created a UITaBarController with 4 UIViewControllers

- you created 4 UIViewControllers with a common tabBarController


and embedded in (Editor -> Embed In -> Tab Bar Controller) them with another Tab Bar Controller.

What did you embed ? Who are "them"

Do you embed each of the 4 Controllers in a different tabBar ?

Or do embed the four in another tabbar ? In that case, each ViewController is connected to 2 tabbar controllers.


Why do you embed a second level ? Is there a use case scenario or is it for the sake of finding out if that works ?


But, the second level of tab bar is being hidden by the first level

How are the 2 tabbar connected ?

I've created 4 UIViewControllers and linked all of them to a common UITaBarController. You are right.


Since I need 2 levels of tab bars, I tryed to "Embed In" 1 of the UIViewControllers with another UITaBarController ina attempt to achive my goal before applying to all UIViewControllers.


The issue is that the 2 tab bars overlapped. https://i.stack.imgur.com/rr8Q6.png

My intention is to have 2 levels of tab bars that are always appearing without hiding. https://i.stack.imgur.com/GML3V.png


Please, let me know if you have any doubts.

Still not totally clear:


I tryed to "Embed In" 1 of the UIViewControllers with another UITaBarController

What did you embed ? Do you mean embed the first tabbarController ? But that is not possible (menu item is disabled when tabBarController is selected)

So, what do you embed ?


Anyway, that is not a good UI design, that wouyld be very uncommon and not easy to use (risk of tapping the wrong bar).


You have at least 2 options:

- use the more button in the tab bar to have more (and less frequently used items) on the right with a more button

- create your own view, with all the buttons you need, arranged as you like, and connect each to the appropriate view controller.

What did you embed?

- I embedded each UIViewController with one UITaBarController (one for each one).


Do you mean embed the first tabbarController?

- No, I embedded in the UIViewController.


But that is not possible (menu item is disabled when tabBarController is selected)

So, what do you embed ?

I embedded in the UIViewController.


Please, see the mainstoryboard in a attempt to clarify the scenario and see for yourself a project I prepared as an example.

Main Story Board - https://i.stack.imgur.com/HDbJz.png

Project Source Code Example - https://drive.google.com/file/d/1QTkQWkqO1ioFK-cOMJy9o4I0tbGyOEcZ/view?usp=sharing


Anyway, that is not a good UI design, that wouyld be very uncommon and not easy to use (risk of tapping the wrong bar).

You have at least 2 options:

- use the more button in the tab bar to have more (and less frequently used items) on the right with a more button

- create your own view, with all the buttons you need, arranged as you like, and connect each to the appropriate view controller.


I already found a workaround that needs a lot of control/code in order to have what I need. This means that I create 4 UIViewControllers with one UITaBarController grouping them and create one tab bar inside of each UIViewControllers. So, I have the second tab bar appearing when users push a bar item of the first tab bar (first level at the bottom).


But, I'm looking for the "best practice" with less code to control the desired behavior of the menus, etc. Do you think it is possible?


I already thought about the mentioned options or similar to them, but I'm justing converting an android app that works very well with 1st level of menu fixed and the 2nd menu depending of the button of the first level menu pushed and I don't mind to modify it.


Thanks for your help and I hope the scenario is more clear now. Let me know if is not.

I finally succeding in recreating a storyboard similar to yours. But not exactly the same.


Could you detail your build up ?


What I did:

- Created 3 UIViewControllers

- Selected them all in IB and embedded in TabBarController

- Dragged a TabBarController in IB (that is probably not what you did)

- removed the 2 UIViewControllers that were created with it

- connected this new TabBarController to the previous one with a relationship segue

- made this leftmost TabBarController the initial view


Can you detail what you did in a similar way ?


-----------------------

For the display problem, I filed a bug one year ago, without good response:

Bug display in TabBarController in XCode10.1ß2 45074323


Basic Information


Veuillez saisir un titre descriptif pour votre évaluation

Bug display in TabBarController in XCode10.1ß2

Dans quel produit constatez-vous un problème ?

iOS + SDK

Dans quelle zone constatez-vous un problème ?

UIKit


Description


Veuillez décrire le problème et les étapes à suivre pour le reproduire

Area: UIKit Summary: I have a TabBarController going to another TabBarController going to a NavigationController and finally to a ViewController. In iB (and in simulator), the icon set for the barItem of the Navigation controller appears (as a very small 10x10 probably) image at the left bottom corner above the tabBarItem of the tabBarController as well as in NavController Steps to Reproduce: 1. Look at TabBar at the of Home UITabBarController and UINavigationController 2. Run code and click Go First of Go second Expected Results: Nothing should show above tabBar Actual Results: The icon of the selected TabBarItem appears at the bottom left of the view, just above tabBar. This did not happen in 10.1ß1. See appended screenshots Version/Build: Xcode Version 10.1 beta 2 (10O35n) Configuration: OSX 10.13.6

I'm using Xcode Version 10.2.1 (10E1001) and the issue you faced looks like the same or similar to it.


First of all, create a UITabBarController that comes with 2 UIViewControllers linked to it. Then, pick one of the UIViewControllers and go to "Editor->Embed in" to attach another UITabBarController between them, creating the second level of menus.


Follow a screen showing how to reproduce the scenario: https://i.stack.imgur.com/CvCux.png


Note that, I attached the project in the last post.