iOS: Scaling for different screen sizes with Auto Layout

Question

I am programming an app for iPhone and I am using Auto Layout. I understand how @1x, @2x and @3x works, but what I don't understand is how to handle different screen sizes with Auto Layout.

If I want a scene to look good both on iPhone 6+, iPhone 6 and iPhone 5, I need to take into account the very different sizes of each phone. I can't use the same image size (in points) on all iPhones, because it will look too big on smaller phones, or too small on bigger phones. And I don't even want to imagine the hassle of iPad layout.

How can I solve this? Should I use constraints to make all of my images scale dynamically? This sounds doable, but I'm wondering what the best solution is.

Thank you. I'm really at a loss here.

Answer 1

If you want to keep the propotion on different sizes (for instance an image that has the same apparent size in each device) you can use constraints.

One small trick that I usually do is:

Define an aspect ratio constraint (cmd + click beginning in your view and ending in your view):

And then force your view to increase in width or in height (ie: defining constraints for the left and the right).

It all depends on what you want actually, and the constraints/code will vary in different situations.

Answer 2

you could make the @2x and @3x unproportionally bigger than its @1x counter part, then use the UIImageView's intrinsic size to let it become bigger for the different screen sizes

never tried something like this myself but i dont see a reason why it wouldnt work