[TIMOB-18062] iOS: AttributedString Parity with Android
GitHub Issue | n/a |
---|---|
Type | Improvement |
Priority | Low |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2015-03-10T23:29:10.000+0000 |
Affected Version/s | n/a |
Fix Version/s | Release 4.0.0 |
Components | iOS |
Labels | label, parity, qe-4.0.0, qe-manualtest, textarea, textfield |
Reporter | Chee Kiat Ng |
Assignee | Ashraf Abu |
Created | 2014-11-20T06:59:37.000+0000 |
Updated | 2015-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
File | Date | Size |
---|---|---|
androidAttFont1.png | 2014-12-01T09:42:18.000+0000 | 55983 |
androidAttFont2.png | 2014-12-01T09:42:18.000+0000 | 42726 |
iPhoneAttFont1.png | 2014-12-01T09:42:18.000+0000 | 89366 |
iPhoneAttFont2.png | 2014-12-01T09:42:18.000+0000 | 66977 |
A reminder that we need to deprecate the iOS-specific namespace, not remove it (yet).
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.
Comparable screen shots of outcome of code on both iOS and android.
Updated PR: https://github.com/appcelerator/titanium_mobile/pull/6463 Contains changes for Android. Continued from: https://github.com/appcelerator/titanium_mobile/pull/6409
PR https://github.com/appcelerator/titanium_mobile/pull/6463 merged
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.
PR https://github.com/appcelerator/titanium_mobile/pull/6641
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