Saturnboy
 10.1

FlowLayout in Flex 4

,

NOTE: See FlexLayouts for all your custom Flex 4 layout needs, and FlowLayout for the latest version.


Another one of my favorite improvements that found its way into Flex 4 is the separation of layouts from containers. The fact that layouts can customized and simply plugged into any container is pretty sweet. It’s a real developer benefit because it makes me faster. I can quickly develop a custom component by leveraging a stock layout. Alternately, I can develop a “new” component by creating a custom layout and plugging it into a stock container.

Layout References

Here’s a short list of useful Flex 4 layout references I was able to dig up. If you have anything to add, please leave a comment, and I’ll update this list.

My FlowLayout

I started with Evtim’s FlowLayout and made a few modifications of my own. I added a single gap parameter that controls both the horizontal and vertical separation of elements, and a border parameter that controls the padding around the outside of all the elements. The other major difference is how my version of the Flow layout handles the very first element.

I make sure the first element (when i = 0) is never shifted down, with a simple if (i > 0) check:

//does the element fit on this line, or should we move to the next line?
if (x + elementWidth > containerWidth) {
    //start from the left side
    x = _border;
 
    //move to the next line, and add the gap
    if (i > 0) { //never shift the first element down
        y += elementHeight + _gap;
    }
}

Here it is (view source enabled):

Flash is required. Get it here!
Files

NOTE: All code was built with Flash Builder 4 Beta 1.


Comments

10.11.2009

1

Looks cool! I was actually pleasantly surprised to see how many folks out there are doing custom layouts now. Keep up the great work!

Cheers,
Evtim

9.22.2010

2

This is great! I’d like to see one that you could have components as the list items, not just text values. I would like to be able to style each item in the list on it’s own.

Joe Smith

7.22.2011

3

Flow layout should really be built in to Flex. Why do we have to all write our own?

7.22.2011

4

@Joe: Just grab the latest flexlayout.org SWC, and throw it in your libs folder. Download now!

Kyle

1.15.2012

5

This is the only version that works perfectly with Scroller and can set padding between elements and container.
Brilliant! Thanks for your great work!

Mahatma

3.18.2012

6

Almost right, but there is one problem. Your solution won’t work without scrolling – in a usual spark group. You should correctly implement measure(). See here http://saprahan.blogspot.com/2012/03/adobe-flex-flow-tabs-layout.html

8.3.2012

7

You can find it on github here:
https://github.com/saturnboy/flexlayouts

Cary

4.18.2013

8

anyway , this code for me is really helpful .. thx

© 2017 saturnboy.com