TileGroup: refresh layout on resize

Question

I new to using mxml for building apps.

Basically, I'm building a list of tiles (6 of them) using TileGroup. When it initializes on portrait view, it looks great (3 on the first row and 3 on the second).

However, when I change the orientation, I want the tiles to redraw based on the new width and height.

From stack overflow, I found that I can listen to resize event. But, I don't know how to get TileGroup to redraw.

Initially, I thought I could use autoLayout for TileGroup. But, that didn't do the trick. I am having a hard time searching for a solution (maybe I wasn't using the right key words).

Is there a function I can call to redraw?

Or is there another way to make my tile responsive to the orientation?

Here is my code:

<components:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" xmlns:components="spark.components.*" 
             title="Forex Calculator">
<components:states>
    <s:State name="portrait"/>
    <s:State name="landscape"/>
</components:states>
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<s:TileGroup id="mainGroup" includeIn="portrait, landscape" autoLayout="true">
    <s:Rect width="75" height="75">
        <s:fill>
            <s:SolidColor color="0xd54f4f"/>
        </s:fill>
    </s:Rect>
    <s:Rect width="75" height="75">
        <s:fill>
            <s:SolidColor color="0x2f977d"/>
        </s:fill>
    </s:Rect>
    <s:Rect width="75" height="75">
        <s:fill>
            <s:SolidColor color="0xfffca2"/>
        </s:fill>
    </s:Rect>
    <s:Rect width="75" height="75">
        <s:fill>
            <s:SolidColor color="0xfffca2"/>
        </s:fill>
    </s:Rect>
    <s:Rect width="75" height="75">
        <s:fill>
            <s:SolidColor color="0xfffca2"/>
        </s:fill>
    </s:Rect>
</s:TileGroup>   

Please advice! Thanks!

Justin

Answer 1

Re-layout based on resizing happens automatically. However if you don't provide a container (your TileGroup in this instance) with some specific sizing rules it will apply its default sizing behavior, which is to fit its content. Obviously that content doesn't change whether you're in portrait or landscape state, so nothing happens.

I'm not exactly sure what you're trying to do, but setting width="100%" height="100%" will stretch the TileGroup over the entire screen. I.e. its size will be calculated based on its parent container's size instead of its content. Thus the number of columns/rows will change when the state changes.