CODEWITHSUNDEEP
iosswift
Chelseawillrecover
Chelseawillrecover

Reputation: 2654

How to fix button resize on iPhone X using autoresizing

First apologies in advance for question as it does not require coding only if its the required solution.

I am walking my way through constraints and auto resize with swift 4. I am having one slight issue while auto resizing without using constraints as that messes up the buttons positioning and size. See below how my UI buttons stack up.

iPhone 8 Plus, iPhone 8, iPhone SE all look same and buttons aligned perfect

enter image description here

iPhone X - Image appears stretched

enter image description here

iphone 4S - Image appears compressed inward

enter image description here

All I did was for each button set autoresizing as seen below

enter image description here

Is there a way I can make iPhone X maintain same image aspect ratios?

Thanks

Upvotes: 0

Views: 644

Answers (1)

Kévin
Kévin

Reputation: 890

As stated in the comments, you should use constraints to achieve the desired result. Using aspect-ratio and proportional constraints you should be able to scale the buttons accordingly.

EDIT

There are many ways you can do this with autolayout. Below I enumerate each step I performed to achieved it.

  1. Create a view, rename it to contentView. This view will hold the three buttons. Center it horizontally and set a bottom constraint: enter image description here
  1. Create height and width constraints for the contentView in relation to its superview, and change them to be proportional: enter image description here
  1. Create a view inside contentView, rename it redView and change its background color to red. Pin it to top, left and right. Finally, add a proportional height constraint (0.5) related to contentView: enter image description here enter image description here
  1. Create a view inside contentView, rename it to blueView and change its background color to blue. Pin it to the bottom and right. Also, create a top space constraint between this view and the redView (value 16): enter image description here

There will be some storyboard errors, don't worry, we will fix them shortly.

  1. Create a view inside contentView, rename it to greenView and change its background color to green. Similarly to the blueView, pin it to the bottom and left. Also, add a trailing space constraint between greenView and blueView (value 32): enter image description here
  1. Finally, create equal height and equal width constraints between greenView and blueView. enter image description here

That's it, now you should add buttons and/or images to each view and perform additional logic to achieve your desired final result (adding round corners and such).

Upvotes: 4

Related Questions