I was looking at the standard Tile Layout clas and noticed that using it causes all child elements to lay out from left to right and then top to bottom (similar to the FlowBox from Doug McCune's flexlib project. The main difference is that the Tile Lyout in Flex 4 creates equally sized columns and rows. Since each cell is the same size, if the content of one "cell" is smaller or larger than another, you'll end up with lots of apparent padding in one cell and almost none in another. So I created a modified tile layout class that lays children out side by side without making each cell area the same as the others. This way, in cases where you have differently sized child content, you can lay them out perfectly side-by-side. This is just a simple layout and is not fully complete nor fully tested, but it is a start.
import mx.core.ILayoutElement;
import spark.layouts.supportClasses.LayoutBase;
/**
* ModifiedTileLayout
* <p>Creates a visual layout that places child elements side by side until the edge of the visible area is reached and then starts a new row. Similar to the Tile Layout class, except does not create equally sized columns / rows.</p>
* @created: Jun 17, 2010
* @author: Shawn Yale
*
*/
public class ModifiedTileLayout extends LayoutBase
{
override public function updateDisplayList(width:Number, height:Number):void
{
super.updateDisplayList(width, height);
if(!target)
return;
var count:uint = target.numElements;
var elementX:Number = 0;
var elementY:Number = 0;
var lineHeight:Number = 0;
for(var i:int = 0; i < count; i++)
{
var element:ILayoutElement = target.getElementAt(i);
element.setLayoutBoundsSize(NaN, NaN);
// If the sum of the size of the current element and the previous elements
// is less than the amount of the container width,
// place the element on this row
if(element.getLayoutBoundsWidth() + elementX < target.width)
{
element.setLayoutBoundsPosition(elementX, elementY);
// Check the value of the lineHeight against the height of the current element
// If the element is taller than the current lineHeight, make lineHeight equal to the tallest element
if(element.getLayoutBoundsHeight() > lineHeight)
{
lineHeight = element.getLayoutBoundsHeight();
}
elementX += element.getLayoutBoundsWidth();
}
else // Otherwise set the element on a new row and update the elementY position
{
//element.setLayoutBoundsSize(NaN, NaN);
elementX = 0;
elementY += lineHeight;
element.setLayoutBoundsPosition(elementX, elementY);
elementX += element.getLayoutBoundsWidth();
lineHeight = 0;
}
}
}
}