UISplitViewController inside tab bar

Question

I have an app which has a login screen and when the user logs in, a tab bar controller is pushed. I currently have some views that would benefit from the fact that apple now allows using the split view controller in all iOS devices, so I was preparing to implement this when I read that the UISplitViewController must always be the root view controller. So I was wondering if it is possible to make the view in one of the tabs become a master-detail view using a UISplitViewController or will I need to implement this manually?

In case it is not possible to show the split view as a tab, could it be pushed from the tab bar controller? (e.g. the user taps a row in a table view and the master-detail view appears).

Pennoncel

What you asking for, has been answered here – Laceylach

Answer 1

UISplitViewController in iOS 14 gained new API including a new column style that behaves differently from the unspecified style which is the "classic" interface. Using the modern column-style API, if you try to embed a UISplitViewController in a UITabBarController, it may not behave as you'd expect. For example, at least as of iOS 15, only the secondary view controller may be visible when you'd expect the primary and secondary be shown side-by-side. The documentation does note the following:

When you build your app’s user interface, the split view controller is typically the root view controller of your app’s window. ... Although it’s possible to install a split view controller as a child in some other container view controllers, doing so is not recommended in most cases.

I have however shipped multiple apps that put a split view controller in a tab bar controller using that classic API (via storyboard and programmatically), and they continue to work as of iOS 15. But it may be wise to move away from this as it's seemingly not an officially supported configuration.

Original answer pre-iOS 14:

You can definitely embed a UISplitViewController inside a UITabBarController. I've done just that for an app I released on the App Store. It has 3 tabs and each one is a split view controller.

Just drag out a tab bar controller into your Storyboard, delete the two controllers it added, then drag out a split view controller. Control drag from the tab bar controller to the split view controller and select the "view controllers" relationship segue.

On Xcode versions less than Xcode 8, you may see black or white bars at the top and bottom of the split view controller in the Interface Builder canvas, but these will not appear when the app is run on a device.

Here is the app running to show the split view embedded inside the tab bar controller on iPhone 6s Plus:

Schizomycete

I will try this out right now and let you know. Does your app run on iPhone? Additionally, is it also possible to push a split view controller? – Pennoncel

Yes, it runs on iPhone and iPad (iOS 8 and 7 - it's backwards compatible if you do it all in Interface Builder). I haven't tried to push one onto the navigation stack, so I'm not sure about that. – Schizomycete

i tried this approach but as you can see in the image there is a blank white area above the TabItem in SplitViewController. How did you handle that? I could not remove it and gave up using SplitViewController within TabBarConroller since apple does not suggest it too. see developer.apple.com/library/ios/documentation/WindowsViews/… – Hildegard

You can achieve it by selecting SplitViewController and navigating to Show the size inspector (Left Side of XCode) > Simulated Size > Freeform > set size as 1024 * 768. – Lepidosiren

Can you give me a demo ? – Lyophilic

Just don't ever reach more than 5 tabs. SplitViewController cannot be pushed on to a NavigationController and that's exactly the the tabs which end up in the More tab try to do. – Frontpage

Answer 2

When you put a UISplitViewController inside a UITabBarController and the tab bar is set to be opaque you have an issue where your UISplitViewController content is shifted up the size of the tab bar:

To fix this issue you have to check the Under Opaque Bars checkbox on your UISplitViewController in your storyboard:

And now the UISplitViewController view size is correctly computed:

Asbury

You've just saved my life, after 3 hours of struggle! – Cube

Same here. But before the 3 hours of struggle! Thanks for this. – Hazzard

Answer 3

There is also a problem using this approach in iPhone (>IOS8) where the splitviewcontroller is in collapsed mode. When we push the list view to the details view we cannot hide the tabbarcontroller using the conventional "hidesBottomBarWhenPushed". So I have added the TabBarcontroller as root viewcontroller of a navigationcontroller. Now when I push to details view, I send the message to the root navigation controller and push the view to the details view instance in collapsed mode whereas in regular mode I just push it using showDetailsViewController()

Betthel

This is a really interesting approach. Is this still working for you? So, you have a Nav (with the root Tab) as the initial controller for the app... I really like this idea but it seems a bit hackish and I feel like anything hackish eventually has negative consequences. But I must admit, this is a very appealing idea as I have been trying forever to get this to work... – Simper

how did u send message to the root view controller? @AllenLee – Bordie

Answer 4

For me, this worked.

XCode 13.2.1

iOS 15.2

splitViewController.extendedLayoutIncludesOpaqueBars = true

Inerrable