CODEWITHSUNDEEP
iosswiftxcodeios-autolayout
Jeroen
Jeroen

Reputation: 2091

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!

Upvotes: 2

Views: 3028

Answers (2)

pseudoankit
pseudoankit

Reputation: 329

Below code worked for me give it a try,

  1. Click on you view controller

  2. Select Identify and Type from right panel

  3. Under Interface Builder Document enable Use Safe Area Layout

Now Wherever you want to place any view to bottom just give constraints corresponding to view not safe area

Upvotes: 0

DonMag
DonMag

Reputation: 77690

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

  • add one constraint from the stackView Bottom to the bottom of the grayView (its superview) at >= 16
  • and a second constraint from the stackView Bottom to the bottom of the safe-area at 0 with Priority: 999

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

Upvotes: 5

Related Questions