Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-18062

iOS: AttributedString Parity with Android

    Details

    • Story Points:
      5
    • Sprint:
      2014 Sprint 25 SDK, 2015 Sprint 01 SDK, 2015 Sprint 05 SDK

      Description

      Android can now support AttributedString as well. To update iOS attributedString feature so as to achieve parity.
      Deprecate Titanium.UI.iOS.AttributedString, and use Titanium.UI.AttributedString instead.

      Use following sample code (works for BOTH android and iOS):

      var win = Titanium.UI.createWindow({
          backgroundColor: '#ddd',
      });
       
      win.open();
       
      var text =  'Bacon ipsum dolor Appcelerator Titanium rocks! sit amet fatback leberkas salami sausage tongue strip steak.';
       
      var attr = Ti.UI.createAttributedString({
          text: text,
          attributes: [
              //font
              {
                  type: Ti.UI.ATTRIBUTE_FONT,
                  value: {font:{fontSize:50,fontFamily:'Helvetica Neue'}},
                  range: [0, text.length]
              },
              // Underlines text
              {
                  type: Ti.UI.ATTRIBUTE_UNDERLINES_STYLE,
                  value: Ti.UI.ATTRIBUTE_UNDERLINE_STYLE_SINGLE, //only iOS needs this, android ignores.
                  range: [0, text.length]
              },
              // Sets a background color
              {
                  type: Ti.UI.ATTRIBUTE_BACKGROUND_COLOR,
                  value: "red",
                  range: [text.indexOf('Appcelerator'), ('Appcelerator').length]
              },
              {
                  type: Ti.UI.ATTRIBUTE_BACKGROUND_COLOR,
                  value: "blue",
                  range: [text.indexOf('Titanium'), ('Titanium').length]
              },
              {
                  type: Ti.UI.ATTRIBUTE_BACKGROUND_COLOR,
                  value: "yellow",
                  range: [text.indexOf('rocks!'), ('rocks!').length]
              },
              // Sets a foreground color
              {
                  type: Ti.UI.ATTRIBUTE_FOREGROUND_COLOR,
                  value: "orange",
                  range: [0,  text.length]
              },
              {
                  type: Ti.UI.ATTRIBUTE_FOREGROUND_COLOR,
                  value: "black",
                  range: [text.indexOf('rocks!'), ('rocks!').length]
              },
              {
                  type: Ti.UI.ATTRIBUTE_LINK,//ignored in iOS, label doesn't support attribute link. Use textArea instead. 
                  value: "http://www.appcelerator.com",
                  range: [text.indexOf('Appcelerator'), ('Appcelerator').length]
              }
          ]
      });
       
      var label = Titanium.UI.createLabel({
          left: 20,
          right: 20,
          height: Titanium.UI.SIZE,
          attributedString: attr
      });
       
      var changeStyle = Titanium.UI.createButton({
          bottom:200,
          title: "ChangeStyle"
      });
       
      win.add(label);
      win.add(changeStyle);
       
      var attr2 = Titanium.UI.createAttributedString({
          text: text,
          attributes: [
              //font
              {
                  type: Ti.UI.ATTRIBUTE_FONT,
                  value: {font:{fontSize:30,fontFamily:'Helvetica Neue'}},
                  range: [0, text.length]
              },
              // Underlines text
              {
                  type: Ti.UI.ATTRIBUTE_UNDERLINES_STYLE,
                  value: Ti.UI.ATTRIBUTE_UNDERLINE_STYLE_SINGLE, //only iOS needs this, android ignores.
                  range: [0, text.length]
              },
              // Sets a background color
              {
                  type: Ti.UI.ATTRIBUTE_BACKGROUND_COLOR,
                  value: "green",
                  range: [text.indexOf('Appcelerator'), ('Appcelerator').length]
              },
              {
                  type: Ti.UI.ATTRIBUTE_BACKGROUND_COLOR,
                  value: "red",
                  range: [text.indexOf('Titanium'), ('Titanium').length]
              },
              {
                  type: Ti.UI.ATTRIBUTE_BACKGROUND_COLOR,
                  value: "blue",
                  range: [text.indexOf('rocks!'), ('rocks!').length]
              },
              // Sets a foreground color
              {
                  type: Ti.UI.ATTRIBUTE_FOREGROUND_COLOR,
                  value: "black",
                  range: [0,  text.length]
              },
              {
                  type: Ti.UI.ATTRIBUTE_FOREGROUND_COLOR,
                  value: "red",
                  range: [text.indexOf('rocks!'), ('rocks!').length]
              },
              // Sets strike through
              {
                  type: Ti.UI.ATTRIBUTE_STRIKETHROUGH_STYLE,
                  value: Titanium.UI.ATTRIBUTE_UNDERLINE_STYLE_SINGLE, //only iOS needs this, android ignores.
                  range: [text.indexOf('tongue'), ('tongue').length]
              },
              {
                  type: Ti.UI.ATTRIBUTE_LINK, //ignored in iOS, label doesn't support attribute link. Use textArea instead. 
                  value: "http://www.appcelerator.com",
                  range: [text.indexOf('Appcelerator'), ('Appcelerator').length]
              }
          ]
      });
       
      changeStyle.addEventListener('click', function(){
          label.attributedString=attr2});
      

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                msamah Ashraf Abu (Inactive)
                Reporter:
                cng Chee Kiat Ng (Inactive)
                Reviewer:
                Hieu Pham
              • Watchers:
                8 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Backbone Issue Sync is enabled for your project, but we do not have any synchronization info for this issue.

                    Git Integration