Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-9924

Android: Support vertical align on Labels

    Details

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

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                joshroesslein Josh Roesslein
                Reporter:
                vduggal Vishal Duggal (Inactive)
              • Watchers:
                1 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Backbone Issue Sync is enabled for your project, but we do not have any synchronization info for this issue.

                    Git Source Code