Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-9924] Android: Support vertical align on Labels

GitHub Issuen/a
TypeNew Feature
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2012-07-13T15:49:12.000+0000
Affected Version/sRelease 2.1.0
Fix Version/sSprint 2012-15 API, Release 3.0.0
ComponentsAndroid
Labelsapi, module_label, parity, qe-testadded
ReporterVishal Duggal
AssigneeJosh Roesslein
Created2012-07-10T15:16:11.000+0000
Updated2012-12-21T18:31:35.000+0000

Description

Parity ticket for android. MW supports this feature and IOS has implemented it as part of TIMOB-2574. Android needs to achieve parity Test Code

var win = Ti.UI.createWindow({
    backgroundColor: 'white',
});

var theFont = {fontSize: 11, font: 'Helevetica' };
var container = Ti.UI.createView({
	layout:'vertical'
}) 
var controls1 = Ti.UI.createView({
	layout:'horizontal',
	height:Ti.UI.SIZE,
	top:10,
	borderColor:'#ccc',
	borderWidth:1
}) 

var title1 = Ti.UI.createLabel({
	font :theFont,
	text:'V-ALIGN'
})
var c1b1 = Ti.UI.createButton({
	left:10,
	font :theFont,
	title:'TOP'
})
var c1b2 = Ti.UI.createButton({
	left:10,
	font :theFont,
	title:'BOTTOM'
})
var c1b3 = Ti.UI.createButton({
	left:10,
	font :theFont,
	title:'CENTER'
})
controls1.add(title1);
controls1.add(c1b1);
controls1.add(c1b2);
controls1.add(c1b3);
container.add(controls1)

var controls2 = Ti.UI.createView({
	layout:'horizontal',
	height:Ti.UI.SIZE,
	top:10,
	borderColor:'#ccc',
	borderWidth:1
}) 

var title2 = Ti.UI.createLabel({
	font :theFont,
	text:'T-ALIGN'
})
var c2b1 = Ti.UI.createButton({
	left:10,
	font :theFont,
	title:'LEFT'
})
var c2b2 = Ti.UI.createButton({
	left:10,
	font :theFont,
	title:'RIGHT'
})
var c2b3 = Ti.UI.createButton({
	left:10,
	font :theFont,
	title:'CENTER'
})
controls2.add(title2);
controls2.add(c2b1);
controls2.add(c2b2);
controls2.add(c2b3);
container.add(controls2)

var controls3 = Ti.UI.createView({
	layout:'horizontal',
	height:Ti.UI.SIZE,
	top:10,
	borderColor:'#ccc',
	borderWidth:1
}) 

var title3 = Ti.UI.createLabel({
	font :theFont,
	text:'WIDTH'
})
var c3b1 = Ti.UI.createButton({
	left:10,
	font :theFont,
	title:'SIZE'
})
var c3b2 = Ti.UI.createButton({
	left:10,
	font :theFont,
	title:'200'
})
var c3b3 = Ti.UI.createButton({
	left:10,
	font :theFont,
	title:'150'
})
var c3b4 = Ti.UI.createButton({
	left:10,
	font :theFont,
	title:'100'
})
controls3.add(title3);
controls3.add(c3b1);
controls3.add(c3b2);
controls3.add(c3b3);
controls3.add(c3b4);
container.add(controls3);

var controls4 = Ti.UI.createView({
	layout:'horizontal',
	height:Ti.UI.SIZE,
	top:10,
	borderColor:'#ccc',
	borderWidth:1
}) 

var title4 = Ti.UI.createLabel({
	font :theFont,
	text:'HEIGHT'
})
var c4b1 = Ti.UI.createButton({
	left:10,
	font :theFont,
	title:'SIZE'
})
var c4b2 = Ti.UI.createButton({
	left:10,
	font :theFont,
	title:'200'
})
var c4b3 = Ti.UI.createButton({
	left:10,
	font :theFont,
	title:'150'
})
var c4b4 = Ti.UI.createButton({
	left:10,
	font :theFont,
	title:'100'
})
controls4.add(title4);
controls4.add(c4b1);
controls4.add(c4b2);
controls4.add(c4b3);
controls4.add(c4b4);
container.add(controls4);

var testLabel = Ti.UI.createLabel({
	backgroundColor: 'white',
    color: 'black',
    //text:'I am the test label. Switch my properties around and see me change. Vertical Alignment should work well with change in size and text alignment.',
    text:'A long label with\na few line breaks\nand unicode (UTF8)\nsymbols such as\na white chess piece \u2655\nand the euro symbol \u20ac\nlooks like this!\n',
    borderColor:'red',
    borderWidth:1,
    top:10
})
container.add(testLabel);

win.add(container);
win.open();


c1b1.addEventListener('click',function(e){testLabel.verticalAlign = Ti.UI.TEXT_VERTICAL_ALIGNMENT_TOP});
c1b2.addEventListener('click',function(e){testLabel.verticalAlign = Ti.UI.TEXT_VERTICAL_ALIGNMENT_BOTTOM});
c1b3.addEventListener('click',function(e){testLabel.verticalAlign = Ti.UI.TEXT_VERTICAL_ALIGNMENT_CENTER});
c2b1.addEventListener('click',function(e){testLabel.textAlign = Ti.UI.TEXT_ALIGNMENT_LEFT});
c2b2.addEventListener('click',function(e){testLabel.textAlign = Ti.UI.TEXT_ALIGNMENT_RIGHT});
c2b3.addEventListener('click',function(e){testLabel.textAlign = Ti.UI.TEXT_ALIGNMENT_CENTER});
c3b1.addEventListener('click',function(e){testLabel.width = Ti.UI.SIZE})
c3b2.addEventListener('click',function(e){testLabel.width = 200})
c3b3.addEventListener('click',function(e){testLabel.width = 150})
c3b4.addEventListener('click',function(e){testLabel.width = 100})
c4b1.addEventListener('click',function(e){testLabel.height = Ti.UI.SIZE})
c4b2.addEventListener('click',function(e){testLabel.height = 200})
c4b3.addEventListener('click',function(e){testLabel.height = 150})
c4b4.addEventListener('click',function(e){testLabel.height = 100})

Comments

  1. Josh Roesslein 2012-07-12

    Created [PR #2554](https://github.com/appcelerator/titanium_mobile/pull/2554) to resolve issue.
  2. Evgenii Tcarev 2012-08-14

    Verified fixed with: Titanium Studio, build: 2.1.1.201207271312 SDK version: 2.2.0.v20120813184911 Devices: LG VS910 4G (2.3.6) Samsung Galaxy Nexus (4.0.4)

JSON Source