Images for iphone 5 retina display

Question

iPhone 5 released, with new screen size and resolution.

When we used images for iPhone 4 (retina), we just added "@2x" to image name. Can anybody tell me, is it possible to add different images (backgrounds, buttons, etc), for new iPhone screen?

And the second question: can I have in my app separate XIB files: for iPhone old, iPhone new (like for iPhone and iPad)?

Thank you!

Answer 1

Here's an except from my blog about this subject:

[UIImage imageNamed:] automatically loads @2x versions of images when running on a retina device. Unfortunately, imageNamed: will NOT automatically load -568h@2x versions of images when running on an iPhone 5.

Sometimes this doesn't matter, for example icons and non-full screen graphics are probably the same on iPhone 4 & 5. However, if you have full-screen background images, or full-width / height background images for toolbars etc you will have problems. Your 480-high images will most likely get stretched (and will probably look horrid as a result).

You can manually check the screen size and load the right image like this:

UIImage* myImage;
CGFloat screenHeight = [UIScreen mainScreen].bounds.size.height;
if ([UIScreen mainScreen].scale == 2.f && screenHeight == 568.0f) {
   myImage = [UIImage imageNamed:@"myImage-568h.png"];
} else {
   myImage = [UIImage imageNamed:@"myImage.png"];
}

There's a way of altering UIImage imageNamed so it does automatically load the right image. See link below for details.

More at: http://pervasivecode.blogspot.co.uk/2012/09/making-apps-work-on-iphone-5-screen-size.html

EDIT: @Sound Blaster & @GrizzlyNetch are right, in code you should use imageNamed:@"myImage-568h.png"] but the actual file name should be [email protected]. If you don't do this, then the scale is incorrect, just like they said.

Answer 2

The iPhone 5 does not introduce a new pixel density so you can just use all the retina images you used before.

All you need to support the new resolution of the iPhone 5 is to make you views will up the window. For most view, like tableview and scrollview this will not present any problems.

Also there is not need to add an extra XIB files for the new resolution, which is also not supported.

Just add the [email protected] to you apps bundle to make iOS 6 make you app take up the extra space available in the iPhone 5.

All native controls, like the tab bar will behave like you would expect.

If you like to support iOS4.3 and 5.* in you app then make sure that the Use Autolayout in the nib setting (first tab in interface builder) is turned off.

Then make sure you correctly setup the view autoresizingMask

Answer 3

if ([UIScreen mainScreen].scale == 2.f && screenHeight == 568.0f) Exact comparisons of floating point numbers is not a good idea in any language due to rounding errors in the way they are stored in memory. For example, you cannot guarantee 568.0f is not stored as 567.9999999 or 568.0000001. Much safer to use a range, or in this case it would be sufficient to screenHeight > 567.1f. I suspect even the iPhone does not physically support fractions of pixels.

Answer 4

EDIT

BEWARE, as of iOS8 UIScreen take account of the orientation (checking the height can return two value, the portrait height or the landscape height, before it was the portrait height only), but xcassets are better you can check it here : How to addapt iphone background?

END EDIT

Based on ben-clayton answer I made a handy category to manage image for iPhone 5. Thanks.

+ (UIImage *) imageForName:(NSString *)imageName
{
    NSString *result = imageName;

    CGFloat screenHeight = [UIScreen mainScreen].bounds.size.height;
    BOOL isIphoneFive = ([UIScreen mainScreen].scale == 2.f && screenHeight == 568.0f);

    if (isIphoneFive)
    {
        NSString *imageNameWithoutExtension = [imageName stringByDeletingPathExtension];
        NSString *extension = [imageName pathExtension];

        result = [NSString stringWithFormat:@"%@-568h.%@",imageNameWithoutExtension, extension];
    }

    return [UIImage imageNamed:result];
}