Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-14506] TiAPI: Label auto-size behavior different on Android / iOS

GitHub Issuen/a
TypeBug
PriorityLow
StatusOpen
ResolutionUnresolved
Affected Version/sRelease 3.1.1
Fix Version/sn/a
ComponentsCore
Labelsparity
ReporterSteve Trautman
AssigneeUnknown
Created2013-07-03T21:03:53.000+0000
Updated2018-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();

Comments

  1. Daniel Sefton 2013-07-09

    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.
  2. Steve Trautman 2013-07-15

    "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.
  3. Daniel Sefton 2013-07-15

    Yes you're right, my bad. The issue is still on track to be reviewed by our engineering team. Thanks.

JSON Source