iOS 11 iPhone X toolbar not respecting safe areas

Viewed 2631

I have noticed that in the simulator using iPhone X, the tabBar increases dimension vertically to respect the safe area on the bottom of the screen. However toolbars added in storyboard do not and still maintain their default 44 height which causes the toolbarItems to be cutoff on the edges.

How would I duplicate the tabBar behavior for the toolbar on iPhone X without customizing the toolbar?

2 Answers

In order to be able to constrain items to the safe area in a storyboard, you need to enable "Use Safe Area Layout Guides" on the storyboard, in the Interface Builder Document section:

Screenshot of Interface Builder Document in Xcode 9

Once you've done that, you can, as mentioned in the other answer, constrain to the Safe Area:

Screenshot of Safe Area constraint in in Xcode 9

The solution is to change the vertical constraint in storyboard on the bottom and sides to the safe area rather than container margin:

enter image description here

Related