IOS 8 image scaling and auto layout

Question

lets say I have a UIView with only one image centred in the top part of the UIView, and I provided an image asset for the image like so

• normal for iPhone 4s and earlier 50x50
• @2x for iPhone 5/5c/5s/6 100x100
• @3x for iPhone 6+ 150x150

So apparently the width and height of the image get increased with different devices, so the questions is how do I deal with auto layout, should I set the width and height constraints to greater than or equal or what? And also how do I deal with the positioning of the image itself? And the last thing I noticed that the IOS simulator always uses the same image for different devices, is it a bug or a problem from my end?

Answer 1

The actual width/height of the UI images on screen are defined in points and not pixels. The image sources are provided, @2x, @3x etc so that for the higher resolution screens you are providing the extra pixel accuracy needed. e.g. 1x1pt is the same on all screens, but the pixels required to display a quality image are 1x1 for @1x, 2x2 for @2x and 3x3 for @3x.

So define your layout with width and height which is in points. You do not really need to worry about the raw image pixels other than to provide versions for the different resolutions of actual device.

The main consideration you need to worry about is how images look when scaled on screen. The perfect image is achieved by setting the width and height in points to match the pixel width and height of the @1x image. That way you know when it uses @2x and @3x that you are pixel perfect on screen. Having the points width and height bigger or smaller than the raw images resolution will result in either scaling or shrinking the image which will have some impact on clarity of the image.

Answer 2

You need to understand difference between points and pixels for this. We design views in interface builder not in pixels but points.

1. For normal screen (non-retina) points = pixels.

So if we set image view's height and width to 50 * 50 in interface builder and load up image of 50 by 50 pixels, it will just fit right, if we load image of 100 by 100 pixel in a 50*50 imageview it will rescale the image and some compression artifacts may arise.

2. For retina displays point = 2 pixel.

So for a 50*50 image view you need to load up image of 100*100 pixel . It will look sharper and no compression artifacts occur.

3. For 6+ point = 3 pixel.

So for 50*50 image view you need to load up 150*150 image.

The imageview won't rescale to 150*150 in 6+ as you presume . It will be 50*50 but contain 150*150 pixel image which will result in super sharp display.

Answer 3

First of all watch the Introduction: what's new in interface builder from WWDC2014 https://developer.apple.com/videos/wwdc/2014/ and see designing different UIs for different screen sizes - big, small, default.

In interface builder you should use the smallest constraints - 50x50 and put the correct name of image used. Then just add the other images with @2x @3x prefixes, and system will use them depending on the device you are using.