CODEWITHSUNDEEP
iosxcodeiphone-x
santhoshkumar
santhoshkumar

Reputation: 201

Background image stretching in iPhone X

Currently we are using image asset with @1x, @2x and @3x which will support for all devices. But when we use the same image asset for iPhone X, the @3x image looks stretched in iPhone X. So please let me know how to support for the iPhone X device with the same image asset or is there any solutions available to overcome this issue.

Upvotes: 0

Views: 4620

Answers (3)

Ihar Katkavets
Ihar Katkavets

Reputation: 1570

THIS IS UNOFFICIAL TRICK TO DEFINE IMAGES FOR DIFFERENT SCREEN SIZES (iPhone XS Max, iPhone XS, iPhone Xr).

I found a trick. In my application we have launch screens for all iPhone Devices (see screenshot). Lanuch screen example

Next screen which appears after Launch screen is Login. It should have the same image like Launch screen. Unfortunately Xcode creates the following image set in Assets out of box (iPhone 1x, 2x, 3, iPad 1x, 2x - see image). Xcode generates Image Assets template

And during transitions from Launch Screen to Login screen I see artifacts because Image stretching on iPhone X, Xs Max, iPhone Xr

To fix the issue I copied Contents.json file from LaunchImage.launchimage folder to BackgroundImage.imageset folder in Finder (see steps on image below) copy steps

And now in Xcode I see the following templates. I can define background image for the following devices Retina HD 4.7"(iPhone 6, iPhone 7, iPhone 8), Retina HD 5.5" (iPhone 6 Plus, iPhone 7 Plus, iPhone 8 Plus), iPhone Xr, iPhone X/iPhone Xs, iPhone Xs Max Result

Upvotes: 0

Martin Muldoon
Martin Muldoon

Reputation: 3428

An alternative is to select Aspect Fill. Then lower down in attribute inspector select Clip to Bounds. The image will fill your UIIMageView, but based on the Aspect Ratio will clip it to "remove" that part of the image that doesn't fit the view.

The only way to avoid all of this is to have an image with an aspect ratio (width to height) that matches the aspect ratio of your UIImageView.

Upvotes: 2

WYS
WYS

Reputation: 1647

Images will only get stretches if you are using scaleToFill. Try changing the content mode of the UIImageView or whatever you are using to show the image.

Upvotes: 0

Related Questions