In this blog post I’ll walk you through all of this using the new Titanium 5.2.0 Sample App:
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:
The iPad Pro also requires a new 167px icon called
email@example.com. 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:
Option A: Use the 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:
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:
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.
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 (
@2x) or extension:
NOTE: Currently Titanium does not package the
LaunchLogo*.pngfile 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
build/iphone/Assets.xcassets/ and use the
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:
- Use Simulator > Reset Content and Settings…
- Use Project > Clean… or
appc ti cleanfrom 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:
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:
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:
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.