In my app I have a UITabBarController as the root view. I have two step modal view that will be navigated through using a navigation controller. I'm running into an issue where when I add a UINavigationController as a child of the UITabBarController, a tab bar sized gap is left at the bottom of my navigation controller. See the attached image (apologies for the ugliness, it's just for demo purposes).
In the image, the bottom white bar is the tab bar, the blue background is the currently selected tab's view controller. The yellow is the view controller contained in the navigation controller. The red is the gap that is created when adding a navigation controller as a child to the tab bar controller.
This only occurs when the tab bar is set to opaque. Edges for extended layout on the navigation controller make no difference. It seems no matter what I do, I'm left with the gap that I can't do much of anything with.
I'm adding the navigation controller in a pretty straightforward way:
addChildViewController(navigationController)
view.addSubview(navigationController.view)
navigationController.view.setTranslatesAutoresizingMaskIntoConstraints(false)
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-20-[view]-20-|", options: nil, metrics: nil, views: ["view" : navigationController.view]))
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-100-[view]-100-|", options: nil, metrics: nil, views: ["view" : navigationController.view]))
If I set the navigation controller as the root view controller in the app delegate, it displays correctly, without the gap at the bottom.
Is this a bug with the interaction between tab bars and navigation controllers or is there something I can do to prevent this?
The view controller contained in the navigation needs the extended edges set. Additionally, extendedLayoutIncludesOpaqueBars
must be set to true
on the contained view controller. I added the following to the view controllers that will be contained in the navigation controller:
edgesForExtendedLayout = UIRectEdge.Bottom
extendedLayoutIncludesOpaqueBars = true
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With