[TIMOB-14506] TiAPI: Label auto-size behavior different on Android / iOS
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | Low |
Status | Open |
Resolution | Unresolved |
Affected Version/s | Release 3.1.1 |
Fix Version/s | n/a |
Components | Core |
Labels | parity |
Reporter | Steve Trautman |
Assignee | Unknown |
Created | 2013-07-03T21:03:53.000+0000 |
Updated | 2018-02-28T20:04:12.000+0000 |
Description
A label's auto-size behavior different on Android / iOS. iOS has the expected behavior. On android, when the label's width shrinks and the text is word-wrapped, the label's width doesn't match what is displayed on screen when the word-wrapping results in a smaller width that the width change that caused the word-wrapping.
I know that's a mouthful, but hopefully the code below will make it clear why android is broken.
Clicking the label will alert with the current vwScreen.width and label.width, then shrink the vwScreen.width by 5%. So as you click the label multiple times, the label will start to word wrap.
When you run the code below on iOS iPhone 5 simulator and click the label, you'll see the first three values are:
vwScreen.width, label.width
320, 310
304, 194
304, 194
The point here is that the label's width is exactly the width of the text.
On Android, the same word-wrapping happens correctly, but the label's width property remains larger, always equal to the containing view. The first three values on my Android emulator are:
480, 480
456, 456
433, 433
I have labels that I want to horizontally center, and because of this bug I cannot do so on android.
var isIOS = (Ti.Platform.name === 'iPhone OS');
var window = Ti.UI.createWindow({
fullScreen : false,
title : 'Label Auto Size Bug',
backgroundColor : 'white',
modal : true,
exitOnClose : true,
navBarHidden : true
});
var vwScreen = Ti.UI.createView({
left : 0,
top : 0,
width : Ti.Platform.displayCaps.platformWidth,
height : Ti.Platform.displayCaps.platformHeight,
backgroundColor: "#FF0000"
});
window.add(vwScreen);
var lblInfo = Ti.UI.createLabel({
color : 'white',
left : 0,
top : 100,
height : Ti.UI.SIZE,
width : Ti.UI.SIZE,
backgroundColor: "#0000FF",
text : '4112 N HIGH SCHOOL RD, INDIANAPOLIS, IN',
font : {
fontSize : isIOS ? 15 : 35,
fontWeight : 'bold'
}
});
lblInfo.addEventListener('click', function() {
alert('vwScreen.rect.width = ' + vwScreen.rect.width + ' lblInfo.rect.width = ' + lblInfo.rect.width);
vwScreen.width = vwScreen.rect.width * 0.95;
});
vwScreen.add(lblInfo);
window.open();
It seems to word-wrap correctly when anyDensity is true. When it's false, the word-wrap is per-character. The behavior of Ti.UI.SIZE does appear to be different between the platforms. In fact, Android seems to be correct - Ti.UI.SIZE should fill the width to the containing view. That happens on Android. On iOS, the width is sized to the containing text rather than vwScreen. Tested on Samsung Galaxy S2 2.3.6, Ti SDK 3.1.1 GA.
"In fact, Android seems to be correct - Ti.UI.SIZE should fill the width to the containing view." No, you describe Ti.UI.FILL behavior. http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI-property-FILL says "the view will grow its size to fill its parent". Ti.UI.SIZE should "constrain its size fit its contents." http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI-property-SIZE. Android is incorrect, iOS is correct.
Yes you're right, my bad. The issue is still on track to be reviewed by our engineering team. Thanks.