[TIMOB-2574] iOS: Expose verticalAlign for Labels

GitHub Issue	n/a
Type	New Feature
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2012-07-11T16:31:18.000+0000
Affected Version/s	Release 2.1.0
Fix Version/s	Sprint 2012-14 API, Release 3.0.0
Components	iOS
Labels	SupportTeam, api, module_label, parity, qe-testadded
Reporter	Ralf Pfeiffer
Assignee	Vishal Duggal
Created	2011-04-15T03:23:10.000+0000
Updated	2012-10-24T22:57:13.000+0000

Description

Problem

The same way it is possible to do Vertical Alignment with TextFields, it wold be great to have the property verticalAlign: on Labels as well verticalAlign:Ti.UI.TEXT_VERTICAL_ALIGNMENT_TOP verticalAlign:Ti.UI.TEXT_VERTICAL_ALIGNMENT_MIDDLE verticalAlign:Ti.UI.TEXT_VERTICAL_ALIGNMENT_BOTTOM

Test case

var win = Ti.UI.createWindow({
	backgroundColor: 'black',
	exitOnClose: true,
	fullscreen: false,
	layout: 'vertical',
	title: 'Label verticalAlign Demo'
});

var label = Ti.UI.createLabel({
	backgroundColor: 'white',
	color: 'black',
	text: 'this is a test',
	verticalAlign:Ti.UI.TEXT_VERTICAL_ALIGNMENT_BOTTOM,
	height: 100
});
win.add(label);
win.open();

Comments

Rick Blalock 2011-04-15
Just chiming in on this LH ticket. This is a very common request from iOS developers. There are numerous requests found in the Q/A forum. Here's one such request from the help desk - http://developer.appcelerator.com/helpdesk/view/61071">http://developer.appcelerator.com/helpdesk/view/61071
Pedro Enrique 2012-01-19 I looked in the source code and tested this and it is already implemented in Android. It needs to be documented. Have not found it on iOS.

Vishal Duggal 2012-07-10 Test Case

   
   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})

Evgenii Tcarev 2012-08-14 Verified fixed with: Titanium Studio, build: 2.1.1.201207271312 SDK version: 2.2.0.v20120813184911 Devices: iPad3 4G (5.1.1) iPhone4 (4.3.5)

JSON Source