In Interface Builder, how I do to resize correctly

Question

I am using the Auto Layout feature, and I would like to know if I can use different image sizes for different screen sizes.

Here's what my Storyboard File looks like.

As you can see, there is an image of a guy. How do I keep the size of image proportional for every screen size? Let me explain.

On an iPhone 4" the guy image should look a little bit smaller than on an iPhone 5.5". Is this even possible?

On an iPhone 3.5" the image should look small. On an iPhone 4" the same image should look a little bit bigger. On an iPhone 4.7" it should look even bigger, and so on.

Setting up constraints doesn't help,

Please take a look at the following image:

There are two iPhones and the guy image should look different on both the devices. On the iPhone 4S the image should look smaller to fit nicely the big grey dot while on the iPhone 6 Plus the guy image should look definitely bigger to get the most out of its screen size.

Is there any way to do it?

Thanks you.

Answer 1

So, you have to understand what's AutoLayout and Size Class first. AutoLayout basically helps you place the UI elements. And the Size Class enables you to have the control on the constraints you added on different screen size.

What you need to do is set different version of constraints for different screens. You can see the options in the assistant editor(right panel). They have you the options to choose apply for "All Size Classes" or "This Size Class".

Better you go check the documentation and the WWDC video. It has the complete explanation: https://developer.apple.com/library/ios/recipes/xcode_help-IB_adaptive_sizes/chapters/EnablingAdaptiveSizeDesign.html