How to make a fullscreen image for all resolutions

Question

I'm updating an old app which has a full-screen image on the main page. What sizes and ratios of images do I need to provide to support iPhone 4, 5, 6, and 6+?

How can I use Asset Catalogs to set all of these resolutions once and have it "just work"? I have a UIImageView set to fill the main view already. I'd like to just point it at an asset group or something.

Answer 1

Here's my solutions. It might not be the best, but I guarantee it will work.

1. Make copies of your original image, and resize those copies for different screen sizes. For iPhone 4, you need 320x480 @2x, 320x568 @2x for iPhone5, 375x667 @2x for iPhone 6, and 414x736 @3x for iPhone 6+. Remember the unit is point not pixel. Here's a link about the detail iPhone screen sizes:iPhone Screen Sizes

2. Detect your screen size in run time and load different images to fit the screen. You can do this by the add the following code as a category to UIImage class.

Code:

#define IPHONE44S       480
#define IPHONE55S       568
#define IPHONE6         667
#define IPHONE6PLUS     736

#import "UIImage+ZCDynamicUImageSize.h"

@implementation UIImage (ZCDynamicUImageSize)

+(UIImage *)dynamicSizedImageWithName:(NSString *)name{
    CGFloat screenHeight = [UIScreen mainScreen].bounds.size.height;
    UIImage *image;
    if (screenHeight == IPHONE55S) {
        image = [UIImage imageNamed:[NSString stringWithFormat:@"%@-568",name]];
    }
    else if (screenHeight == IPHONE6){
        image = [UIImage imageNamed:[NSString stringWithFormat:@"%@-667",name]];
    }
    else if (screenHeight == IPHONE6PLUS){
        image = [UIImage imageNamed:[NSString stringWithFormat:@"%@-736",name]];
    }
    else{
        image = [UIImage imageNamed:[NSString stringWithFormat:@"%@-480",name]];
    }
    return image;
}

3. Change the name of all your images with name followed by it's height. For example, your image name is "MyImage.png", and it's the image for iPhone5, and change it's name to "[email protected]".

4. Last, load your image by using the method created on step 2, then center the image to the center of the view.