CODEWITHSUNDEEP
iosstoryboardsplash-screen
Ramesh
Ramesh

Reputation: 422

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.

Upvotes: 5

Views: 2636

Answers (5)

Suchith
Suchith

Reputation: 1527

Create two image set one for portrait and one for landscape iPhone and iPad as shown below.

enter image description here

Add variation as per the @Mojtaba Hosseini answer

Image size: Lanscape: iPhone : 2793 × 1290 pixels iPad : 2731 × 2048 pixels

Portrait: iPhone : 1290 × 2793 pixels iPad : 2048 × 2731 pixels

Upvotes: 0

Mojtaba Hosseini
Mojtaba Hosseini

Reputation: 119108

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)

SizeClass

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

[1[2] 2

- Working example:

working example

Upvotes: 1

niku
niku

Reputation: 492

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

Upvotes: 1

Yogesh Tandel
Yogesh Tandel

Reputation: 1754

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

enter image description here enter image description here

Upvotes: 0

Alladinian
Alladinian

Reputation: 35616

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.

Upvotes: 1

Related Questions