SnakeLayout
August 13, 2010
SnakeLayout is a custom layout that arranges visual components in order, row by row, just like FlowLayout, but flops the direction and starting point with each successive row. For example, the first row is left-to-right starting at the left edge of the container, the second row is right-to-left starting at the right edge, and so on.
Usage
<s:Group> ... <s:layout> <s:SnakeLayout horizontalGap="4" verticalGap="8" /> </s:layout> </s:Group>
Params
- horizontalGap
- The horizontal space between the items in pixels.
- verticalGap
- The vertical space between the items in pixels.
Sample
NOTE: watch what happens as you move the num boxes slider.
Flash is required. Get it here!
full screen | view source | download
Author
Layout & sample by Justin, based on FlowLayout, which is in turn based on example code by Evtim The Godfather Georgiv.
Maxim Kachurovskiy
Wow! That’s crazy. Never seen such layout anywhere. How do you expect to use it?
justin
@Maxim: I’ve seen snake layouts in two places, but I’m sure there are many uses. The first is a process flow diagram, where A flows to B, B flows to C, etc. If you try to display lots of elements that are ordered, you end up with a snake. The second use is for tournament formats like the World Cup. Whenever you see 1 v 16, 2 v 15, 8 v 9, etc. you are seeing a snaked layout.
dave
Other usage ideas:
I don’t think I’ll ever use it but for some reason it’s awesome!