Lauchscreen.storyboard landscape splashscreen

Question

I am using lauchscreen.storyboard for splashscreen in my iOS application. I have added splashscreen image in the storyboard. When app is lauchning, portrait splashscreen is coming correctly. But, when opening app in landscape mode, blue color appears in both right and left side of the splashscreen.

I tried setting different splashscreen image by adding variation. But, this storyboard takes any one portrait or landscape image only.

Let me know how to set two images in storyboard, one for portrait and one for landscape or the best practice to set splashscreen for both portrait and landscape orientation. I couldn't find any solution for this in the web though it seems to be a simple problem.

Answer 1

Setting the same launch image for both orientations:

1. Add an image to your LaunchScreen.storyboard's main controller's view and constraint all edges to superview (not safe Area)

Note: to change a constraint that is referencing SafeArea you can double click it on the inspector and change the respective item. Here are some screenshots for reference

2. Set the image's content mode to something that scales appropriately (scale to fill or aspect fill for example)

The setup should look like this (you can enable the previews on the right by clicking the assistance editor and switch from Automatic to Preview):

---

Setting different launch image depending on orientation:

1. Click on the + button next to your image

2. Add a customization for regular width & compact height

Your setup should look like this:

---

Update: What about the iPad?

Unfortunately, it seems that (at least up to Xcode10.1) is not possible to customize your launchscreen the same way for iPad, for a couple of reasons. The main one is that iPads are Regular x Regular for both portrait & landscape. The other reason is that you cannot use custom classes in your LaunchScreen.storyboard. Because if you could, you could subclass UIImageView and override the traitCollection with something like this (essentially would be treating the iPad as an iPhone sizeclass-wise):

override public var traitCollection: UITraitCollection {
    if UIDevice.current.userInterfaceIdiom == .pad && UIDevice.current.orientation.isPortrait {
        return UITraitCollection(traitsFrom:[UITraitCollection(horizontalSizeClass: .compact), UITraitCollection(verticalSizeClass: .regular)])
    }
    return super.traitCollection
} 

By the way, you can still use code like the above in the rest of the application for your windows/views if you want to solve similar problems.

I know that this is not what you were looking for in the answer, but I am afraid that (for now), you'll have to use static images in your Assets for handling iPad.

Answer 2

By default use portrait, Add variation to your image for landscape version with these selections.

Update your landscape picture here.

personally, I also recommend you to use AutoLayouts.

Run the app.

Example - Results -