iosswiftxcodeios-autolayout

Button on bottom of screen: iPhone X vs regular screen

I'm trying to optimize an app for the iPhone X screen. Currently it shows black or white bars on most screens. As example I will use the PaymentMethodsView.

The PaymentMethodsView is a custom UIView containing 1 or 2 buttons in a horizontal StackView, the superView has a gray background. This StackView is currently constrained with 16px to the superview (all 4 sides). Currently it looks like this on the iPhone X (and on regular iPhones the view is just on the bottom of the screen:

enter image description here What I want to achieve here is that the gray area extends to the bottom of the screen, while the yellow sits where now the bottom of the entire view is. (So 16px lower)

I can get this to work by enabling Use Safe Area Layout Guide for this ViewController, constraining the PaymentMethodsView in the viewController to 0 to safe area on the sides, and 0 to superview on bottom. Then in the PaymentMethodsView itself, I change all the StackView's constraints to safe area instead of superview, and change the bottom constraint to 0 instead of 16. This works fine, except on regular iPhones the bottom 16px (under the StackView) disappears and it puts the yellow button to the bottom of the screen.

How would I go about fixing this?

Thanks!

Solution

  • You can do this by adding TWO bottom constraints to your stack view...

    First, constrain the grayView Bottom at Zero to the bottom of the view (its superview), not to the safe-area. Then

    This says: keep the bottom of the stackView at least 16-pts from the bottom of its superview (the gray view)

    and

    The 999 says put it at Zero-pts from the bottom of the safe-area if possible

    enter image description here

    The result on an iPhone 7:

    enter image description here

    and on an iPhone XS

    enter image description here