Lauchscreen.storyboard landscape splashscreen - ios

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:
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
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:
Click on the + button next to your image
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 -

Answer 3

how to set two images in storyboard?
iOS has sizeClass for almost anything you can see. You can choose image, color, etc for any situation you need based on size of the main window of your application (Not only orientation of the device)
It's more convenient. Because maybe the device is in landscape mode but it's in split screen of iPad 🤷🏻‍♂️. So let OS decides what is best match for the size situation.
- Size Classes in interface builder
[
- Working example:

Answer 4

Make use of Vary for traits as shown ion screenshots. I have tried this and has worked for me.