Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Lauchscreen.storyboard landscape splashscreen

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.

like image 312
Ramesh Avatar asked Oct 16 '22 07:10

Ramesh


2 Answers

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

enter image description here

enter image description here

  1. 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):

enter image description here enter image description here


Setting different launch image depending on orientation:

  1. Click on the + button next to your image

enter image description here

  1. Add a customization for regular width & compact height

enter image description here

Your setup should look like this:

enter image description here


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.

like image 164
Alladinian Avatar answered Nov 15 '22 12:11

Alladinian


enter image description here

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

enter image description here enter image description here

Update your landscape picture here.

personally, I also recommend you to use AutoLayouts.

Run the app.

Example - Results -

Landscape Portrait

like image 30
niku Avatar answered Nov 15 '22 12:11

niku