TileLayout with dynamic rows and columns for paging

Question

I'm implementing an image gallery which presents assets as equally sized boxes that are forming a grid. I thought that I could easily achieve that by using the spark.layouts.TileLayout but unfortunately I have some additional requirements that I'm unable to implement with it.

The general principal should to be to present as many boxes as possible within given space. The entire layout of the application is liquid and depends on the user's screen resolution.

I've started from a basic DataGroup with a TileLayout:

<s:DataGroup id="dgpImages" width="100%" height="100%" top="12" dataProvider="{ list }" 
    minHeight="0" minWidth="0" clipAndEnableScrolling="true" itemRenderer="LibraryImageRenderer">
    <s:layout>
        <s:TileLayout orientation="rows" clipAndEnableScrolling="true"
            requestedColumnCount="-1" requestedRowCount="-1"
            verticalGap="12" horizontalGap="12" useVirtualLayout="true" />
    </s:layout>
</s:DataGroup>

I don't know the RequestedColumnCount or RequestedRowCount in advance as they depend on the available space, so the above code layouts all elements from left-to-right and then from top-to-bottom - which is as close as you can get from what I really want to achieve.

The problem

This list of boxes should be cable of rendering fake paging. In reality it means that if the last visible row does not entirely fit the available space it should be moved to the next page.

To give you an example let's imagine that we have a list of 10 images. Each one is 10x10 px but my screen resolution only allows me to fit a grid 35x35 px. This means that one page is only capable of presenting 9 images in form of a 3x3 grid (as 5 px is not enough to present a full image). The 10th image should be then transferred to the second page.

The question

This is obviously not happening automatically with the code that I've pasted above as the TileLayout allows for displaying partially visible rows (in a form of a vertically scrolled list). I was wondering how I could achieve the behavior described above.

If the above description does not sound logical please let me know so that I can adapt it (or include more details).

Any help on this will be highly appreciated!

Yes, the question part was indeed missing :) - check my update — MonkeyCoder
Personally, I think you'd be better off creating a custom component for this kind of functionality. You can calculate the size and by knowing the explicit height/width of what you want to display, you can know how many rows/columns are needed. After that, it's only a matter of changing the data depending on which 'page' you want to select (since you won't be using a scrollbar). — J_A_X

Nate Nate · Accepted Answer · 2011-07-08T04:32:39

You need to create a custom layout for this kind of functionality. Good news is I found a tutorial doing almost the exact thing you want to do for ya here:

http://www.adobe.com/devnet/flex/articles/spark_layouts.html

So implement that first. in the updateDisplayList() method, look for this line :

if (x + elementWidth > containerWidth)

when checking for bumping it to the next line, youll check the total height versus the current row height and stop adding elements if it exceeds the boundries. (just break out of the for loop)

Then, all you have to do is page the dataProvider for the group based on the current page.

TileLayout with dynamic rows and columns for paging

1 Answers