Creating Launch Screen.xib for iOS8 ( ... iOS11, Swift 4 and LaunchScreen.storyboard )

You have two options:

  1. You make use of autolayout and give the imageview a fullscreen appearance (distance to top, bottom, left and right equals 0). This would however result in a clipping of the image for certain screen sizes, what you may not want. So you might want to consider (2)

  2. You place the launch screen image into an asset catalog and just put different images into the different size classes.


I found the answer useful.

The old steps in short for creating the LaunchScreen xib for iOS 8 are below the new steps.

With reference to XCode 9, Swift 3 or Swift 4 and LaunchScreen.storyboard following are the new steps.

First step is to create two images for Portrait and landscape mode splash ( png or jpeg ) in your favorite graphic software. ( If your app only support Portrait mode, you may skip Landscape mode image and settings. )

Portrait mode image :-

Create a 'splash-portrait' image with your own full background for size of "width 1125 x height 2436". Note that the background will clip on various sizes of devices.

Whichever info, graphic, you do not wish to be clipped should be created on center of above image in the size of "width 1125 x height 1471". This should always be in center of above full image.

Landscape mode image :-

Create a 'splash-landscape' image with your own full background for size of "width 2436 x height 1125". Note that the background will clip on various sizes of devices.

Whichever info, graphic, you do not wish to be clipped should be created on center of above image in the size of "width 860 x height 1125". This should always be in center of above full image.

Once both the images are ready, you may add it to xcassets or keep in resource.

Now go for the following steps.

1) "LaunchScreen storyboard" is already created with the new project. Open it.

2) Add an Image View on the view.

3) Set the above saved 'splash-portrait' image to image view source.

4) Set Image view 'Content mode' of Image as "Aspect Fill".

5) Add 4 constraints of Image View for Top, Bottom, Trailing and Leading to Superview.

This is done for the portrait mode app splash.

For landscape mode support, do the following extra steps. ( you may refer full answer by @Sakiboy at https://stackoverflow.com/a/46089856/2641380 )

6) Click the + button next to the Image view source that you set up in step 3.

7) From the pop-up that is now displayed select Regular for both the Width and Height selectors. This is specifying a new adaptive set for iPads that are in landscape. A new image source field will appear with the title wR hR. Add the 'splash-landscape' image to the wR hR Image source field so the storyboard knows to use a different image when in landscape.

8) Now we need to add support for the 'iphone plus' devices when in landscape. So click the + button next to the Image source field again.

9) This time select compact for the height and regular for the width selectors. This is specifying a new adaptive set for “iPhone plus” devices that are in landscape. A new image source field will appear with the title wR hC.

10) Add the “splash-landscape” image to the wR hC Image source field so the storyboard knows to use a different image when in landscape on an “iPhone plus device”.

As iPad devices are "Regular for both the Width and Height", We will see 'splash-landscape' image in iPad for both portrait and landscape mode. Width 860 for displayable content in 'splash-landscape' image will show full content in both portrait and landscape mode.

The old steps in short for creating the LaunchScreen xib for iOS 8.

1) create a new "LaunchScreen xib" from new file --> user interface --> launch screen ( keep auto layout ON ).

2) Add an image view in the xib --> view (main view).

3) set splash image to it ( the image should not be in assets file ).

4) set image as "Aspect Fit" ( if required ).

5) you may also change the "view" (super view) background color as close to background color of image.

6) select the image view, click from menu - editor - pin - bottom space to super view.

7) this will show red error mark near "view" ( super view of image view ).

8) click on the error mark, you will see approximate two auto layout errors.

9) on clicking on the error you will find menu with auto fix the layout errors.

10) on fixing the errors, you will find total four "Constraints" with "vertical" and "horizontal" space between superview and image.

11) now you may test them in different devices or simulators.

Regards.