Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-27133] iOS 13: Add support for SF Symbols

GitHub Issuen/a
TypeNew Feature
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2019-09-02T12:56:45.000+0000
Affected Version/sn/a
Fix Version/sRelease 8.2.0
ComponentsiOS
Labelsn/a
ReporterRene Pot
AssigneeVijay Singh
Created2019-06-05T15:32:13.000+0000
Updated2019-09-02T12:57:50.000+0000

Description

SF symbols is a new iOS 13 feature that allows developers to use build-in icons (1500 icons!) in iOS apps. We should allow users to use these icons. They're supposed to replace the system icons up-to iOS 12 Source: https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview

Comments

  1. Vijay Singh 2019-07-09

    Hey Guys, I am planning to expose SF symbols via a new API Ti.UI.iOS.systemImage in Titanium. This will be iOS specific. TestCase - 
       var win = Ti.UI.createWindow({
       backgroundColor: '#fff'
   });
   var triangle = Ti.UI.iOS.systemImage('drop.triangle.fill');
   var forward = Ti.UI.iOS.systemImage('forward');
   var backward = Ti.UI.iOS.systemImage('backward');
   var folder = Ti.UI.iOS.systemImage('folder.fill');
   
   
   var imageView = Ti.UI.createImageView({
       width: '150',
       height: '150',
       image: triangle,
       tintColor: 'red'
   });
   
   
   var button = Ti.UI.createButton({
       top: 60,
       width: 100,
       height: 50,
       //backgroundImage: folder
       image: folder
   })
   
   var stepper = Ti.UI.iOS.createStepper({
       top: 150,
       incrementImage: forward,
       decrementImage: backward
   });
   
   
   win.add(button);
   win.add(stepper);
   win.add(imageView);
   win.open();
    Any suggestion ? Thanks!
  2. Adam Armstrong 2019-07-09

    Will we be able to use in Alloy - XML Views directly? If so, can you provide a sample code snippet of how that might look/work?
  3. Vijay Singh 2019-07-09

    [~amwinsauto] It can be used in Alloy-XML views directly in following way - In alloy.js create - 
       Alloy.Globals.buttonImage = Ti.UI.iOS.systemImage('forward');
    and use it inside view- 
       <Alloy>
       <Window class="container">
           <Button id="webComponent" image= Alloy.Globals.buttonImage/>
       </Window>
   </Alloy>
    Is this something you are asking for? Main purpose of this API is to provide ability to access System provided 1500 build-in icons in iOS 13+ to developers.
  4. Adam Armstrong 2019-07-09

    I *guess* that would work. But, in my opinion, it feels like a bandaid or hack. Why not implement it in a manner similar to that of Titanium.UI.iOS.SystemButton? https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.iOS.SystemButton With Titanium.UI.iOS.SystemButton, you can do something like:
  5. Vijay Singh 2019-07-12

    https://github.com/appcelerator/titanium_mobile/pull/11050
  6. Vijay Singh 2019-07-13

    [~amwinsauto] The use of SF images are not limited to Labels or Button. It can be used in Ti.UI.ImageView, Ti.UI.iOS.Stepper, Ti.UI.Button, ListView etc. I am not sure if parallel to 'setImage' we should add another api which is neither cross platform nor work for < iOS 12. [~jquick] what you think? I have moved the API under Ti.UI.iOS name space as this is iOS only.
  7. Joshua Quick 2019-07-13

    I think having an iOS only getter method to fetch the system image (wrapped in a Ti.Blob) is good to have in general. I don't think anyone here will question that. The question is what can we do to make this Alloy friendly. I like Vijay's Alloy solution where you can set the image in the view XML via a variable. Since this is an iOS 13 only feature, you'll need a solution for older iOS versions and Android. With his solution, you can easily assign a different image to that variable, making the view XML completely portable. Alternatively, the image variable can be assigned via an Alloy tss file as well.
  8. Rene Pot 2019-07-15

    I guess a solution could be to add a PR to alloy to be able to set the new SF symbol directly in Alloy. Perhaps in the same way the L() method is supported in tss and xml. [~eharris] any thoughts?
  9. Joshua Quick 2019-07-15

    [~topener], remember that this is an iOS 13 only feature. So, what should and Alloy function like this do on other platforms and older iOS versions? Return null? The advantage of the way Vijay is doing it is the app developer can implement a fallback-image if needed.
  10. Rene Pot 2019-07-16

    As with every feature we have that only works on specific versions or platforms, the user will have to use platform/if filters. 
        "#myImage[if=Alloy.Globals.isios13]"
    It probably should throw a warning & return null for anything pre iOS 13, but obviously fail completely on android.
  11. Ewan Harris 2019-08-02

    I think I do agree with Rene here. I was thinking about whether Alloy could make the semantic color usage introduced in TIMOB-27126 easier too. With SFSymbols and that, it seems like a lot of peoples application startup will include tacking on their required SFSymbols/colors onto Alloy.Globals/Alloy.Styles. I think something like L could work quite well, we could maybe expose systemImage and fetchSemanticColor to be used in tss/xml. But I don't want to do that bikeshedding in here, I'll open an ALOY ticket for each of those next week.
  12. Samir Mohammed 2019-08-20

    FR Passed for Master (8_2_X). [~vijaysingh] Could you add a PR for 8_3_X?
  13. Hans Knöchel 2019-08-22

    Without proper constants or Alloy support, this is useless for larger scaled apps since we cannot define 70+ icons in an alloy.js …
  14. Christopher Williams 2019-08-29

    merged to master (8.2.0)
  15. Samir Mohammed 2019-09-02

    [~vijaysingh] Using SDK version 8.2.0.v20190829124255. I get the following error with test case you mentioned above: 
        [ERROR]  Script Error {
    [ERROR]   column = 37;
    [ERROR]   line = 5;
    [ERROR]   message = "Ti.UI.iOS.systemImage is not a function. (In 'Ti.UI.iOS.systemImage('drop.triangle.fill')', 'Ti.UI.iOS.systemImage' is undefined)";
    [ERROR]   sourceURL = "file:///Users/Samir/Library/Developer/CoreSimulator/Devices/8B89634B-0E8B-4286-8839-7CEE6A035700/data/Containers/Bundle/Application/A7182763-051C-4CCD-B9E4-881337E281B7/anewp.app/app.js";
    [ERROR]   stack = " at (/app.js:5:37)\n at global code(/app.js:40:70)\n at require@[native code]\n at (/ti.main.js:11614:10)\n at loadAsync(/ti.main.js:11540:13)\n at global code(/ti.main.js:11611:10)";
    [ERROR]   toJSON = "<KrollCallback: 0x6000002c8280>";
    [ERROR]  }
    [WARN]   Cannot serialize object, trying to repair ...
    [WARN]   Found invalid attribute "toJSON" that cannot be serialized, skipping it ...
    [ERROR]  Script Error {
    [ERROR]   column = 10;
    [ERROR]   line = 11614;
    [ERROR]   message = "Module \"app.js\" failed to leave a valid exports object";
    [ERROR]   sourceURL = "file:///Users/Samir/Library/Developer/CoreSimulator/Devices/8B89634B-0E8B-4286-8839-7CEE6A035700/data/Containers/Bundle/Application/A7182763-051C-4CCD-B9E4-881337E281B7/anewp.app/ti.main.js";
    [ERROR]   stack = " at require@[native code]\n at (/ti.main.js:11614:10)\n at loadAsync(/ti.main.js:11540:13)\n at global code(/ti.main.js:11611:10)";
    [ERROR]   toJSON = "<KrollCallback: 0x6000002c24c0>";
    [ERROR]  }
  16. Samir Mohammed 2019-09-02

  17. Samir Mohammed 2019-09-02

    ^ SDK Version: 8.2.0.v20190902041145

JSON Source