Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-2574] iOS: Expose verticalAlign for Labels

GitHub Issuen/a
TypeNew Feature
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2012-07-11T16:31:18.000+0000
Affected Version/sRelease 2.1.0
Fix Version/sSprint 2012-14 API, Release 3.0.0
ComponentsiOS
LabelsSupportTeam, api, module_label, parity, qe-testadded
ReporterRalf Pfeiffer
AssigneeVishal Duggal
Created2011-04-15T03:23:10.000+0000
Updated2012-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

  1. 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

  2. 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.
  3. 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})
       
  4. 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