1

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.

img1

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:

img2

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.

Cesare
  • 9,139
  • 16
  • 78
  • 130
  • Check out this answers by Matt that fixed my issue: http://stackoverflow.com/a/20865342/1135714 http://stackoverflow.com/a/27662091/1135714 – Cesare Jan 16 '15 at 23:09

1 Answers1

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

Crashalot
  • 33,605
  • 61
  • 269
  • 439
Lucas Huang
  • 3,998
  • 3
  • 20
  • 29
  • Thank you for answering my question! I know pretty much all this features work. But how do you do what I asked using `Size Classes`? I mean, are there any options to distinct an iPhone 4 inches from an iPhone 4.7 inches so that I can set the right size of an image accordingly to its size screen? – Cesare Jan 16 '15 at 18:11
  • How do I know? Or what? Only **Size Classes** can build different layouts of the elements on different screen sizes. Is that what you are asking? – Lucas Huang Jan 16 '15 at 18:14
  • Please take a look at this image: http://i.imgur.com/43mETyR.png. 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. – Cesare Jan 16 '15 at 18:18
  • Yup, that's what I am telling you to do. You need to give one version of constraint for iPhone 4S and another version of constraint for iPhone 6+. And you can do that on the assistant editor(right panel) in XCode 6. – Lucas Huang Jan 16 '15 at 18:19
  • I'm on it. I got wCompact and hAny selected and here is what the assistant editor looks like: http://i.imgur.com/2lzGz3S.png. What shall I do next? Thanks again for helping me Lucas. – Cesare Jan 16 '15 at 18:22
  • You can choose different size on the bottom of **Storyboard**. Then, you can choose what screen sizes you are going to work on. I highly recommend you to take a look at the WWDC video. Because **Size Class** will be used everywhere. You better master it. Cheers. If you like it. Please support me. – Lucas Huang Jan 16 '15 at 18:34
  • That's not true. wCompact hAny just doesn't involve one single model of iPhone, it includes all the iPhones' screen sizes. – Cesare Jan 16 '15 at 18:36
  • I don't quite recall that then. I did it once. So, I highly suggest you to go check the docs. lol – Lucas Huang Jan 16 '15 at 18:42