9

I can't properly constrain a view on the iPhone X to be above the bottom opaque toolbar.

You can see here that the view constrained to the bottom of the Safe area is obscured by the toolbar:

iPhone X screenshot

While for other iPhone models and sizes the view is correctly displayed above the toolbar:

iPhone SE storyboard screenshot

Here are the constraints I've added:

Constraints

Could someone kindly explain me what should I do?

Alexander M.
  • 3,308
  • 2
  • 20
  • 31

3 Answers3

7

I've solved the issue by selecting "Extend edges under Opaque Bars" for the UIViewController in question:

With option enabled: IB extend edges ticked

With option disabled: IB extend edges unticked

The other option is to use a translucent toolbar as @Silmaril has mentioned in another answer to the question.

Alexander M.
  • 3,308
  • 2
  • 20
  • 31
  • Are you sure you did not changed your toolbar style to translucent as well?Because I still can reproduce your bug when toolbar is not translucent. Which means enabling `Extend edges under Opaque Bars` is not a fix – Silmaril Oct 19 '17 at 12:49
3

This is definitely iOS bug.

Try use translucent toolbar because bug is not reproducible when toolbar is translucent.

Other option is to add toolbar directly on view controller

Silmaril
  • 4,241
  • 20
  • 22
  • Safe area's top is a top of the screen, so the label will be aligned below the status bar. However I need the label to be at the bottom. – Alexander M. Oct 19 '17 at 04:43
  • Oh, sorry. I mixed up safe area and layout guide in my head. Btw I just I don't see toolbar on your screenshots. I just tried created test project from `Single View App` template. And I don't have your issue on iPhone X. What are black areas on your screenshots? I don't have them as well – Silmaril Oct 19 '17 at 08:18
  • looks like you used simulated metrics. In this case this just bug of Interface Builder. Try running your app on iPhone X simulator when real toolbar is presented. If there is no other bug there (this time bug in iOS) you should not encounter this issue – Silmaril Oct 19 '17 at 08:28
  • Of course the problem is present on the simulator. Black area is a simulated opaque toolbars, it is stated in the description. Just add any button to the bottom toolbar using the toolbarItems property of the UIViewController and you will see that this toolbar will partially cover the view exactly like it is shown in the IB. – Alexander M. Oct 19 '17 at 09:41
  • `toolbarItems` property don't add toolbar view to view controller. Quote from documentation `This property contains an array of UIBarButtonItem objects and works in conjunction with a UINavigationController object.` Are you using navigation controller? – Silmaril Oct 19 '17 at 10:27
  • Oh, yes, sorry for that, I am indeed adding them to the navigation controller. – Alexander M. Oct 19 '17 at 12:23
  • See my answer, somehow this helped me with an issue. – Alexander M. Oct 19 '17 at 12:45
-2

use size to fit content ⌘ (+) = enter image description here

Habib Alejalil
  • 435
  • 1
  • 4
  • 17