5

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.

Eric Aya
  • 69,473
  • 35
  • 181
  • 253
Ramesh
  • 392
  • 1
  • 12
  • 39
  • 1
    Please check have you assign in Image assets for both modes and also check the same asset and app landscape mode would be same. –  Feb 04 '19 at 05:09
  • 1
    You need an image that can scale using `aspectFill`; there will be some clipping depending on the device and the device orientation. – Paulw11 Feb 04 '19 at 06:06
  • I tried using aspectFill. It doesn't work. It has same effect. – Ramesh Feb 04 '19 at 08:56
  • @iOSTeam I am not using LauchImage to set landscape image in ImageAssets. Instead I am using lauchscreen.storyboard where I want to set two images, one for portrait and one for landscape. – Ramesh Feb 04 '19 at 08:59
  • 1
    Is there any specific case you are not using image assets launchImage ? –  Feb 07 '19 at 06:07
  • @iOSTeam If I use launchImage, the app renders all screens in low resolution in iPad Pro. It can be because Apple stopped supporting launchImage. – Ramesh Feb 07 '19 at 07:17
  • 1
    @Ramesh Can you post your screenshot which is creating an issue so that will be better to help you out for your problem. –  Feb 07 '19 at 09:04
  • 1
    Just refer this link it will help https://stackoverflow.com/questions/26460216/adaptive-launch-screen-storyboards-is-there-a-way-to-differentiate-ipad-orienta –  Feb 07 '19 at 09:38
  • 1
    @Ramesh Can you share your launchScreen image or layout of LaunchScreen ? – Pratik Sodha Feb 08 '19 at 05:44

4 Answers4

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

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.

Alladinian
  • 34,483
  • 6
  • 89
  • 91
  • I tried the steps you provided. But still the behavior doesn't change. FYI, the app is only for iPad. I guess iPad has both regular height & regular width. So setting height as compact height might not work in iPad. Please suggest some other way. – Ramesh Feb 07 '19 at 07:23
  • Well that was a crucial bit of information :P Anyway, I have edited the answer to include my opinion regarding the iPad – Alladinian Feb 07 '19 at 10:05
  • It seems to be a simple functionality but not achievable in iOS? Then, what options developers are going for to display splashscreens in iPad differentiating landscape & portrait usually? Why doesn't Apple allow to do this simple functionality? I feel there must be some options out there but we do not aware. – Ramesh Feb 08 '19 at 11:19
  • 1
    It might seem like a simple functionality, but design-wise Apple promotes a device-agnostic model (adaptive). So, their reasoning is that you provide designs for semantics like 'compact' or 'regular' and the system takes care of the rest without caring about the actual device (for example an external screen connected to an iPhone). I doubt that we are all missing something that is really obvious (although I would love to be wrong about this). Finally, all of these apply _only_ for Storyboard based launchscreens (currently). – Alladinian Feb 08 '19 at 12:09
1

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

Mojtaba Hosseini
  • 95,414
  • 31
  • 268
  • 278
  • I tried adding seperate image for wR hR. But still the result is same. I am able to set only one image either for portrait or landscape. – Ramesh Feb 11 '19 at 07:13
  • What do you mean “you're not able”? What blocks your way. – Mojtaba Hosseini Feb 11 '19 at 16:14
  • If I set landscape image as wRhR image, it overrides the normal image already set. – Ramesh Feb 11 '19 at 16:28
  • Can you show me what do you want to achieve by some screenshots? – Mojtaba Hosseini Feb 11 '19 at 16:38
  • It is simple. I have two images to show as splashscreens. one for portrait and one for landscape. I am unable to configure these two images somewhere in lauchscreen.storyboard in iOS. I am unable to use lauchImage concept also as It shows low resolution if we use that. – Ramesh Feb 11 '19 at 16:51
  • I think you need some more complicated layout for your launch screen. If you could show me what you desire (An image of portrait state and landscape state in Sketch or PS or etc.) I could try to help you with the layout idea and constraints. – Mojtaba Hosseini Feb 11 '19 at 17:02
  • I just would like to show splashscreen both in portrait and landscape mode accordingly. As of now portrait mode it is coming correct. But, for landscape it is showing extra blue color in both the sides as portrait image only is fitting in for landscape also. – Ramesh Feb 12 '19 at 05:25
  • Right. just send a picture of the state that shows blue lines. – Mojtaba Hosseini Feb 12 '19 at 06:47
  • I double checked on iPhone 8 and added a screenshot of the test to my answer. You should consider your custom settings for you custom case. And if you can not match your needs with size class settings, I'm wondering you should probably use `image asset` instead of `interface builder`. – Mojtaba Hosseini Feb 13 '19 at 13:41
  • Actually I think in iPhone it will work as It has compact size. But, iPad has regular size for both of height and width. That is the problem – Ramesh Feb 14 '19 at 07:57
  • Yes because the orientation of the device has nothing to do with the size of the main window. You should consider the actual `size`. iPad landscape screen is big enough to fit in any objects that fits in portrait mode. **IF** you **MUST** change it as your need, you must split image components and use `auto layout` or use `image assets` my friend. – Mojtaba Hosseini Feb 14 '19 at 08:40
1

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

niku
  • 472
  • 3
  • 12
  • Actually I think in iPhone it will work as It has compact size. But, iPad has regular size for both of height and width. That is the problem – Ramesh Feb 14 '19 at 07:58
  • You cannot distinguish iPad orientation with this method. iPad consider Regular Height and Width for both orientations. – niku Feb 14 '19 at 10:30
0

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

Yogesh Tandel
  • 1,738
  • 1
  • 19
  • 25