Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-18062] iOS: AttributedString Parity with Android

GitHub Issuen/a
TypeImprovement
PriorityLow
StatusClosed
ResolutionFixed
Resolution Date2015-03-10T23:29:10.000+0000
Affected Version/sn/a
Fix Version/sRelease 4.0.0
ComponentsiOS
Labelslabel, parity, qe-4.0.0, qe-manualtest, textarea, textfield
ReporterChee Kiat Ng
AssigneeAshraf Abu
Created2014-11-20T06:59:37.000+0000
Updated2015-03-25T23:12:56.000+0000

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

FileDateSize
androidAttFont1.png2014-12-01T09:42:18.000+000055983
androidAttFont2.png2014-12-01T09:42:18.000+000042726
iPhoneAttFont1.png2014-12-01T09:42:18.000+000089366
iPhoneAttFont2.png2014-12-01T09:42:18.000+000066977

Comments

  1. Ingo Muschenetz 2014-11-20

    A reminder that we need to deprecate the iOS-specific namespace, not remove it (yet).
  2. Chee Kiat Ng 2014-11-28

    PR here: https://github.com/appcelerator/titanium_mobile/pull/6409 iOS deprecation of Titanium.UI.IOS.AttributedString in favor of Titanium.UI.AttributedString. Pull request include Android support for AttributedString from pull request https://github.com/appcelerator/titanium_mobile/pull/6358, which will be closed once this PR is reviewed and merged.
  3. Chee Kiat Ng 2014-12-01

    Comparable screen shots of outcome of code on both iOS and android.
  4. Ashraf Abu 2014-12-11

    Updated PR: https://github.com/appcelerator/titanium_mobile/pull/6463 Contains changes for Android. Continued from: https://github.com/appcelerator/titanium_mobile/pull/6409
  5. Chee Kiat Ng 2015-01-15

  6. Vishal Duggal 2015-01-15

    PR https://github.com/appcelerator/titanium_mobile/pull/6463 merged
  7. Khushbu Agrawal 2015-02-06

    Verified with below Test Environment: 1. Mac OSX Yosemite 10.10 2. Appcelerator Studio, build: 4.0.0.201502031850 3. Titanium SDK, build: 4.0.0.v20150205163226 4. Titanium CLI, build: 3.4.1 5. Alloy: 1.5.1 6. Xcode 6.1 7. iOS SDK 8.1 8. S Galaxy S5 with Android 4.4.2 9. iPhone 6+, iOS 8.1 With Android, the attribute link didn't work for TextArea. I have tested it by setting autolink true and editable false. The same code works well with iOS for textarea. So reopening this ticket.
  8. Ashraf Abu 2015-02-12

    PR https://github.com/appcelerator/titanium_mobile/pull/6641
  9. Lokesh Choudhary 2015-03-25

    Verified the improvement IOS now has parity with android regarding attributed string. Environment: Appc Studio : 4.0.0.201503232213 Ti SDK : 4.0.0.v20150323131014 CLI : 4.0.0-alpha Alloy : 1.6.0-alpha MAC Yosemite : 10.10.2 Iphone 6 - IOS 8.1 Nexus 5 - android 5.1

JSON Source