How to Add iPhoneX Launch Image

Question

Using Xcode Version 9.0 (9A235), I am trying to add a Launch Image for iPhoneX at the requested 2436px × 1125px (landscape). Currently I am using a Storyboard and it looks like this:

'launchimage' is an Image View linked to an Image Set:

And the Image Set is as follows:

The only place I get an iPhoneX sized image is in a Launch Image set:

But when I try to select a Launch Image in the Image View on the storyboard it can't be selected:

Any help on how to add the correct sized launch image for iPhoneX or is it back to Launch Images? I would prefer the correct sized image, not a stretched one.

UPDATE:

I would like to explain why I want the image to be exactly the same pixel per pixel. Following the Guidelines in https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/launch-screen/ my launch image is a static version of the first page of the App. If the Launch Image is stretched then there is a noticeable switch from Launch Image to First Page. Which sort of defeats the object of the guidelines. Apple recommend using a storyboard launch, but it seems you can't follow their guidelines if you do. Typical, really.

Answer 1

If your used the LaunchImage.launchimage for Launch, the solution is (in Xcdoe 9.0):

1. Select Assets.xcassets, right click on middle pane, select App Icons & launch Images -> New iOS Launch Image . Then move the old LaunchImage.launchimage images to the new one, and add the image size with 1125×2436 px for the iPhoneX.

2. Also, you can add the following json object to Contents.json file which on LaunchImage.launchimage folder in your old project。Once Xcode refreshes, just drop in a 1125×2436px image. If you need landscape, you can add another with the orientation.

 {
      "extent" : "full-screen",
      "idiom" : "iphone",
      "subtype" : "2436h",
      "minimum-system-version" : "11.0",
      "orientation" : "portrait",
      "scale" : "3x"
    }

Answer 2

To the 2018 lazy devs like me who has an existing project that has an old version of launchimage (with no iPhoneX variant), here's my solution to support iPhone X - this is a shortcut one for you.

1. Open Assets.xcassets in your Xcode.
2. Right click in your LanchImage then select Show In Finder.
3. Open the Contents.json
4. Paste the follow codes inside your "images" array.

 {
  "extent" : "full-screen",
  "idiom" : "iphone",
  "subtype" : "2436h",
  "filename" : "ipxportrait.png",
  "minimum-system-version" : "11.0",
  "orientation" : "portrait",
  "scale" : "3x"
},
{
  "extent" : "full-screen",
  "idiom" : "iphone",
  "subtype" : "2436h",
  "filename" : "ipxlandscape.png",
  "minimum-system-version" : "11.0",
  "orientation" : "landscape",
  "scale" : "3x"
},

Replace of course the filename with appropriate images. Voila!

Answer 3

If I understood correctly, you are using a storyboard as a Launch Screen with image view, right?

If so, in you Launch Screen storyboard select to view as iPhone X:

Then add your image view so it fills the entire area like this:

and pin it to the superview with constants of 0. It's important to do this with iPhone X selected, because otherwise you would probably pin to Top Layout Guide, which you don't want to, because it will leave you with a gap at the top.

Your constaints should look like this (pinned to Superview):

Answer 4

In portrait orientation, the width of the display on iPhone X matches the width of the 4.7" displays of iPhone 6, iPhone 7, and iPhone 8. The display on iPhone X, however, is 145pt taller than a 4.7" display, resulting in roughly 20% additional vertical space for content.

Probably, your image is ok, but try to cleaning (cmd + K) and rebuilding the project.

If it does not helps, then remove this image from Xcode and re-add it again by dragging those images into Xcode. And re-build it. It should work.

Answer 5

Using Xcode Version 9.1 (9B55), thanks to the answers above (especially Stoull), however my experience is slightly different. My original question was basically: "How to get launch image (in storyboard or LaunchImage) which matches the bg of the first game scene without a rescaling blip on all resolutions?"

I have resolved this and it works using LaunchImage. However, there are complications.

Add a LaunchImage to the Assets folder, then specify it in the project settings:

Then you would expect to do this:

resulting in:

BUT on Build you get the warning:

so you need this for the LaunchImage:

resulting in:

and there is no warning.... and LaunchImage works on all iPhones/iPads.

The image sizes are:

iPhoneX (iPhone X Landscape iOS 11+) : 2436 x 1125

Retina HD 5.5" (iPhone Landscape iOS 8,9) : 2208 x 1242

2x (iPhone Portrait iOS 7-9) : 640 x 960

Retina4 (iPhone Portrait iOS 7-9) : 640 x 1136

1x (iPad Landscape iOS 7-9) : 1024 x 768

2x (iPad Landscape iOS 7-9) : 2048 x 1536

The system is clearly messy and needs a proper revamp by Apple.

Answer 6

You can keep larger size image as 3x image in your image set! I mean 1125px × 2436px is 3x resolution of 375pt × 812pt.

so, in your image set replace old 3x image with the image havign size of 1125px × 2436px and your launchscreen (storyboard or xib) will not stretch i think!

Answer 7

EDIT:
I wanted to stress, that it's possible to add Launch Image for iPhone X, but @Christian Cerri was asking for adding NORMAL image to Image View in LaunchScreen.storyboard specifically for iPhone X, which is impossible.

Original Answer:
There's no possibility to add an image specifically for iPhone X to asset catalog (because it uses @3x), so you should probably use launch images for that, if you want another image just for iPhone X.

Answer 8

I removed image view from xib and clean derived data & build. Again added plain image view and than set image after setting constraints (leading, trailing, top, bottom) to superview. That worked well.