Appcelerator Blog

The Leading Resource for All Things Mobile

Titanium 5.2.0: Launch Files, iPad Pro, Slide Over and Split View

0 Flares 0 Flares ×

With iOS 9 Apple introduced Slide Over and Split View for multitasking on eligible iPad models. You can now enable these new features for your apps in Titanium 5.2.0.

In this blog post I’ll walk you through all of this using the new Titanium 5.2.0 Sample App:

Split View

Not a small thing

Supporting these new features actually was quite an undertaking. We needed to refactor our custom layout engine to use Auto Layout, which we did for Titanium 5.1.0 as an opt-in. The other ingredient were Launch Files, now available in Titanium 5.2.0. This also gets us support for the iPad Pro, which no longer supports Launch Images.

What are Launch Files?

Until now, you used to create a bunch of Default*.png Launch Images. In iOS 8 Apple introduced Launch Files. These are the same XIB files or Storyboards that you’d normally build you UI with in Xcode. This means you can use any iOS UI component and only need one file to support all devices. When you app first runs, iOS takes a snapshot image of the launch file to use as launch image. A great way to slim down your IPA!

iPad Pro requires Launch Files

The iPad Pro no longer supports Launch Images. Without it, a (Titanium) iOS app will be stretched to fit the iPad Pro:

iPad Pro with no Launch File

The iPad Pro also requires a new 167px icon called appicon-83.5@2x.png. If you use DefaultIcon[-ios].png it will be generated automatically since Titanium 5.1.2.GA.

You can select the iPad Pro from the device list in Studio or use -C ? to select if from the CLI.

Using Launch Files

You have two ways to use Launch Files: by using our builtin Storyboard or your own.

Both need to be enabled in the <ios> section of your tiapp.xml:

<enable-launch-screen-storyboard>true</enable-launch-screen-storyboard>

Option A: Use the builtin Storyboard

The builtin Storyboard features a centered image on a solid background color. The sample uses the builtin storyboard with a custom image on an Appcelerator red Background Color:

Builtin Storyboard

Customising the Image

By default we’ll generate the image from DefaultIcon[-ios].png. To use a different image, add the following LaunchLogo*.png files to the app/assets/iphone folder:

Filename Scale Size
LaunchLogo~iphone.png 1x 320×320
LaunchLogo@2x~iphone.png 2x 374×374
LaunchLogo@3x~iphone.png 3x 621×621
LaunchLogo~ipad.png 1x 384×384
LaunchLogo@2x~ipad.png 2x 1024×1024

You can generate these images with TiCons Web or CLI --storyboard option.

Customising the Background Color

By default the background color is white. You can set a different color via the <ios> section of your tiapp.xml.

This will also change the background color of your app between after the launch files is dismissed and before a view (with a solid background color) is opened, or Ti.UI.backgroundColor is set. The sample opens with a 2s delay so you can see this better.

Option B: Use a custom Storyboard

To use a custom Storyboard, put this file in platform/ios/LaunchScreen.storyboard. As you can see the sample has it disabled using a _ prefix. Just remove the underscore and do a clean build to see the difference:

Builtin Storyboard

As you can see I’ve used an iOS Activity Indicator. Notice that it is not spinning as iOS uses a snapshot image of the storyboard.

Using images

To use an image in your custom Storyboard, simply set the Image property of an Image View to the path under app/assets/ without the image modifier (~ipad, @2x) or extension:

Image

NOTE: Currently Titanium does not package the LaunchLogo*.png file if you use a custom storyboard. You need to rename this image before you can use it.

If you have the optional app-thinning enabled, you will have to use the name of the generated asset catalog. This is a hash based on the image path. To find out the hash for your image build the app, look up the right [hash].imageset under build/iphone/Assets.xcassets/ and use the [hash] part.

Dealing with Launch File Cache

As you modify the (custom) storyboard, you might not always see your changes immediately. This is because iOS caches the snapshot it makes from your Launch File and a known issue where Titanium does not always recompile the storyboard.

To deal with this follow these steps before you build:

  1. Use Simulator > Reset Content and Settings…
  2. Use Project > Clean… or appc ti clean from CLI.

Alternatively you can reset an individual app using a tool like SimPholders. With this app, just hold alt/⌥ and click the app from the dropdown:

SimPholders

Enabling Slide Over and Split View

On to iPad multitasking.

The reason this requires Launch Files is that your app might be opened as Slide Over in either landscape or portrait. This would have required a 6 more launch images for the 3 sizes of iPad screens out there.

Because your app needs to deal with all these sizes as well, Auto Layout is required. So the first thing we need to do is enable this under the <ios> section of tiapp.xml:

<use-auto-layout>true</use-auto-layout>

To inform iOS that our app no longer requires fullscreen, we need to add a flag to the <ios><plist><dict> section of tiapp.xml:

<key>UIRequiresFullScreen</key>
<false/>

Responding to Slide Over and Split View

Though Auto Layout should take care of resizing your UI properly, you might want to leave out certain views on smaller sizes.

To respond to your app changing between full screen, Slide Over and quarter or half Split View you can listen to the existing Ti.App:resumed event. This will fire on all occasions except for one. When your app is on the left side of a Split View and moves back to fullscreen because the other app closes or switches to Slide Over you will not get notified.

In index controller of the sample app I log the dimensions of the TabGroup each time the resumed event is received.

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×

2 Comments

  1. Manoj Kumar

    I’m facing 2 issues here,

    1. I’m trying to have the same look and feel of Default*.png with story board. When I add a image view and assign the image, it stretches to fill the screen or it goes out of screen boundary. Is there a fix? (Sorry, about this stupid question, I’m just a beginner with story board).
    2. There is a slight noticeable delay between the LaunchScreen and Index controller.

Comments are closed.

Sign up for updates!

Become a mobile leader. Take the first step to scale mobile innovation throughout your enterprise.
Get in touch
computer and tablet showing Appcelerator software
Start free, grow from there.
0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×