03With iOS 8, getting the right launch screen has become a real pain. If you support only iOS 8, and you don’t need iPad, or everything is Portrait or some such, you’re fine.

With one of the apps I work on for Five Pack Creative, I need to support Landscape-only, iPad and iPhone, iOS 7 and 8. And man, getting the Launch screen correct has been tough. There are several choices — launch image catalogs, a launch nib/xib, and launch filenames. For Landscape, both types of device, both iOS versions, I’ve only found one approach that works for sure.

First, for iOS 7, you need to use the filenames approach. If you have any entries in your Info.plist related to launch screens, delete them. Just use the standard filenames.

  • Default.png : 320×480 rotated — not used, but it’s the base filename
  • Default@2x.png : 640×960 rotated — for the iPhone 4, 4s on iOS 7.x
  • Default-568h@2x.png : 640×1136 rotated — for the iPhone 5, 5c, 5s on iOS 7.x
  • Default-Landscape.png : 1024×768 — for the iPad 2 and Air
  • Default-Landscape@2x.png : 2048×1536 — for retina iPads

Don’t use an Asset Image Catalog for iOS 7!! Just create a folder, then add those screens to your project, creating a Group for the Folder as they are copied in. The folder will be created under your project. This is IMPORTANT — don’t just drag in individual screens. It’ll work, but not when you have another target, e.g. a free version and a paid version of your app. You’ll need the exact same filenames with different images for the various versions of your app. Putting them in differently-named folders before adding the entire folder (and create a group) works best. DON’T use Folder references — iOS can’t find your launch images if they are under a folder reference — it must be a group.

Now, for iOS 8, you’re going to use a Launch.xib file and asset images. I’ve seen places where people assert that you can use filenames, manually editing your Info.plist. I guess that approach works for them, but I couldn’t get it for my specific situation. Using their solutions prevented iOS from properly detecting an iPhone 6 — it ran it in scaled iPhone 5 mode.

Create a new launch screen (File, New File, User Interface, Launch Screens). Add that to your target settings (Project, Targets, General, Launch Screen File). Select the XIB and add an ImageView to the View. Size it to match the View, then make sure you have the proper Size Class selected before adding Constraints. You want Regular/Regular (iPad Landscape).

ConstraintsWith the ImageView selected, select the class using Editor/Size Class/Regular Width/Regular Height. At the bottom of the Interface Builder screen, you should see “wRegular hRegular”, indicating the size class you are editing. Add the constraints by Ctrl-Drag from the ImageView to the View. Hold the Shift key to select multiple items — Leading, Trailing, Top, Bottom. That should create your constraints with zero as the constants. Don’t worry about the View (frame) height and width — your size class images will take care of all that.

So now you need images for your ImageView. You are going to use some of the same ones. First, if you don’t have an image asset catalog for your specific target, add one (File/New File/Resource/Asset Catalog). Add a new set (click the + button) and call it Launch.

Okay, now for the really cool part, and where it all comes together easily. When you added the Launch image set (not to be confused with a Launch Image Source setting in your Target — we could have called it “Monkeys” instead of “Launch”), you’ll see 3 spots for images (1x 2x 3x) and underneath, “Universal”. Over on the right sidebar, you should see Devices, Width, Height, etc… Change Devices from Universal to Device Specific, and select iPhone, Retina 4-inch and iPad. Change Width to Any & Regular.

Now you should have two sections: iPhone and iPad, and two rows of boxes.

Launch-assets

All you have to do now is fill the boxes with the appropriate images, and you’re done! The [* *] and such have specific meanings. The documentation is very good for this — https://developer.apple.com/library/ios/recipes/xcode_help-image_catalog-1.0/chapters/CustomizingImageSetsforSizeClasses.html.

  • 1x [* *] iPhone is a landscape 480×320 — same as Default.png, but not rotated.
  • 2x [* *] iPhone is Default@2x.png, not rotated
  • Retina 4 2x [* *] iPhone is Default-568h@2x.png, not rotated.
  • 3x [* *] iPhone is 2208×1242.
    • The [+ *] versions are exactly the same — but you have to copy it into both!
  • The iPad files are 1x Default-Landscape.png, 2x Default-Landscape@2x.png — for both rows.

Now go back to the ImageView on your Launch.xib and give it the filename Launch.

Woo hoo! Everything works, and all your devices come in with the correctly detected resolutions and launch screens. Note that you can check the resolution like this:

CGSize uiSize = [UIScreen mainScreen].bounds.size;
if (uiSize.height > uiSize.width) {
  // iOS8 returns bounds based on orientation
  CGSize rotatedSize = CGSizeMake(uiSize.height, uiSize.width);
  uiSize = rotatedSize;
}
switch ((int)uiSize.width) {
  case 736:       // iPhone 6 Plus   736 x 414
  case 667:       // iPhone 6        667 x 375
  case 568:       // iPhone 5s/5     568 x 320
  case 480:       // iPhone 4s/4     480 x 320
  default:       // iPad
    break;
}

Leave a Reply