Interface Builder doesn't honor Safe Area proportional alignment constraints

Question

Created Mar ’22

Replies 2

Boosts 0

Views 1.4k

Participants 2

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:

Screen Shot 2022-03-16 at 6.02.45 PM.png

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

Screen Shot 2022-03-16 at 6.03.10 PM.png

Both buttons end up being aligned horizontally:

Screen Shot 2022-03-16 at 6.14.18 PM.png

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.

Boost

Answer 1

Claude31 OP

Mar ’22

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

View structure.png

I constrained yellowView :

Constraints yellow view.png

I constrained the buttons as you did.

Button 1:

Button 1 constraints.png

Safe Button

Safe button.png

Here is the set up in IB:

Yellow view.png

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

Simulator screen.png

What else different would you expect ?

1

Answer 2

fermor OP

Mar ’22

@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.

Screen Shot 2022-03-20 at 7.17.49 PM.png

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.

0