Adaptive launch screen storyboards: is there a way to differentiate iPad orientations?

I'm investigating the use of a storyboard for launch images for my app. The app has always used a large photo for the launch image, which is also used as the background for the first view. However the image is different when the app is launched in landscape on an iPad.

So is there any way to differentiate between an iPad in portrait and an iPad in landscape when using a an Adaptive storyboard for a launch screen? Because it's a launch screen I can't run any code, it would have to be done completely through the storyboard.

I found a solution using spacer views that position the correct image in the visible area and move the other one off screen (as suggested by David H).

You can't provide different images for different screen sizes (iPhone 4, iPhone X, ...), but if you want different images for iPhone and iPad and different images for portrait and landscape this solution is for you.

I created an example project on github if you want to try it out. It works on iPad and iPhone.

The important constraints are

PortraitSpacer.width ≤ 5 × view.width
PortraitSpacer.width ≤ 5 × view.height

LandscapeSpacer.width ≥ 5 × view.width
LandscapeSpacer.width ≥ 5 × view.height

PositionSpacer.width = 5 × view.width

where view.width and view.height are the main view's width and height.

The PortraitSpacer positions the portrait image at 5 × min(view.width, view.height), the LandscapeSpacer positions the landscape image at 5 × max(view.width, view.height), and the PositionSpacer has the same width as PortraitSpacer in portrait mode and the same width as LandscapeSpacer in landscape mode.

We multiply everything with 5 so the two images do not overlap. This works for all devices where the following is true

5 × min(view.width, view.height) + max(view.width, view.height) ≤ 5 × max(view.width, view.height)

In landscape mode this would mean

5 / 4 ≤ view.width / view.height

which is the case for all current devices: iPad has the lowest aspect ratio with 4:3 which is still greater than 5:4.

You can then of course configure images per device (iPhone, iPad) in the asset catalog.

Adaptive iOS launch screen, Adaptive iOS launch screen - different images for landscape and portrait (iPad and iPhone) But as iPads have regular height and regular width it's not possible to determine the orientation of the device within the launch screen storyboard. A launch screen lets you provide that seamless and adaptive experience while your app loads any pertinent information in the background, and you can create it directly in Xcode. Designing the right storyboard for your launch screen can make a world of difference in how quickly you can immerse people into your user interface.

Apple these days encourages you to think of rotation not in terms of device orientation, but just as an animated bounds change (sometimes with a semantic hint).

We saw why with the iPhone 6 Plus — what used to be a "phone, portrait" interface becomes a sidebar interface in landscape on certain phones.

The more your view controllers assume about devices and their orientation, the harder is is to adapt to new devices that offer new ways of reusing view controllers.

Also, UIDeviceOrientation is not the same as UIInterfaceOrientation. If you use the former to make UI decisions, you'll be stymied when the device is face-up or face-down, and (IIRC) your users will be frustrated when your app doesn't respect Orientation Lock.

So what's the difference between a landscape and portrait iPad? Both are Regular x Regular in traits... But one has bounds that are taller than they are wide, and vice versa. It's totally okay to make high-level layout decisions based on aspect ratio (and use auto layout for the details).

Adaptive Layout Tutorial in iOS 12: Getting Started, In this tutorial, you'll learn how to use Adaptive Layout in Xcode 10 with iOS 12, enabling you to reuse the same storyboard for multiple devices and orientations. they allow you to use the same storyboard for both iPads and iPhones. a single view controller, currently the size of an iPhone 8's screen:. Responsive Launch Screen Storyboards: Is there a way to differentiate iPad orientations? - ios Has anyone found a way to add list numbering to Protractor Describe blocks? - angularjs Can I be lazy to load a navigation property by delegating a stored procedure to EF? - stored-procedures

You actually can specify different launch screen images from inside of your LaunchScreen.storyboard with Xcode8. Using a LaunchScreen.storyboard is the preferred way of specifying a launch screen when targeting devices running iOS8 and above.

Here’s a quick step-by-step example of how to specify landscape images for the devices that support landscape launch screens:

  1. First add your your "splash screen" images to your projects Assets.xcassets. You should only need two separate Image Sets: one for portrait and one for landscape. Name them something like splash (this is the portrait image set) and splash-landscape (this is the landscape one).
  2. Now that you have your images in your projects assets go to your LaunchScreen.storyboard file. (I’m assuming you already have your launch screen view controller set up with the image and it’s constraints set up in the LaunchScreen.storyboard.)
  3. Select the ImageView that is in you launch screen’s viewcontroller.
  4. Go to the Assets Inspector for the ImageView.
  5. Add the "splash" image to the Image source field. This is your portrait image source.
  6. Click the + button next to the Image source field that you set up in step 5.
  7. From the pop-up that is now displayed select Regular for both the Width and Height selectors. This is specifying a new adaptive set for iPads that are in landscape. A new image source field will appear with the title wR hR. Add the "splash-landscape" image to the wR hR Image source field so the storyboard knows to use a different image when in landscape.
  8. Now we need to add support for the "iphone plus" devices when in landscape. So click the + button next to the Image source field again.
  9. This time select compact for the height and regular for the width selectors. This is specifying a new adaptive set for "iPhone plus" devices that are in landscape. A new image source field will appear with the title wR hC.
  10. Add the "splash-landscape" image to the wR hC Image source field so the storyboard knows to use a different image when in landscape on an "iphone plus device".

By following these steps you won’t have to write any code, do anything weird, or rely on the old launchScreen image sets. The LaunchScreen.storyboard will handle everything for you! It’s pretty neat.

For more information on Size Classes and the Interface Builder check out the awesome article: https://medium.com/@craiggrummitt/size-classes-in-interface-builder-in-xcode-8-74f20a541195

Edit: This is just a brief contrived example of what I think I did to get the SplashScreen images to work using separate image sets, adaptive sets, and constraints. It took a lot of messing around with to get it to work (pretty much a whole night and then some). It’s tough to explain the Interface Builder and all the different aspects of it in a step by step post. So use this answer and example as a guide to get to where you need to be. Also, the link above is very helpful. Also, who knows, maybe I’m just wrong or misunderstanding something...

Hope someone will find this helpful.

ios - iPad, I have an iPad app that has a different layout depending on its orientation. I want a The app is enabled for multi-tasking, so uses a Launch Storyboard. Adaptive launch screen storyboards: is there a way to differentiate iPad orientations? To accommodate the screen sizes of different devices and environments, such as multitasking, use an Xcode storyboard to provide a launch screen. Storyboards are flexible and adaptable, and you can use a single storyboard to manage all of your launch screens. For developer guidance, see Responding to the Launch of Your App.

The device orientation is pretty straightforward to check on the fly, and also receive notifications for orientation changes.

(Everything here is in Objective-C)

Head over to your App Delegate, and in your applicationDidFinishLaunchingMethod

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
//
//then call this, what we're telling the device is, "Hey, let me know when you change orientations!"

[[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications];

    //Not done yet, now we have to register a method to call on the notification
   [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(deviceOrientationDidChange) name:UIDeviceOrientationDidChangeNotification object:nil];
}

Now, you'll want to define the method that is called when the device is oriented.

so, somewhere in your app delegate...

- (void) deviceOrientationDidChange {
    UIDeviceOrientation orientation = [[UIDevice currentDevice] orientation];
    if (orientation == UIDeviceOrientationPortrait) {
        //do something if portrait
    }
    else {
         //do another thing if landscape
    }
}

And that's really all there is to it. You can then change your background image in that method!

Adaptivity and Layout - Visual Design - iOS, It's important to design an adaptable interface that provides a great In edge-to- edge devices like iPhone X and iPad Pro, the display has rounded To learn how screen resolution impacts your app's artwork, see Image Size and Resolution. Diagram of an iPad and an iPhone in both portrait and landscape orientations. I am trying to add the Launchscreen using storyboard for all possible iOS devices and have following setting in place. I have Image set named Launch with images for iPad and iPhones. Also, I have Added Launchscreen (Main.launchscreen) to the app in the following way: I cannot see the Launchscreen being used for iPad's .

How to create different layouts for portrait and landscape in a launch , It uses the size of the view controller to determine its orientation – regardless of the actual orientation (for example, the iPad Pro in split screen landscape mode I'm trying to create a launch storyboard for the app that shows its "blank state". Select iOS > User Interface > Launch Screen and click the Next button: Name the file LaunchScreen.xib and click the Create button: Edit the design of the launch screen by adding graphic elements and using Layout Constraints to position them for the given devices, orientations and screen sizes: Save the changes to LaunchScreen.xib.

Xcode Overview: Building for Multiple Screen Sizes, iOS and watchOS devices come in multiple screen sizes, and multitasking on of your user interface that are used to determine the run time sizes. a user interface instead of writing code to change sizes and orientations. Size Classes enable you to use one storyboard for all different sizes of screens. We can set different images for launch screen inside Launch screen nib file based on avaialble size classes. [Basically combinations of Any, regular and compact] There is no way to differentiate between iPad in portrait and iPad in Landscape orientation (both are regular width regular height).

Designing Adaptive Layouts for iPhone 6, Learn how to design adaptive layouts for iOS using auto layout, constraints, With four screen sizes (five if you're supporting the iPad), three resolutions and orientations to account for it just seems easier (and smarter) to start thinking When we add a view controller to a storyboard it's aspect ratio doesn't� Example of size classes on iPhone and iPad in different orientations. The size classes are introduced since iOS 8. For now, there are two properties for the size class, which are regular and compact .

Comments
  • You should be able to achieve that using size classes in your launchScreen.xib?
  • @Chris iPad size classes are regular height and regular width when in both portrait and landscape... so that's my question, how do you differentiate?
  • Take a look at stackoverflow.com/questions/9122149/…
  • You might be able to do this by adding both images, then using "placeholder" views between the images and say top border so that when in landscape, one image effectively moves off screen and the other stays.
  • @SeanR, if use the older method, set lauch images (we can set portait and landscape lauch images) not use size class, does this fit your question .
  • So, for the purposes of the launch image storyboard, there's no way to have a different launch image for iPad orientations? Because if it requires checks in code, these aren't done for the launch image storyboard.
  • Ah, I missed that you're looking at launch storyboards specifically. Sorry, I don't know of a way to customize those for orientation. (I dunno if that means there isn't one, but it might not be a bad idea to file a bug regardless.)
  • This is a great answer and very informative. But am I correct in that there is no way to differentiate iPad portrait and iPad landscape since they are both regular height / regular width?
  • hmmm, I don't know if you can "differentiate" between the the two at run time using this, but by using the technique described here you should be able to specify different images/constraints/sizes/etc for when an iPad is in portrait or landscape. I'm pretty sure my project does exactly this (it specifies a larger image size when the iPad is in landscape). If you're looking for a way to handle/figure out these things at runtime then this answer probably isn't it, as it just allows you to specify what the app does when in these different situations (without having to write code or anything).
  • I tried your solution and the "splash-landscape" image appears on iPad both in portrait and landscape. Because iPad is wR hR in both landscape and portrait, it uses the specified wR hR image. So in your example, "splash" will only appear for wC hR size classes. So yeah, I'm still leaning towards different images for landscape and portrait iPad launch screens not being possible.
  • Did anyone get solution for this? If yes, can you show us sample launch screen?
  • How you will define image sizes if iPad alone launch both portrait and landscape? Ex: iPad 9.7 Portrait size is an 768x1024 and landscape 1024x768. (image will streched) Here how you will give two different images?
  • Thanks, I know how to get the orientation in code. I want to know how to differentiate iPad orientations using adaptive size classes, specifically for the launch storyboard.