Currently, we are using image files, copied into an assets catalog named LaunchImage for the launch screens. There is a newer method supported in Xcode 6 / iOS8 and greater, whereby you can have a LaunchScreen.storyboard file, in which you can configure the launch screen, and it's adaptable to all device types. We need this file to exist in order for slideView / splitView to work on iOS9.
Similar to what we did with watchos2, we need work flow to be as such:
1. CLI generate an Xcode project template that contains a sample LaunchImage file. (ti create ... --template launchScreen)
2. Ti developer does what he wants in that Xcode project, very likely with an assets catalog in it as well.
3. when calling ti build, CLI copies this storyboard file and well as any associated image sets in the assets catalog into the build project.
4. info.plist will also need this
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
so we either include automatically or have the Ti developer include it in tiapp.xml
Note: The existence of LaunchScreen.storyboard will make Xcode ignore the original LaunchImage asset catalog. But we still cannot delete this because it's required for this method in TiRootViewController.m
- (UIImage*)defaultImageForOrientation:(UIDeviceOrientation) orientation resultingOrientation:(UIDeviceOrientation *)imageOrientation idiom:(UIUserInterfaceIdiom*) imageIdiom
as well as devices < iOS8.
Useful references: [Video of how we can integrate LaunchScreen.storyboard](
https://www.dropbox.com/s/hholmeay9mmlpcg/Ti.SlideOver.mov?dl=0)
[Xamarin |
https://developer.xamarin.com/guides/ios/application_fundamentals/working_with_images/launch-screens/]
[~cbarber] attached Launch Screen.storyboard. I followed the youtube guide here: http://simblestudios.com/blog/development/easier-percentage-width-in-autolayout.html basically it's configured to be: Size of logo is 40% (multiplier: 0.4) of background view. Y of logo.center is 60% (multiplier: 0.6) from center Y alignment constraint. So i guess you can mess around with those 2 specific multipliers to get what you want. Note: the multipliers are magically transformed to numbers when you read the source of the storyboard file.
PR: https://github.com/appcelerator/titanium_mobile/pull/7412 To take advantage of a storyboard-based launch screen, you don't have to do anything other than build your app. There is a default LaunchScreen.storyboard that ships with Titanium. It is a simple white background with an ImageView centered. It uses an image set called "LaunchLogo" from the asset catalog. By default it will generate LaunchLogos based on the
DefaultIcon.png, if exists. You can manually create them in theResources/iphonedirectory if you'd like. Here's the different filenames and sizes: ||Filename||Devices||Scale||Recommended Size|| |LaunchLogo~iphone.png|iPhone 3G and older|1x|320x320| |LaunchLogo@2x~iphone.png|iPhone 4, 4s 5, 5s, 6, 6s|2x|374x374| |LaunchLogo@3x~iphone.png|iPhone 6 Plus, 6s Plus|3x|621x621| |LaunchLogo~ipad.png|iPad 1, 2, Mini 1|1x|384x384| |LaunchLogo@2x~ipad.png|iPad 3, 4, Air, Air 2, Mini 2, 3, 4|2x|1024x1024| Since the ImageView is constrained to 50% the device width, these dimensions are based on the width of each device per scale divided by 2. Any missing images will be generated from theDefaultIcon.png. If there is noDefaultIcon.png, then the missing images will be copied from TiSDK which is just a black Ti logo on a white background. By default, the launch screen's background color is white. However, the LaunchLogo may look better against some other background color. You can specify the default background color in thetiapp.xml's<ios>section:<ios> <default-background-color>#ff0000</default-background-color> </ios><default-background-color>must be a 3 or 6 character RGB hex value. The#is optional. This will change the background color of the storyboard launch screen as well as the root view controller. Before, the root view controller would default to black. This causes a noticeable rendering artifact where the screen dims for a frame or two on launch. However after this, the root view controller will have the same background color and the transition looks much better. It's worth noting that the<default-background-color>is applied regardless of whether or not you're using a storyboard launch screen. It also has no effect if theapp.jsimmediately callsTitanium.UI.setBackgroundColor('#000');as is the case when running the default 2 tab app. You can override the defaultLaunchScreen.storyboardby placing a custom version of this file in theplatform/ios(orplatform/iphone) directory. If a custom launch screen storyboard is present, then it will NOT attempt to copy or generate LaunchLogos or change the storyboard's background color.[~cbarber] Should we consider an option for the developers to enable / disable the use of launchScreen.storyboard? I think there are some who might want to stick to using splash screens image files. The only time this is absolutely necessary (other than the fact that it'll look nicer) is when they want to enjoy the splitView / slideView capability on an iPad. And on top of that, they will also need to enable auto layout AND enable main thread for splitView / slideView to work. (both of which have bugs we need to fix soon). [~ingo] thoughts?
[~cng] I thought about that. I actually had a flag that was in the
tiapp.xml, but I removed it. My thought was the image-based launch screens are a thing of the past. Storyboards are the future. Case in point, the iPad Pro doesn't have a image-based launch screen. It falls back to the iPad Air size image. So, I can add the<enable-launch-screen-storyboard>flag back in, but then the question is should it be enabled by default? I really think we need to get our customers transitioning sooner than later. I vote to disable storyboard launch screens by default, however all new projects will have the<enable-launch-screen-storyboard>true</enable-launch-screen-storyboard>>by default. That way new apps will start to use storyboards and existing apps won't change.[~cng] When this gets merged, you can also resolve this: TIMOB-19968. :)
I approve of Chris' suggestion. New projects have it enabled by default.
I'll update the PR with the change. [~cng] please hold off on the merge until I make the changes.
[~cng] I updated https://github.com/appcelerator/titanium_mobile/pull/7412 to add support for
<enable-launch-screen-storyboard>true</enable-launch-screen-storyboard>. A few other changes where added to this PR. 1. Custom LaunchScreen.storyboard files can be placed in theplatform/iosdirectory. 2. All files inplatform/iosare blindly copied into thebuild/iphonedirectory which is what the Android and Windows platforms do. This is a breaking change. Files inplatform/iphoneused to be copied intobuild/iphone/build/Products/Debug-iphonesimulator/AppName.app. This change affects any existing iOS app or iOS Titanium module that has anplatform/iosorplatform/iphonedirectory. Apps and modules will need to be updated to use a CLI hook to copy the files to the correct destination which brings us to... 3. Added support for<project-dir>/hookswhere project-specific hooks can be placed. These CLI hooks are loaded regardless of the<plugins>section in the tiapp.xml. Custom LaunchScreen.storyboard files will need to be authored in Xcode, then manually copied into theplatform/iosdirectory. Custom storyboard asset support is hit or miss. You could put a PNG in theplatform/iosdirectory, but it would be copied to thebuild/iphonedirectory and won't actually be bundled into the app. If you enable app thinning, then any images inplatform/ioswill get converted into an asset catalog which your storyboard could reference, however the asset imageset's name would be a SHA and would be cumbersome to work with. In short, there's plenty of room for improvement.Updated the PR to support a
LaunchLogo.pngwhich will be used to generate missing launch logos. If the app does not have aLaunchLogo.png, then it falls back toDefaultIcon-ios.pngorDefaultIcon.png. There is an issue where launch logo updates are not reflected when rebuilding the app. iOS caches launch screens to a PNG image that appears to only be invalidated by restarting iOS. Uninstalling the app has no effect. Cleaning the Titanium app and rebuilding has no effect. Removing the cached image from the hard drive has no effect. Upon installing the updated app, it writes a new PNG image to cache of the old launch screen. It appears iOS keeps the cached launch screen in memory despite the app not running. The only way to show the updated launch logo is to restart the simulator/device. So, I've added a warning to let users know that they may need to restart iOS to see any launch screen changes.CR and FT Passed. PR Merged!
Steps to test
1. *appc new --no-services* 2. *appc run -p ios*Expected result
app will launch with the launch screen (white background with logo) instead of splash screen. You will also see in tiapp.xml<enable-launch-screen-storyboard>true</enable-launch-screen-storyboard>Test cases to repeat with the above steps
- change this property to false<enable-launch-screen-storyboard>false</enable-launch-screen-storyboard>. Expect to see splash screen instead. - remove the entire propertyenable-launch-screen-storyboard. Expect to see splash screen instead. - *appc run -p ios -I 8.4* run on iOS 8.4. Expect to see splash screen no matter what value this property is setenable-launch-screen-storyboard- test on device - test on iPad. *appc run -p ios -F ipad* and expect to see launch screen working in landscape as well as portrait - add default-background-color<default-background-color>#0000ff</default-background-color>to see background color change. - put attached *LaunchIcon.png* in app/assets/iphone. reset the simulator, clean the project and rebuild. you should see the new icon used as launch screen instead. - repeat tests using *ti create* and *ti build* instead. and expect all the same behavior as above. (Except *LaunchIcon.png* will be put in Resources/iphone/ instead)Test Steps for customised storyboard
- copy attached *LaunchScreen.storyboard* into app/platform/ios/ - copy attached *appcLogo.png* and *background.png* into app/assets/iphone - reset simulator, clean project and rebuild and you will see a new launch screen.Verified implemented, using: MacOS 10.11.3 (15D21) Studio 4.5.0.201602170821 Ti SDK 5.2.0.v20160216202526 Appc NPM 4.2.3-2 Appc CLI 5.2.0-265 Alloy 1.7.33 Xcode 7.2 (7C68) Storyboards can be successfully created by setting
<enable-launch-screen-storyboard>to true and building for an iOS 8+ sim/device when using Xcode 6+. Setting<enable-launch-screen-storyboard>to false will have the project use the traditional splash screen images. The background color of the storyboard can be set with<default-background-color>and the icon can be changed with a LaunchIcon.png image. A custom storyboard can override a generated one. Hooks can also now be used on the project (in the hooks folder) to copy files in platform/ios and platform/iphone to where the user needs them. Tested using the test steps above and several test apps/smokes of the build process.[~cbarber] First users start reporting the issue, that modules are not working anymore (because files placed in
platform/iosare not copied anymore). [~ewieber] suggesed a CLI hook, but that can only applied to projects using thehooks/folder. Can you think of a module-side solution here?We definitely need a module-side workaround here. It's the module maintainers that need to be able to make their modules work with 5.2, not the users.
[~hansknoechel] Correction, the
platform/iosdirectory is still copied, just not to the product directory. It's copied to the build directory just like all the other platforms. As I commented on TIMOB-20489, a CLI hook will not work. We need to fix this in the iOS build. Once the fix has been made, all iOS module developers will need to rebuild their module with the latest SDK and re-publish them. Please continue all discussion related to theplatform/iosdirectory in TIMOB-20489.