Multiplier doesn't work on notchless devicess

I'm making an app that's in landscape only. I set a stack view's horizontal center to be the same as the safe area's leading, and then I set the multiplier to 2 in order to push the stack view to the right. On devices with notches (such as iPhone Xs or iPhone Xs Max), this constraint works perfectly as I intended. But all the notch-less devices (such as iPhone 8 plus and iPhone 8) ignore the multiplier setting. In other words, on notch-less devices, the stack view's center is always exactly equal to the safe area's leading, even if I set the multipler to numbers that are greater than 1.


Why does the multiplier only works on devices with the notch but not on notchless devices? And is there a way I can get the multiplier to work on notchless devices too?

Accepted Reply

You could add a small spacer view with its width proportional to the superview, aligned to the safe area. Then align your stack view to that.

Replies

Not sure to understand:

I set a stack view's horizontal center to be the same as the safe area's leading

So, stackView left part will not be visible ?

Do you mean

I set a stack view's horizontal center to be the same as the safe area's centerX ?


What is the constant defined in the constraint ?


I tested (on simulator), with center of a label aligned with center of safe area, with multiplier 2 and constant value 0.

It works as expected.

Tested with a horizontal stackView ; works as well, on both iPhone Xs and iPhone 8 (always on simulator).


I also tested with center of a stackView aligned with leading of safe area, with multiplier 2 and constant value 0.

Works correctly on both devices.


So, you may have defined other constraints that create problem.

Yes. I set the stack view's horizontal center to be the same as the safe area's leading so the left half of the stack view will be invisible initially. The constant is set to 0. And then I tried to change the multiplier to 2 in order to move the stack view to the right a little bit to make the left half of the stack view visible. This works on devices with the notch but not notch-less devices. So it works perfectly on iPhone X but not on iPhone 8.


I suspected that other constraints might be causing this issue so I tried this on a new project and a new blank view controller. I set the stack view's center to be the same as the safe area's leading. Constant 0 and multiplier 2. And I still get the same problem. It works as expected on iPhone X but it doesn't work on iPhone 8. On iPhone X, when multiplier is set to 2, the stack view moves to the right a little bit so the left half of the stack view is no longer hidden. On iPhone 8, the stack view doesn't move at all even though multiplier is set to 2. Even if I change multiplier to 4, the stack view would still stay at the same place as if multiplier is still set to 1. I don't have any other constraints on the view controller, I don't know what's causing this problem. This is so weird.

Don't understand. If constant is 0, multiply by 2 gives … 0


Can you describe how exactly the constraint is defined ?

On devices with square screens, the leading and trailing safe area inset is 0. So your constraint dutifully multiplies that by 2 (your multiplier) and adds it to the computed position, leaving you exactly where you started.

The math behind, as I said is


2 * 0 = 0


Incredible, no ? 😉

Is there a way I can align a stack view to the safe area's leading proportionally in a square screen device? I want there to be a short distant between the stack view and the safe area's leading. I also want the distance to adjust and change automatically according to the screen size of the device.

Here's how the constraint is defined:


First Item: Stack View.Center X

Relation: Equal

Second Item: Safe Area.Leading

Constant: 0

Priority: 1000

Multiplier: 2


Is there a way I can align the stack view to the safe area's leading proportionally in a square screen device? I want there to be a short distant between the stack view and the safe area's leading. I also want the distance to adjust itself automatically according to the screen size of the device.

for this fine control, you'd better define an IBOutlet for the leading constraint and set its constant value in code.

You could add a small spacer view with its width proportional to the superview, aligned to the safe area. Then align your stack view to that.

That's a great idea. I'll try that. Thanks a lot!