[TIMOB-9924] Android: Support vertical align on Labels
GitHub Issue | n/a |
---|---|
Type | New Feature |
Priority | Medium |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2012-07-13T15:49:12.000+0000 |
Affected Version/s | Release 2.1.0 |
Fix Version/s | Sprint 2012-15 API, Release 3.0.0 |
Components | Android |
Labels | api, module_label, parity, qe-testadded |
Reporter | Vishal Duggal |
Assignee | Josh Roesslein |
Created | 2012-07-10T15:16:11.000+0000 |
Updated | 2012-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})
Created [PR #2554](https://github.com/appcelerator/titanium_mobile/pull/2554) to resolve issue.
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)