bottom to top TileLayout

Question

I need a TileLayout rendering elements bottom to top and right to left. Something like this:

I managed to trick the TileLayout for the "right to left" part, by setting the 'layoutDirection' attribute of my container to "rtl", but there is no equivalence for the vertical rendering.

<s:Group layoutDirection="rtl">
    <s:layout>
        <s:TileLayout columnWidth="250" horizontalGap="8"/>
    </s:layout>

    <!-- etc -->    
    <s:Group id="fakeGroup3" layoutDirection="ltr"/>
    <s:Group id="fakeGroup2" layoutDirection="ltr"/>
    <s:Group id="fakeGroup1" layoutDirection="ltr"/>

</s:Group>

Is there a simple way to achieve this? Or should I override TileLayout?!?

Answer 1

You can anchor your Tile layout group to the bottom of the page:

<s:Group width="100%" height="100%" id="outermostLayoutContainer">
    <s:Group layoutDirection="rtl" width="100%" bottom="0">
        <s:layout>
            <s:TileLayout columnWidth="250" horizontalGap="8"/>
        </s:layout>

        <!-- etc -->    
        <s:Group id="fakeGroup3" layoutDirection="ltr"/>
        <s:Group id="fakeGroup2" layoutDirection="ltr"/>
        <s:Group id="fakeGroup1" layoutDirection="ltr"/>

    </s:Group>
</s:Group>

The inner Group with bottom="0" will push up towards the top of the screen based on its children.