Navigation bar for split view controller is darker when inside a tab bar controller

Question

If you place a split view controller inside a tab bar controller the navigation bar and tab bar are darker on the left side. I\'ve attached a screenshot. I created this by cre

Answer 1

Set the navigation controller's view backgroundColor to white:

self.navigationController?.view.backgroundColor = UIColor.whiteColor()

This will preserve the light gray color.

You can also disable translucency, but then the navigation bar will be white:

self.navigationController?.navigationBar.translucent = false

The answers come from this Stack Overflow question: Dark shadow on navigation bar during segue transition after upgrading to Xcode 5.1 and iOS 7.1

Answer 2

At the time of writing (May 2017) this bug still exists. I can't believe Apple doesn't take care of this. The worse part is that if you rotate your device, open the master from the side and rotate back, the translucent bars switch place and suddenly the master has a working translucent bar and the detail has not. :/

The only possible fix I was able to come up with, was to get rid of UITabBarController and instead build my own implementation of a tab bar controller using a plain UIViewController with a UITabBar at the bottom and the UIViewController containment API.

This means a lot of coding to reinvent the wheel. Its sad to not make use of UITabBarController but thats how it is. You have to make a trade off between the container controller and all its nice features like the "More" controller you get for free vs having translucent bars.

If you can live without translucent bars, I'd still go for UITabBarController over do all the coding. On the other hand, one could replace the UITabBar with a UICollectionView and have more than 6 items without having the need for a "More" controller at all.

Answer 3

While other answers get rid of the gray areas, the content doesn't appear behind the bars, making them not translucent in practice. If you wish to keep the effect, I found a workaround: don't use Storyboards.

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    let greenVC = UIViewController()
    greenVC.view.backgroundColor = .green
    let redVC = UIViewController()
    redVC.view.backgroundColor = .red
    let splitVC = UISplitViewController()
    splitVC.viewControllers = [UINavigationController(rootViewController: greenVC), UINavigationController(rootViewController: redVC)]
    let rootTBC = UITabBarController()
    rootTBC.viewControllers = [splitVC]
    window?.rootViewController = rootTBC

    return true
}

Before, using stock Interface Builder controllers (notice the gray backdrops of master navigation bar and tab bar):

After, instantiating controllers in code (see how the backdrops get the right color of the background now):