iOS Toolbar Height Depends on Initial Orientation

Question

I am facing some trouble with a bottom UIToolbar on the iPhone. The height of the bar seems to depend on the device orientation at the time when I navigate to the scene and does not update when the orientation is changed.

1. When I navigate to the scene in portrait mode, the bottom bar has a height of 44. When I then turn the phone (an iPhone XR here), the height of the bar remains 44.
2. When I open the scene in landscape mode, the bottom bar height is 49 and also remains 49 when I turn the phone upright.

This can easily be reproduced with as simple 2-scene app such as this one:

Initially, this was not really an issue - the user would not even notice the small change. But now I am using the bottom bar in a split view. When that is initially opened in portrait, the bottom toolbar has a height of 44. Turning the phone into landscape, the detail view with its own toolbar, 49 high, opens. Then I have two toolbars with different heights right next to each other, which is rather ugly:

So the question is how I can ensure the toolbar height is either updated on orientation change, or the height is always the same (as eg in the email app). I don't want to hard-code the height expecting that it would eventually make things worse on future iOS versions or different devices.

I am using Xcode 10.1, running the app on an iPhone with iOS 12.1.2.

Answer 1

Did you add the toolbar manually on to the view or are you using the navigationController to manage the toolbar? I am assuming you did, since on rotation the height is not changing.

The navigation controller manages the height of the toolbar on rotation. Adding the following to the viewDidLoad() method will show the navigationController's toolbar.

navigationController?.setToolbarHidden(false, animated: false)

This approach requires a little less code than if your view controller manages the toolbar (one less method, one less outlet).

Here is the default template I did to check that the toolbar displayed properly on iPad and an iPhone Max model: https://github.com/joelesli/TBHeight/

iPad Pro

iPhone XS Max

iPad Air 2

iPhone 8 Plus

Answer 2

I initially solved it (based on Mocha's comment above) by overriding viewWillTransition(...) to redraw the toolbar and assume its default dimensions for each orientation.

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    if let bBar = bottomBar { bBar.invalidateIntrinsicContentSize() }
}

That way it should adapt to future UI changes, and I don't risk having problems in app approval (if modifying standard UI element styles would be an issue here).

Update: I prefer JoelEsli's solution though this might be a good alternative in some situations, so I'm leaving it here for completeness.