Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-17663] iOS: Add @3x images and new icon sizes to new-app templates and samples

GitHub Issuen/a
TypeImprovement
PriorityCritical
StatusClosed
ResolutionFixed
Resolution Date2014-09-26T18:28:14.000+0000
Affected Version/sn/a
Fix Version/sRelease 3.4.0, Release 3.5.0
ComponentsiOS
Labelsios8
ReporterTim Poulsen
AssigneeVishal Duggal
Created2014-09-09T20:24:20.000+0000
Updated2015-02-05T20:16:04.000+0000

Description

To support the iPhone 6/6+ screen sizes, we will need to add new icons and launch screen images to our new-app templates and samples. See https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW1 for the complete list. For iPhone 6, launch images: 750 x 1334 (@2x) for portrait 1334 x 750 (@2x) for landscape For iPhone 6 Plus: 1242 x 2208 (@3x) for portrait 2208 x 1242 (@3x) for landscape New icons: 180x180, 120x120, 87x87

Attachments

FileDateSize
Default-Landscape_1334x750.png2014-09-12T05:53:01.000+0000553564
Default-Landscape_2208x1242.png2014-09-12T05:53:01.000+00001754751
Default-Portrait_1242x2208.png2014-09-12T05:53:01.000+00001039854
Default-Portrait_750x1334.png2014-09-12T05:53:01.000+0000513122

Comments

  1. Tim Poulsen 2014-09-09

    http://ticons.fokkezb.nl/ has "experimental" support for creating these graphics from a set of starting images
  2. Fokke Zandbergen 2014-09-10

    PR for the icons: https://github.com/appcelerator/titanium_mobile/pull/6043
  3. Fokke Zandbergen 2014-09-10

    I'm trying to get the iPhone 6 and 6 Plus simulator to use the new launch images, but with no luck so far. The documentation doesn't state what filenames to use. I think it might require explicitly setting them in Info.plist. https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/iPhoneOSKeys.html#//apple_ref/doc/uid/TP40009252-SW28
  4. Fokke Zandbergen 2014-09-10

    It is strange that https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/MobileHIG/LaunchImages.html#//apple_ref/doc/uid/TP40006556-CH22-SW1 talks about *1334 x 750 (@2x) for landscape* while if I create a new Launch Image Asset Catalog in Xcode 6 GM it only has landscape for the iPhone 6 Plus (Retina HD 5.5): !https://pbs.twimg.com/media/BxKkTTIIMAAn6Ek.png:large!
  5. Fokke Zandbergen 2014-09-10

    If I build with an empty Assets Catalog, the Contents.json of the catalog do seem to confirm I was using the right naming conventions: 
       {
     "images" : [
       {
         "orientation" : "portrait",
         "idiom" : "iphone",
         "extent" : "full-screen",
         "minimum-system-version" : "8.0",
         "subtype" : "736h",
         "scale" : "3x"
       },
       {
         "orientation" : "landscape",
         "idiom" : "iphone",
         "extent" : "full-screen",
         "minimum-system-version" : "8.0",
         "subtype" : "736h",
         "scale" : "3x"
       },
       {
         "orientation" : "portrait",
         "idiom" : "iphone",
         "extent" : "full-screen",
         "minimum-system-version" : "8.0",
         "subtype" : "667h",
         "scale" : "2x"
       },
       ...
    The files I had in Resources/iphone but didn't get used were: - Default-Landscape-736h@3x.png - Default-Portrait-667h@2x.png - Default-Portrait-736h@3x.png
  6. Fokke Zandbergen 2014-09-10

    Aha, got it! I didn't know Titanium was already using a "Launch File" and just added the splash as a background. So we need to fix this: https://github.com/appcelerator/titanium_mobile/blob/master/iphone/Classes/TiRootViewController.m#L305-L311
  7. Fokke Zandbergen 2014-09-10

    Probably related, Malcolm found that the dimensions reported by Ti.Platform.displayCaps are those of an iPhone 5 even when running an iPhone 6 Simulator. Probably just like with the introduction of the iPhone 5 not having the splashes triggers some kind of compatibility mode? 
       [INFO]  Ti.Platform.displayCaps.density: high
   [INFO]  Ti.Platform.displayCaps.dpi: 320
   [INFO]  Ti.Platform.displayCaps.platformHeight: 568
   [INFO]  Ti.Platform.displayCaps.platformWidth: 320
   [INFO]  Ti.Platform.model: Simulator
   [INFO]  Ti.Platform.name: iPhone OS
   [INFO]  Ti.Platform.osname: iphone
   [INFO]  Ti.Platform.ostype: 32bit
  8. Fokke Zandbergen 2014-09-10

    I've asked Mads to jump in but I have no clue how to fix this. The device shows the 568h launch image, probably because it runs in some compatibility mode because it cannot find the launch image to trigger iPhone 6 compatibility.
  9. Malcolm Hollingsworth 2014-09-11

    In case this is related I think this might be why a simple update to the SDK to support the launch images may be more work than first thought. When iPhone 5 came out we needed -h568, support this was not available until a Ti SDK update. However at this time Apple was still allows the trigger to be suitable sized and named resource file. However with the iPhone 6/6+ they have enforced the launch image method for startup (images or storyboard). The simple act of provide the correct size images no longer works. As Titanium uses a fake launch window/background solution (likely due to some early cross platform issue that had not noticeably required updating) the simple ability to provide correctly sized images is not enough as we need both the images AND the launch image support. This is the documentation about launch images before iPhone 6/6+ https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/LaunchImages.html It references the need for images only. This is the documentation about launch images since iPhone 6/6+ https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/MobileHIG/LaunchImages.html#//apple_ref/doc/uid/TP40006556-CH22-SW1 It explains that you "You use a launch XIB or storyboard file to indicate that your app runs on iPhone 6 Plus or iPhone 6." however it does later on contradict itself by saying "Although it’s best to use a launch file for iPhone 6 and iPhone 6 Plus, you can instead supply static launch images if necessary". So it looks like we need basic level support to start with, just the images in a folder with a json file as well. Fokke knows more about this part - he told me. Later on we will need to support the full story board, although that might be best served as a separate ticket.
  10. Ingo Muschenetz 2014-09-12

    An additional note from the documents: "If you also need to support earlier versions of iOS, you can continue to supply static launch images in addition to a launch file."
  11. Ingo Muschenetz 2014-09-12

    Adding new launch images to the ticket (need to be renamed). Not perfect, but they'll do for now. We still need to actually make code changes as required.
  12. Vishal Duggal 2014-09-15

    Pull pending https://github.com/appcelerator/titanium_mobile/pull/6085 https://github.com/appcelerator/titanium_mobile/pull/6087
  13. Ingo Muschenetz 2014-09-16

    [~jalter], [~vduggal], [~cng] please review https://github.com/appcelerator/titanium_mobile/pull/6043 and related info about icons.
  14. Fokke Zandbergen 2014-09-16

  15. Fokke Zandbergen 2014-09-16

    Final thoughts: - Shouldn't the required properties in Info.plist be generated instead of asking the developer to add them via [tiapp.xml](https://github.com/vishalduggal/titanium_mobile/blob/bcb51ed6fb2bc4ef982429ad382cfe340e83c8bb/templates/app/default/template/tiapp.xml#L19)? This is going to generate lots of questions on the Q&A since people are used to dropping the images in. The build-script could simply see what images are there and generate the properties right? - I don't see the code/image for the landscape splash for the 736h subtype. - Am I right that iPad launch images renamed as well?
  16. Fokke Zandbergen 2014-09-16

    [~vduggal] I've added a PR for generating the new keys in the Info.plist: https://github.com/appcelerator/titanium_mobile/pull/6094/files It uses names without modifier (-568h, ~ipad) as this is [recommended by Apple](https://developer.apple.com/library/ios/documentation/general/Reference/InfoPlistKeyReference/Articles/iPhoneOSKeys.html#//apple_ref/doc/uid/TP40009252-SW28). However, I don't fully understand why since iPhone6/iOS8 we now need these properties - the more since [Titanium manually selects the right image](https://github.com/vishalduggal/titanium_mobile/commit/8a48df197f9db7ba24fd5f7f9868848d47fe8969) - so if you/I need to modify this PR to generate exactly what [you have](https://github.com/vishalduggal/titanium_mobile/commit/23cc849da190fd7b8eab87b1d3daa0fc99b45612), I can do so of course.
  17. Chris Barber 2014-09-16

    3_4_X backport for [~fokke]'s PR 6043: https://github.com/appcelerator/titanium_mobile/pull/6098
  18. Vishal Duggal 2014-09-16

    Additional PR's merged https://github.com/appcelerator/titanium_mobile/pull/6097 (master) https://github.com/appcelerator/titanium_mobile/pull/6099 (3_4_X) Additional icons required for iOS8 -60@3x.png (180x180 actual image dimensions) -Small@3x.png (87x87 actual image dimensions) Additional Splash Screen resources Default-Portrait-736h@3x.png (iPhone 6 Plus portrait Splash. 1242 x 2208 actual image dimensions) Default-Landscape-736h@3x.png (iPhone 6 Plus Landscape Splash. 2208 x 1242 actual image dimensions) Default-667h@2x.png (iPhone 6 Portrait Splash. 750 x 1334 actual image dimensions)
  19. Olga Romero 2014-09-19

    Tested and verified correct icons, using Mac osx 10.9.5 Mavericks Appcelerator Studio, build: 3.4.0.201409161950 Titanium SDK, build: 3.4.0.v20140918202513 acs@1.0.16 alloy 1.5.0-rc2 install@0.1.7 npm@1.4.23 sudo@1.0.3 titanium 3.4.0-rc4 titanium-code-processor@1.1.1 Xcode6.0.1 (6A317) iOS 8 iPhone 6 Simulator iOS 8 iPhone 6+ Simulator

    iPhone 6 plus

    -60@3x.png(180x180 actual image dimensions) -60@2x.png (120x120 actual image dimensions) - spotlight search -Small@3x.png (87x87 actual image dimensions) - settinng icon

    iPhone 6

    -60@2x.png(120x120 actual image dimensions) -Small-40@2x.png (80x80 actual image dimensions) - spotlight search -Small@2x.png (58x58 actual image dimensions) - settinng icon
  20. Olga Romero 2014-09-23

    Closing as fixed, verified using the following environment: Mac osx 10.9.5 Mavericks Appcelerator Studio, build: 3.4.0.201409161950 Titanium SDK, build: 3.4.0.v20140922135716 acs@1.0.16 alloy 1.5.0-rc2 install@0.1.7 npm@1.4.23 sudo@1.0.3 titanium 3.4.0-rc4 titanium-code-processor@1.1.1 Xcode6.0.1 (6A317) Devices: iPhone6 iOS 8 iPhone 6+ iOS 8

JSON Source