Chris Zetter

Launch images for iOS 7 in Rubymotion

iOS 7 radically changes the look of default UI elements so unless you’re using a custom skin across your app you will likely need different launch images for iOS 7 and iOS 6.

iOS 7 only images

Launch images in iOS and Rubymotion need to follow a pattern which lets the device know what size the image is for and if it is retina, so you end up with some files in your resources/ directory like this:

Default.png          # Normal image (for iPhone 3GS)
Default@2x.png       # Retina image (for iPhone 4)
Default-568h@2x.png  # 568 tall Retina image (for iPhone 5)

…and so on if you support different orientation and iPad screen sizes too.

Apple have added the UILaunchImages setting which allows you to override launch images for different iOS versions.

Here’s what you need to add to your Rakefile in Rubymotion:

Motion::Project::App.setup do |app|
  # ...
  app.info_plist['UILaunchImages'] = [
     'UILaunchImageName' => 'ios7Default',
     'UILaunchImageMinimumOSVersion' => '7.0',
     'UILaunchImageSize' => '{320, 480}'
     'UILaunchImageName' => 'ios7Default',
     'UILaunchImageMinimumOSVersion' => '7.0',
     'UILaunchImageSize' => '{320, 568}'

This setting allows you to supply some new files with the prefix ios7Default that will only be displayed in iOS 7:


The status bar

Also in iOS 7 launch images must contain the status bar region. In iOS 6 the status bar part of the launch image was never visible as the real status bar was overlaid on top of it. In iOS 7 just the content of the status bar is overlaid, not the background.

As a result you must make sure the status bar area of the launch image has the correct background colour and no content- if you’re producing launch images by taking screen shots of your app, use an image editor to blank it out.

Comparison of the iOS6 and iOS7 launch images for SuperLocate in iOS 6:

iOS 6 vs iOS 5 Launch Image

Further reading

Documentation for UILaunchImages setting

iOS Human Interface Guidelines for Launch Images

Read more by me, follow me on twitter or subscribe.