Flex mobile resized image layout

Question

I'm trying to display a resized image in a flex mobile application and I couldn't get it displayed correctly. When set to width="100%" it looks OK. (Image 1) When I scale it down to let's say 30% by Flex (scaleMode="letterbox"), it is scaled down, but the components above and below the image still keep the distance from the Image control as it were 100% height. (Image 2)

I tried dozens of layout tricks from autolayout=true to dynamically scaled elements, but couldn't find a solution. What am I doing wrong?

(I use Flash Builder 4.7, Flex 4.6 and Air SDK 13.0 on a 64-bit Win 7 Machine.)

Answer 1

Thank you for your answer, really appreciate it! However, this is unfortunately not a solution as it just sets the height the same as width. In this case, the two labels gets closer to the image, but not in the place where they supposed to go.

Meanwhile I could find a way to correctly resize the image along with its bounding box. The main idea is to put the image in a container, and adjust the image size according to the ratio of the container size divided by the original image size.

Then the image will fully fill the container, and I can then set the desired scaling ratio by adjusting the container's width.

Here is my code that works perfectly, and I really hope that it will help someone else in the future:

<?xml version="1.0" encoding="utf-8"?>

<fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;
        import spark.components.Image;

        private var img:Image = new Image();

        private function init():void {
            drawImg("assets/image.png");                
        }

        private function drawImg(src:String):void {
            img.source = src;
            img.scaleMode = "letterbox";
            img.smooth = true;
            imgHolder.addElement(img);
            img.addEventListener(FlexEvent.READY, imgStatus);

        }

        private function imgStatus(e:FlexEvent):void {
            var imgw:Number = e.currentTarget.bitmapData.width;
            var imgh:Number = e.currentTarget.bitmapData.height;
            var ratio:Number = Number(imgHolder.width/imgw);
            img.width = imgw*ratio
            img.height = imgh*ratio
        }

    ]]>
</fx:Script>

<s:VGroup width="100%" horizontalAlign="center">
    <s:Label text="Foo" />
    <s:HGroup id="imgHolder" width="30%" />
    <s:Label text="Bar" />
</s:VGroup>

First I always got a null object, so I found that I need to listen for the image to be fully loaded, and now it works perfectly.

Again, the desired width property can be set on the container and not the image.

Here's a screenshot with the results.

Answer 2

The height of the image indeed remains untouched by only setting the image width. If you draw a rectangle around the image you will see the bounding box with the same size all the time.

You can modify your code like the following to have a dynamic height and have the labels positioned as you wish:

<s:VGroup width="100%"
          horizontalAlign="center">

    <s:Label verticalAlign="bottom"
             text="Foo" />

    <s:Image id="img"
             source="test.gif"
             width="30%"
             height="{img.width}"
             scaleMode="letterbox" />

    <s:Label verticalAlign="top"
             text="Bar" />

</s:VGroup>