MAF 2.2.1 has changed the manner in which you define a “launch screen” or “splash screen” for apps deployed to iOS devices. Static images are no longer supported, meaning that if you previously used custom splash screen images in your app, you will need to create your own custom HTML launch screen for iOS when using MAF 2.2.1.
This post explains the reasons for the change and describes how to create a custom HTML launch screen for iOS.
Android splash screen images remain the same in MAF 2.2.1. For information about how to create a 9-patch image that stretches across different device screen sizes, refer to this blog post.
When a user launches an app on iOS, the operating system displays a launch image while the app is loading. The purpose is to give the user the impression that the app has launched immediately.
Prior to iOS 8, app developers were required to provide static launch images for every device screen size, resolution and orientation supported by the app.
This approach has been supported by all MAF versions up to and including MAF 2.2.0. In fact, MAF extends this approach and continues to display the appropriate launch image while the framework is being initialized within the app.
Since iOS 8, Apple has encouraged use of a new approach, which is to use a single storyboard to define the launch image.
iOS 9 has introduced the concept of multitasking, meaning that apps can now be launched into a window that does not fill the device’s entire screen. To support
multitasking, an app must use a storyboard to define the launch image as fixed-sized images will not work.
MAF 2.2.1 accommodates iOS 9 multitasking by allowing app developers to specify a single HTML-based launch screen, which has the added benefits of removing the onerous task of creating and maintaining a number of static launch images and reducing the size of the app.
Creating a custom HTML launch screen
If your app previously used the default MAF splash screen images, then there’s nothing you need to do when you uptake MAF 2.2.1, as MAF 2.2.1 provides a default HTML launch screen that contains the Oracle logo and copyright similar to the previous default images.
If you previously used custom splash screen images in your app, then you will need to create a custom HTML launch screen for iOS, as follows:
To get ideas about how to scale images and text across different window sizes, you can refer to the default HTML launch screen included in MAF 2.2.1.
Understanding the default HTML launch screen
To view the default HTML launch screen:
Without analyzing every line of code, let’s take a look at some of the important parts of this file..
logic in your HTML launch screen if you wish to display a loading indicator and/or busy message.
The page is divided into the following sections:
The background and logo sections work together to display a small scalable vector graphic (SVG) image on a solid background color, which is the recommended approach for both performance and logistical reasons.
The launch screen will only be displayed for a short amount of time, so there’s not much time for a high-definition image to be loaded and displayed. In addition, a background image will be stretched and/or cropped to fit various window sizes, which may result in an unnatural-looking image.
If you would prefer something fancier than a solid background color, CSS supports linear and radial gradients. Online sites such as w3schools describe the syntax and provide examples. You can even find online CSS gradient generators at sites such as ColorZilla.
A small SVG image can stretch in a natural fashion to any window size without loss of quality, with the background color filling in the rest of the window. In the default launch screen, the image is embedded in the CSS as a data URI, but you could also co-locate the image file with your HTML launch screen and reference its location in the CSS.
The copyright section contains plain text that is displayed at the bottom of the page. The CSS determines the font size based on the available width of the window in which the launch screen is displayed. You could emulate this approach to display any text you want on your launch screen.
With MAF 2.2.1 you no longer need to create and maintain a number of splash screen images for iOS and your app size will be decreased.
If you previously used custom splash screen images for iOS, you must now create an HTML launch screen and the default HTML launch screen within MAF 2.2.1 can be used as a guide, as described above.