CODEWITHSUNDEEP
iosasset-catalog
D Surya Praveen
D Surya Praveen

Reputation: 341

xcode - asset catalog - image type - same scale - different resolutions

I have an iOS application which is developed years ago and sets backgrounds of many controls using images.xcassets catalog. The images are set using contents.json in which targets are iPhone, iPad using 'idiom' key. Further specifications include 'scale' & 'filename'. Seems that this app worked fine until iOS 8.

As of today there are many high screen resolution devices of iPhone, iPad. So, I need to add further more images targeting these high screen resolution devices.

I don't know how it is handled earlier, but now there are different screen resolutions in the same scale factor. For e.g., iPad Pro 12.9" & iPad Pro 11" have '2x' as scale factor but has different resolutions '2048x2732' & '1668x2388' respectively. Now if I create an image targeting highest resolution 2048x2732, the image is not getting centered for resolution 1668x2388.

  1. Is there any particular key in contents.json that can differentiate screen resolutions/sizes for the same scale factor?
  2. When I search for Apple's documentation for asset catalog it is found in this documentation archive. Does that mean we shouldn't use asset catalog for images any more? Are there any latest standards for setting background images?

Upvotes: 0

Views: 979

Answers (1)

Emre Önder
Emre Önder

Reputation: 2537

There are two options you can follow for setting background images for different devices.

1-) Setting UIImageView content mode to .aspectFill. By settings this property, your image will be croped for different aspect ratios but original aspect ratio will be protected. I recommend this option If you use repetitive images for background.

2-) Setting two different asset file for different aspect ratio and resolution. If you follow this option, in code, you need to check for the device and set the proper image asset. 

let image: UIImage!
if UIDevice().userInterfaceIdiom == .phone {
switch UIScreen.main.nativeBounds.height {
    case 1920, 2208:
        print("iPhone 6+/6S+/7+/8+")
        image = UIImage(named:"StandartBackground.png")
    case 2436:
        print("iPhone X, XS")
        image = UIImage(named:"XBackground.png")
    case 2688:
        print("iPhone XS Max")
        image = UIImage(named:"XSBackground.png")
    }
}

Advice: Common and proper way is first option but there will be cases which won't suite it. Therefore, try to avoid second option but If have no other option. Put every different aspect ratio to different asset file.

Upvotes: 1

Related Questions