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.

CodePudding user response：

Couple things may be causing the confusion...

First, it helps to add a (yellow) view, constrained on all 4 sides to the Safe Area (using iPhone 13 Pro layout):

As you can see, the Safe Area has 44-pts Leading AND Trailing.

So, in Portrait Orientation, both the Superview and the Yellow view have a Width of 390.0 and the CenterX value for both is 195.0.

When rotated to Landscape, the Superview Width is 844.0 while the Yellow view (constrained to Safe Area) Width is only 756.0 ... that is, 44-pts on each side.

However, the CenterX value is the same: 422.0

So, when we constrain a view / label Leading to CenterX of either the Superview or Safe Area with a 0.5 Multiplier, the resulting X / Leading value will be 422.0 * 0.5 == 211.0

Take a look at this example using these constraints:

• L1 Leading is Superview.centerX * 0.5

• L2 Leading is SafeArea.centerX * 0.5

• L3 CenterX is Superview.centerX

• L4 Leading is L3.centerX * 0.5

• L5 CenterX is SafeArea.centerX

• L6 Leading is L5.centerX * 0.5

• L7 CenterX is Superview.centerX (but Width: 240 instead of 120)

• L8 Leading is L7.centerX * 0.5

As we see, all of the "50% of CenterX" labels are aligned.

And, we get the same alignment when rotated:

Worth noting: If you try to do the same thing with Top and CenterY constraints, you WILL see an immediate difference... because when rotated to Landscape Orientation, the Safe Area Top and Bottom "padding" are not the same.