Adaptive Launch Screen Storyboards: How to Differentiate iPad Orientations

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

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.

Constraints in Interface Builder

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.

How does one sync storyboards, orientation, launch-images and view background images

There are options :-

1) if ios 6 you can use autolayout . 2) you can set frames for the uicontrols separately and use these two methods if ios 6

-(BOOL)shouldAutorotate
{
return YES;
}
- (NSUInteger)supportedInterfaceOrientations
{
return UIInterfaceOrientationLandscapeLeft ;//return UIInterfaceOrientationMaskAll;
}

and after this whereever required like in ViewDidlOAd() and viewWillAppear() do this

if(UIInterfaceOrientationIsPortrait([UIApplication sharedApplication ]statusBarOrientation))
{
// change frames
}
else
{
// for landscape change frames here
}

iOS < 6.x

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation // Deprecated in iOS 6.x 
{
return UIInterfaceOrientationIsLandscape(interfaceOrientation);
}

Creating Launch Screen.xib for iOS8 ( ... iOS11, Swift 4 and LaunchScreen.storyboard )

You have two options:

  1. You make use of autolayout and give the imageview a fullscreen appearance (distance to top, bottom, left and right equals 0). This would however result in a clipping of the image for certain screen sizes, what you may not want. So you might want to consider (2)

  2. You place the launch screen image into an asset catalog and just put different images into the different size classes.

Supporting iPhone 6 and iPhone 6+ with different launch/splash screen image for iPad Portrait and Landscape orientations

You don´t have to use the launch screen file to make your App iPhone 6 / 6+ resolution compatible. Instead, you can select the LaunchImage asset as your Launch Images Source.

It can be found at "App Icons and Launch Images" under your Targets:

Sample Image

If there is no LaunchImage asset just go to your Images.xcassets, make a secondary click (right click) and select "New Launch Image":

Sample Image

The result is something like that:

Sample Image

Now just drag and drop your images for the specific resolutions you want to support and set the created LaunchImage asset as your source.

Hope it helps

Cheers



Related Topics



Leave a reply



Submit