Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Adobe AIR Development

Reply
Developer
xshadow
Posts: 50
Registered: ‎10-26-2008
My Device: Z10
My Carrier: MTS UKR
Accepted Solution

Center label with autosize

Hello,

 

How to create a Label control which will be autosized and horizontally centered? It shouldn't contain any hardcoded sizes or positions.

 

Here is my code:

 

	[SWF(width="1024", height="600", backgroundColor="#003366", frameRate="30")]
	public class Test extends Sprite
	{
		private var mainContainer:Container;
		private var titleLabel:Label;
		
		public function Test()
		{
			super();

			mainContainer = new Container();
			mainContainer.margins = Vector.<Number>([20,20,20,20]);
			mainContainer.flow = ContainerFlow.VERTICAL;
			mainContainer.align = ContainerAlign.MID;
			mainContainer.debugColor = 0xff0000;

			titleLabel = new Label();
			titleLabel.autoSize = TextFieldAutoSize.CENTER;
			titleLabel.text = "Here is a text of the title";
			
			var format:TextFormat = new TextFormat();
			format = new TextFormat();
			format.align = TextFormatAlign.CENTER;
			format.font = "Verdana";
			format.color = 0xffffff;
			format.size = 26;
			titleLabel.format = format;
			
			mainContainer.addChild(titleLabel);
			addChild(mainContainer);

			// Is this required to layout mainController on the full screen?
			mainContainer.setSize(stage.stageWidth, stage.stageHeight);
		}
}

 

 

I need titleLabel be centered horizontally.

Here is how it looks like on simulator:

Screenshot

 

 

Thanks

Please use plain text.
Developer
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Center label with autosize

hey,

 

containers are a doozy sometimes but you just gotta find the right work around. the way that containers work is they position everything based on the size of the objects its positioning. so when it positioned your titleLabel object it was positioning it based on the 100px default width of the Label object. even when you apply the autoSize property it is simply allowing the inner textfield object to overflow its "container" and not actually resizing the label object. anyways long story short insert the following line after you have formatted your label object:

 

 

titleLabel.setSize(titleLabel.textWidth, titleLabel.textHeight);

 

 

this will give the proper size to your label object.

 

your final code will look like this:

 

 

[SWF(width="1024", height="600", backgroundColor="#003366", frameRate="30")]
public class Test extends Sprite
{
private var mainContainer:Container;
private var titleLabel:Label;

public function Test()
{
super();

mainContainer = new Container();
mainContainer.margins = Vector.<Number>([20,20,20,20]);
mainContainer.flow = ContainerFlow.VERTICAL;
mainContainer.align = ContainerAlign.MID;
mainContainer.debugColor = 0xff0000;

titleLabel = new Label();
titleLabel.autoSize = TextFieldAutoSize.CENTER;
titleLabel.text = "Here is a text of the title";

var format:TextFormat = new TextFormat();
format = new TextFormat();
format.align = TextFormatAlign.CENTER;
format.font = "Verdana";
format.color = 0xffffff;
format.size = 26;
titleLabel.format = format;

titleLabel.setSize(titleLabel.textWidth, titleLabel.textHeight);


mainContainer.addChild(titleLabel);
addChild(mainContainer);

// Is this required to layout mainController on the full screen?
mainContainer.setSize(stage.stageWidth, stage.stageHeight);
}
}

 

hope that helps. good luck!

 

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Please use plain text.
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: Center label with autosize

Sometimes, depending on the font, textWidth will clip the actual font width.  You may need to pad the textWidth if you see this occur (typically +5 does the trick).

Please use plain text.
Developer
xshadow
Posts: 50
Registered: ‎10-26-2008
My Device: Z10
My Carrier: MTS UKR

Re: Center label with autosize

Thanks to everyone.

 

It works, but as mentioned, its clipped. Here is a screenshot:

Screenshot

 

Looks like Label has internal margins. Are there any way to get size of them and do not add hard-coded values to the width or height?

 

Or maybe we can ask Container to re-layout itself after Label has been autosized?

 

Thanks

Please use plain text.
Developer
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Center label with autosize

hey,

 

ive been running a few tests here and there and i cant recreate the clipping of the text. here is the exact code i am running that works for me:

 

 

package
{
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	import flash.text.TextFormatAlign;
	
	import qnx.ui.core.Container;
	import qnx.ui.core.ContainerAlign;
	import qnx.ui.core.ContainerFlow;
	import qnx.ui.display.Image;
	import qnx.ui.text.Label;

	
	[SWF(width="1024", height="600", backgroundColor="#CCCCCC", frameRate="30")]
	public class ContainerTest extends Sprite
	{	
		private var mainContainer:Container;
		private var titleLabel:Label;
		
		public function ContainerTest()
		{
			super();
			
			mainContainer = new Container();
			mainContainer.margins = Vector.<Number>([20,20,20,20]);
			mainContainer.flow = ContainerFlow.VERTICAL;
			mainContainer.align = ContainerAlign.MID;
			mainContainer.debugColor = 0xff0000;
			
			
			addChild(mainContainer);
			
			titleLabel = new Label();
			titleLabel.text = "I am a long text and i will not be bounded by my label (extra letter) B";

			titleLabel.autoSize = TextFieldAutoSize.CENTER;
			
			var format:TextFormat = new TextFormat();
			format = new TextFormat();
			format.font = "Verdana";
			format.color = 0x000000;
			format.size = 26;
			titleLabel.format = format;
			
			titleLabel.setSize(titleLabel.textWidth, titleLabel.textHeight);
			
			titleLabel.graphics.beginFill(0xFF0000);
			titleLabel.graphics.drawRect(0,0,titleLabel.width, titleLabel.height);
			titleLabel.graphics.endFill();
			
			mainContainer.addChild(titleLabel);
			
			// Is this required to layout mainController on the full screen?
			mainContainer.setSize(stage.stageWidth, stage.stageHeight);
			
		}
	}
}

 

lemme know if it still gets cut off. good luck!

 

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Please use plain text.
Developer
xshadow
Posts: 50
Registered: ‎10-26-2008
My Device: Z10
My Carrier: MTS UKR

Re: Center label with autosize

thanks a lot for your help!

 

I don't know why, but now it works! :smileyhappy:

Please use plain text.