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
Posts: 297
Registered: ‎10-30-2010
My Device: PlayBook
My Carrier: other

IconButton Icon goes past the Button's bounds?!!

[ Edited ]

Say the Icon Button is 100x100 pixels big and the image is 200x200 pixels.

The icon seems to appear past the bounds of the button. I use the setIcon method with the filename of the image.

 

1) How do I make the Icon "Resize to fit" without resizing the image file?

 

2) How do I enable clipping, so that the icon won't go past the borders of the button? This time, without resizing the image to fit.

 

 

 

Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: IconButton Icon goes past the Button's bounds?!!

hey,

 

just to be clear i have a couple of questions. do you mind if the button itself expands to fit the image inside of it (200x200 or w/e size the image is)? or do you want the image inside to become smaller to fit the 100x100 so the button is the same size all the time no matter the size of the image. thanks!

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
Developer
Posts: 297
Registered: ‎10-30-2010
My Device: PlayBook
My Carrier: other

Re: IconButton Icon goes past the Button's bounds?!!

[ Edited ]

I would like to learn both methods.

One where the button itself expands to fit the image. AND where the image shrinks to fit inside the button.

 

Developer
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10
My Carrier: none

Re: IconButton Icon goes past the Button's bounds?!!

It looks like the IconButton already clips/masks itself so that the image does not get drawn outside of its own bounds.  Following is a simple example, using a 25x250 random image, drawn into a 100x100 IconButton.  It creates a secondary BitmapData object and draw()s the source image into it, with a Matrix set up to scale both axes up or down as required to exactly fit into the IconButton's own bounds.  You should be able to extend this to your own requirements easily.

 

 

package
{
    import flash.display.Sprite;
    import flash.display.BitmapData;
    import flash.geom.Matrix;
    import qnx.ui.buttons.IconButton;

    [SWF(width="1024", height="600", backgroundColor="#cccccc", frameRate="30")]

    public class IconButton1 extends Sprite
    {
        public function IconButton1()
        {
            var icon:IconButton = new IconButton();
            icon.x = 10;
            icon.y = 10;
            icon.width = 100;
            icon.height = 100;

            var src:BitmapData = new BitmapData(25, 250);
            src.noise(1234);

            var image:BitmapData = new BitmapData(icon.width, icon.height);
            var mat:Matrix = new Matrix();
            mat.scale(icon.width / src.width, icon.height / src.height);
            image.draw(src, mat);

            icon.setIcon(image);
            addChild(icon);
        }
    }
}

 

 


Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: IconButton Icon goes past the Button's bounds?!!

[ Edited ]

hey,

 

to resize the image to fit the button without having the button grow any bigger, we will need to use the loader object to load the image and then resize it and finally set the icon. below is a sample code to see it in action. We are taking an Icon.jpg image that is 200x200 and resizing it to fit the icon button of 100x100 size. There are comments in the application to help you along the way:

 

IconButtonTest.as:

 

 

package
{
	import flash.display.Bitmap;
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.net.URLRequest;
	
	import qnx.ui.buttons.IconButton;
	
	public class IconButtonTest extends Sprite
	{
		private var myIconButton:IconButton;
		
		public function IconButtonTest()
		{
			super();
			
			// support autoOrients
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			/*
			 * Create your IconButton object setting the
			 * position and the size of the button
			*/
			
			myIconButton = new IconButton();
			myIconButton.setPosition(10,10);
			myIconButton.setSize(100,100);
			
			/*
			 * Function loadIcon created to programatically
			 * resize our image to fit the icon (url provided)
			*/
			
			loadIcon(myIconButton, "icon.jpg");
			
			/*
			 * Add the icon button to your display list
			*/
			
			addChild(myIconButton);
		}
		
		private function loadIcon(btn:IconButton, url:String):void
		{	
			/*
			 * We will use the loader class to load our image and then
			 * convert it to bitmap after the image has been fully loaded
			 * btn = the icon button you want to set the image for
			 * url = image location (url string)
			*/
			
			var loader:Loader = new Loader();
			loader.load(new URLRequest(url));
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, resizeImage);
			
			/*
			 * After the image is fully laoded into your application, we want to set
			 * the icon for the icon button
			*/
			
			function resizeImage(e:Event):void
			{
				var con:Loader = Loader(e.target.loader);
				
				/*
				 * Resize your loaded image to the size of your button
				*/
				
				con.content.width = btn.width;
				con.content.height = btn.height;
				
				/*
				 * Set the icon for the btn (your icon button) to the 
				 * loaded data converted into bitmap (image) data
				*/
				
				btn.setIcon(Bitmap(con.content));
				
			}
			
		}
		
	}
}

 

This is option two from your list of ways to accomplish what you want. I will try to work on the other option of having hte button resize to accomodate for the image size. hope this 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