Cordova Builder: iOS Storyboards and Android 9 Patch images
Description
Storyboards and 9 Patch images are used by newer versions of iOS and Android for launch images.
Discussion
If you plan to support iPhone X or iPad Pro 12.9's native resolution or split screen/slide-over multitasking, you'll need to use iOS storyboard launch images.
Launch storyboard images are sized based on scale, idiom, and size classes. They supports all devices, and can be used with split-screen/slide-over multitasking.
Apple is moving away from legacy launch images. There is no official support for providing a native-resolution launch image for the iPad Pro 12.9 or for providing launch images that work with split-screen multitasking or slide-over. If your app doesn't need to support these contexts, then you can continue to use legacy launch images for as long as you like.
The recommended method of providing launch images is to use a launch storyboard.
These are similar to the legacy launch images with several crucial differences:
- Images are not specific to a given device.
- Images are scaled to fill the available viewport (while maintaining the aspect ratio).
- The outer edges of the images will be cropped, and the amount will vary based on device an viewport.
- There is no need to provide an image for each possible device, viewport, and orientation; iOS will choose the best image for the situation automatically.
Designing launch storyboard images (Applies to Android 9-patch images as well)
The key to designing a launch storyboard image is understanding that the edges of the image will almost certainly be cropped. Therefore, one should not place any important information near the edges of any images provided to the launch storyboard. Only the center is a safe area, and this all but guarantees that following Apple's advice of presenting an unpopulated user interface will not work well.
Instead, the following tips should enable you to create a launch image that works across a multitude of form factors, viewports, and orientations:
- Important graphics (logos, icons, titles) should be centered. The safe bounding region will vary, so you will need to test to ensure that the important graphics are never cropped. Better yet, don't supply any important graphics in the first place.
- You can fine-tune the placement and size of these graphics, but you don't have the same fine-grained control as you did with legacy launch images.
- Use a simple color wash. If you use two colors, you'll want one color to fill the top half of the image, and the second to fill the bottom half. If you use a gradient, you'll want to ensure that the middle of the gradient lines up with the center of the image.
- Don't worry about pixel perfection. The images are scaled, so there's almost no chance the images will perfectly fit to the pixel grid. Since all supported iOS devices use retina screens, users will be hard pressed to notice it anyway.
Of the images supplied to the launch storyboard, iOS will choose the image that best matches the device and viewport and render that image.
The Alpha Cordova Builder will generate all of the required storyboard images from a single user supplied square 2732px x 2732px (min) png file. The iOS storyboard file is generated from the image specified for the Portrait splash screen.
Changes to the Cordova Build config.xml file
The Alpha Anywhere Cordova App Builder will automatically remove and replace certain sections of the config xml file that reference legacy splashscreens, storyboards, or Android 9-patch images based on the properties set within the builder. All of the sections are marked with XML comments, and those comments need to remain in place. If legacy splashscreens are specified, the sections for the storyboard and Android 9-patch images are removed, but the comment tags are left intact. If storyboards and Android 9-patch images are specified, the legacy sections are removed.
If you are modifying an older Cordova project with a legacy config.xml file (the comment tags we added around April of 2017), these sections will be added to the older config.xml file and a message will be displayed indicating an older config.xml file was modified. In this case, you should edit the config.xml file to remove the older legacy splashscreen section prior to submission to Cordova Build.