2

I have a background image in my landscape app which covers the entire screen. I have added it to xcassets using @1x, @2x and @3x as usual.

On all devices, except for the iPhone X, the image displays correctly. However, because the iPhone X has a different aspect ratio than other iPhones, it is cropped at the sides. If I choose Aspect Fill, it is stretched and looks poor.

I have created an additional background image in the correct aspect ratio of the iPhone X, but how do I add it to xcassets? There are only options for @1x, @2x and @3x. Am I missing something?

(I must stress this is NOT a launch image - it's an image in an image view which serves as the background to all the screens on my app).

EDIT

For anyone else struggling with this, this was how I did it thanks to the4kman's help:

override func viewDidLayoutSubviews() {
    // Work out aspect ratio to show correct background image
    let imageWidth = background.bounds.width
    let imageHeight = background.bounds.height
    let aspectRatio = imageWidth / imageHeight

    if aspectRatio >= 2.0 {  // iPhone X ratio is 2.16, other iPhones are 1.77
        background.image = UIImage(named: "background-X")
    } else {
        background.image = UIImage(named: "background")
    }
}
Eatton
  • 455
  • 4
  • 20
  • I think you've swapped the width & height in the calculation of aspect ratio. If you're comparing to an aspect ratio value of `2.0` then the formula should be `let aspectRatio = imageHeight / imageWidth` – Paul Apr 24 '18 at 21:09

1 Answers1

3

You cannot have images with different aspect ratios in one image asset. You should add a different asset if you want to target the iPhone X specifically. Give it a suffix to distinguish it from the original image (for e.g. "-x").

Tamás Sengel
  • 55,884
  • 29
  • 169
  • 223
  • Thanks for the answer. So I currently have an asset called 'background' with 1x, 2x and 3x added. If I add another asset called 'background-x' and add the new image to the 3x box, how do I load it into the image view if the image view loads 'background'? – Eatton Feb 13 '18 at 16:15
  • @Eatton You should check whether the current view has a 2-to-1 aspect ratio by accessing the view's bounds and change the image view's image at runtime accordingly. – Tamás Sengel Feb 13 '18 at 16:16
  • I see what you're saying, but when I do myImage.bounds.width it always returns 568 no matter what device it runs on. How can I get the width & height to work out the aspect ratio? – Eatton Feb 13 '18 at 17:12
  • @Eatton Are you sure that you retrieved the size of the image after the layout was set up? Try to access it in `viewDidLayoutSubviews`. – Tamás Sengel Feb 13 '18 at 17:13
  • 1
    Ah yes, that did it. I was trying to detect the aspect ratio in viewDidLoad. Thanks for all your help! – Eatton Feb 13 '18 at 17:27