Interface Builder doesn't honor Safe Area proportional alignment constraints

In Interface Builder, setting the constraints for a UI element (let's say a button) doesn't change if I make the aligment proportional to the Safe Area or proportional to the Superview. I have a button which I set its horizontal alignment to be: 

I have another button which I set its horizontal alignment to be: 

Both buttons end up being aligned horizontally:

I would have expected the button aligned to the Safe Area to be shifted to the right as the Safe Area's leading edge is shifted to the right from the one of the Superview. I'm probably missing something but can't quite understand what is going on here.

The problem is that heights and widths proportional to the Safe Area are honored, so the size of UI elements does change if you make them proportional to the Safe Area or to the Superview. So when you try to layout something with Safe Area proportional heights and widths, and also use Safe Area proportional horizontal and vertical placements, UI Elements don't line up for iPhones with a notch. They kind of lineup for devices like iPads and iPhones with no notch where the Safe Area is very close to the Superview area.

Up vote post of fermor Down vote post of fermor
1.2k views
Posted by
fermor
Reply
Add a Comment

Replies

What do you expect exactly (could you draw it) ?

For Safe button, what is the superview ? How are its constraints defined ?

I tried this:

  • create a superview (yellow).
  • Button 1 outside
  • Safe button inside

I constrained yellowView :

I constrained the buttons as you did.

  • Button 1:

  • Safe Button

Here is the set up in IB:

And what we get after rotation in simulator and in storyboard:

What else different would you expect ?

Posted by
Claude31
Post not yet marked as solved Up vote reply of Claude31 Down vote reply of Claude31
Add a Comment

@Claude31, thanks for taking the time to comment and come up with a workaround. In my example, both buttons are children of the default view of a view controller. This view is the Superview for both buttons, and the Safe Area is the one defined for that view.

In my example I expected to see a result like you got in your second screen shot. It seems like you have come up with a workaround for this issue by creating an extra view that matches the Safe Area and placing the button there. I think there is a problem in Interface Builder. Height and width constraints with respect to the Safe Area (without a need for an extra view) work (I have tested those and they work), but horizontal and vertical alignment constraints don't. I guess I will have to implement your workaround. It is very unfortunate that something as simple as this doesn't work correctly.

Posted by
fermor
Up vote reply of fermor Down vote reply of fermor
Add a Comment