How to add Images for different screen size from Assets.xcassets in Xcode 8?

Question

I create different sizes of background image for my Login screen.
I refer to the apple link https://developer.apple.com/ios/human-interface-guidelines/graphics/launch-screen/
But I'm not doing Launch Screen and I just want to add background to Login screen.

I would like to know which is 1x , 2x and 3x ?

Another problem is when I create Image Set, which size of image should be drag to which place. I have no idea of about that. Or do we need only 3 images (in universal row)?
And then , how about for Landscape image? Where should I put this?

See my answer at https://stackoverflow.com/a/52888548/2892357 — Ihar Katkavets, Oct 19 '18 at 08:27

Rashwan L · Accepted Answer · 2017-05-16T08:15:09.570

9

I would have created the following sizes:

iPhone:

@1x - 640 x 1136 (iPhone SE)
@2x - 750 x 1334 (iPhone 7, 6S)
@3x - 1242 x 2208 (iPhone 7 Plus, iPhone 6S Plus)

iPad:

@2x - 2048 x 1536 (iPad Air, Retina iPad 1st & 2nd Generation / 3rd & 4th & Pad Mini 2nd & 3rd Generation)

edited May 16 '17 at 08:15

answered May 16 '17 at 07:53

Rashwan L

38,237
7
103
107

bro how about for iPad bro? – May Phyu May 16 '17 at 07:58
bro @RashwanL, did you also create for Landscape? – May Phyu May 16 '17 at 08:10
For landscape it´s the opposite say for iPhone 7 @2x portrait it´s 750 x 1334 and for landscape its 1334 x 750. Did you get that? – Rashwan L May 16 '17 at 08:16
Yes bro. But I don't know where to drag. So, for portrait version, should I create another image assets ? – May Phyu May 16 '17 at 08:19
@MayPhyu, I think it´s enough to just drag them in to the asset catalog. – Rashwan L May 16 '17 at 08:24
I mean for portrait version is I create the size as you said and I will drag (plz see above my image). But for landscape , I should create another image assets? – May Phyu May 16 '17 at 08:27
Yes, just drag them into to the asset catalog and Xcode will automatically suggest the best option for you. – Rashwan L May 16 '17 at 08:28
I mean, I need to create another New Image set. isn't it bro? – May Phyu May 16 '17 at 08:30
@MayPhyu, yes you should. – Rashwan L May 16 '17 at 08:31
I already clicked useful button. Now, I click acceptance answer . – May Phyu Sep 14 '17 at 02:40
Hey @MayPhyu did you solved your issue? If yes please send me the screenshot of that asset. – iOS Lifee Jan 30 '18 at 12:01
@RashwanL As there are only 1x,2x and 3x places available in the assets folder, where should be the 4th image for iPad be placed in the assets folder? – Md Rais Feb 28 '19 at 07:01

score 2 · Answer 2 · answered May 16 '17 at 07:54

2

Actually, you need to coding for this.

First, you put images in Assets separately with different names.

Second, use following code:

    var backgroundImageName = ""
    switch UIScreen.main.bounds.height {
        case 480:
            //for iPhone4s,
            backgroundImageName = "background_iPhone4s"
            break;
        case 568:
            //iPhone SE, iPhone5, iPhone 5s
            backgroundImageName = "background_iPhone5"
            break;
        case 667:
            //iPhone 6, 6s, 7
            backgroundImageName = "background_iPhone6"
            break;
        case 736:
            //iPhone 6 plus, 6s plus, 7 plus
            backgroundImageName = "background_iPhonePlus"
            break;
        default:
            break;
    }
    backgroundImageView.image = UIImage(named: backgroundImageName)

answered May 16 '17 at 07:54

Yun CHEN

6,450
3
30
33

So, you create 4 image assets ? and in each image assets, there will be 1x,2x and 3x? – May Phyu May 16 '17 at 08:00
Yes, 4 image assets. For plus devices, put image in 3x, keep empty for 2x and 1x. For others, put image in 2x, keep empty for 3x and 1x. 1x is never needed(The old devices are very rare now) – Yun CHEN May 16 '17 at 08:01
Ok. May I know which sizes did you create including ipad – May Phyu May 16 '17 at 08:05
For non-retina iPad, height is 512. Retina iPad', 1024. iPad pro 12.9", 1366. It's better to test them on emulator. – Yun CHEN May 16 '17 at 08:12
@YunCHEN please have a look at my answer https://stackoverflow.com/a/52888548/2892357 – Ihar Katkavets Oct 19 '18 at 08:28

score 0 · Answer 3 · answered Mar 07 '18 at 21:14

I agree with Yun CHEN, as I think the most bulletproof solution is to have an Image Set for each resolution, thus avoiding image scaling performed on the device.

It is also correct that, on the basis of the rendering factor (2x, 3x, etc.) of the device (e.g. 2x on 4.7" iPhones, as the iPhone 8), you only need to put your appropriately sized image in the respective slot. For instance, the Image Sets for iPhones 8 only require the 2x image.

However, mind the following:

UIScreen.main.bounds.height returns the height of the logical resolution - i.e. points, contrarily to UIScreen.main.nativeBounds.height that returns the height of the actual resolution - i.e. pixels (actually, UIScreen.main.nativeBounds.height always returns the pixel height of the device in Portrait mode, even if you are in Landscape). You should always use images that match the actual resolution - i.e. pixels, even if you check for points.
From iOS 8 onwards UIScreen.main.bounds.height will return different values whether your device is in portrait or landscape mode. Therefore, if you want to use it to differentiate among devices, you should check for all the values that your App can use, and you should have a separate Image Set for each.

For instance, for Apps that work in both portrait and landscape modes:

    var backgroundImageName = ""
    if UIDevice().userInterfaceIdiom == .phone
    {
        switch UIScreen.main.bounds.height
        {
        case 812:   // 5.8" (iPhone X) (3x) (Portrait)
            backgroundImageName = "background_1125x2436"
        case 736:  // 5.5" (iPhone 8+, 7+, 6s+, 6+) (3x) (Portrait)
            backgroundImageName = "background_1242x2208"
        case 414:  // 5.5" (iPhone 8+, 7+, 6s+, 6+) (3x) (Landscape)
            backgroundImageName = "background_2208x1242"
        case 667:  // 4.7" (iPhone 8, 7, 6s, 6) (2x) (Portrait)
            backgroundImageName = "background_750x1334"
        case 375:
            // 5.8" (iPhone X) (3x) (Landscape)
            if (UIScreen.main.bounds.width == 812) {
                backgroundImageName = "background_2436x1125"
            }
            // 4.7" (iPhone 8, 7, 6s, 6) (2x) (Landscape)
            else if (UIScreen.main.bounds.width == 667) {
                backgroundImageName = "background_1334x750"
            }
        case 568:  // 4.0" (iPhone SE, 5s, 5c, 5) (2x) (Portrait)
            backgroundImageName = "background_640x1136"
        case 320:  // 4.0" (iPhone SE, 5s, 5c, 5) (2x) (Landscape)
            backgroundImageName = "background_1136x640"
        default:
            break
        }
    }
    else if UIDevice().userInterfaceIdiom == .pad
    {
        switch UIScreen.main.bounds.height
        {
        case 1366:  // 12.9" (iPad Pro 12.9) (2x) (Portrait)
            backgroundImageName = "background_2048x2732"
        case 1112:  // 10.5" (iPad Pro 10.5) (2x) (Portrait)
            backgroundImageName = "background_1668x2224"
        case 834:  // 10.5" (iPad Pro 10.5) (2x) (Landscape)
            backgroundImageName = "background_2224x1668"
        case 1024:
            // 12.9" (iPad Pro 12.9) (2x) (Landscape)
            if (UIScreen.main.bounds.width == 1366) {
                backgroundImageName = "background_2732x2048"
            }
            // 9.7" & 7.9" (iPad Pro 9.7, iPad Air 2, iPad Air, iPad 4, iPad 3, iPad Mini 4, iPad Mini 3, iPad Mini 2) (2x) (Portrait)
            else if (UIScreen.main.bounds.width == 1366) {
                backgroundImageName = "background_1536x2048"
            }
        case 768:  // 9.7" & 7.9" (iPad Pro 9.7, iPad Air 2, iPad Air, iPad 4, iPad 3, iPad Mini 4, iPad Mini 3, iPad Mini 2) (2x) (Landscape)
            backgroundImageName = "background_2048x1536"
        default:
            break
        }
    }
    self.backgroundImageView.image = UIImage(named: backgroundImageName)

and so on if other devices need to be included (e.g. Apple Watch).

How to add Images for different screen size from Assets.xcassets in Xcode 8?

3 Answers3

Linked