Views constrained by width and aspect ratio, not updating height

0
votes

So on my main.storyboard, I have an image along with a few buttons. All of them are centered. What I wanted to do was scale everything so that it will look exactly the same from a perspective/ratio point of view, on different devices. That is, if an iPhone 8 Plus is 10 percent bigger than an iPhone 8, I want the buttons and image to be 10 percent bigger on the Plus.

I followed this link which told me to constrain the width of the object to a certain percentage of the screen's width (like 25%). Then, he said to constrain the aspect ratio, so that the height will follow along when the width changes based on the screen size.

I did this, for both my buttons and image view. When I look at the dimensions for an object and switch between viewing it through iPhone 8 Plus and iPhone SE, the width changes, but the height does not. So clearly the width is adapting to the screen size properly, but the height isn't. (Note, this is happening for all of the buttons and the image). Should I just constrain the heights and get rid of the aspect ratio constraint? Or is there a way I can fix the aspect ratio so that it does change the height?

Let me know if you have any questions or comments, Looking forward to a response!

EDIT: Per request, here are 2 pictures of the constraints. One is the aspect ratio constraint, the other is the width constraint.

Aspect Ratio Constraints

Width constraint

2
iosswiftxcodenslayoutconstraint
attach constraints for one item as an example for all - Sh_Khan
Did you constrain the button height to its own width? - DonMag
@DonMag No, I didn't constrain the height at all. Just the width with respect to the superview - Addison
My approach would be to (a) remove all constraints on the image, (b) paint it where I want it, (c) constrain leading and trailing margins to parent view, (d) constrain aspect ratio, e. center in parent view. - danh

2 Answers

1
votes

Take a look at this example:

enter image description here

Both buttons have a width constraint of 25% of the view (0.25 * width).

When designing for iPhone SE, they are both 80 x 30

Button B also has an Aspect Ratio constraint of 8:3

When viewed on an iPhone 8+

enter image description here

You see that Button A stretches to a width of 103.33, but its height stays at 30.

Button B stretches to a width of 103.33, but because it has a width-to-height ratio constraint, its height also stretches. In this case, from 30 to 38.67.

0
votes

For this work you need

1- width constraint to any percentage of screen

2- aspect ratio constraint

by ctrl dragging from the element to itself and select aspect ratio from popup then configure the multiplier , e.x 0.5 mean height will be half width

3- origin constraint x,y