Search code examples
iosswiftxcodenslayoutconstraint

Views constrained by width and aspect ratio, not updating height

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

Solution

  • 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.