A FlowBox arranges IUIComponents in a row/column until no more IUIComponents fit in that row/column. The IUIComponents will be arranged to their desired size.
In addition the FlowBox offers the possibility to choose different alignment and flow settings which are also modifiable at runtime.
These are the possible alignment values of the FlowBox:
Alignment.LEFT (default)Alignment.TOPAlignment.BOTTOMAlignment.RIGHTAlignment.TOP_LEFTAlignment.TOP_RIGHTAlignment.BOTTOM_LEFTAlignment.BOTTOM_RIGHTThese are the possible flow values of the FlowBox:
Flow.LEFT_TO_RIGHT (default)Flow.RIGHT_TO_LEFTFlow.TOP_TO_BOTTOMFlow.BOTTOM_TO_TOPNOTE: keep in mind that the IUIComponents will be arranged to their alignment settings. This could lead to unintentional effects. F.e. with a Flow.BOTTOM_TO_TOP and an Alignment.BOTTOM_RIGHT, per default the components are not aligned to the right. To do this, the alignment settings have to be adjusted. This behaviour is intended, because it raises more flexibility.
The following example demonstrates some style settings for the FlowLayout:
package { import com.addicted2flash.layout.component.Application; import com.addicted2flash.layout.component.FlowBox; import com.addicted2flash.layout.core.UIContainer; import com.addicted2flash.layout.util.Alignment; import com.addicted2flash.layout.util.Flow; /** * @author Tim Richter */ public class FlowBoxTest extends Application { private var _flowBox: UIContainer; public function FlowBoxTest() { super( ABSOLUTE ); _flowBox = new FlowBox( Flow.BOTTOM_TO_TOP, Alignment.BOTTOM_RIGHT ); _flowBox.desiredPercentWidth = 1; _flowBox.desiredPercentHeight = 1; _flowBox.add( new SimpleComponent( 500, 200 ) ); _flowBox.add( new SimpleComponent( 0.3, 100 ) ); _flowBox.add( new SimpleComponent( 100, 0.5 ) ); container.add( _flowBox ); } } }
SimpleComponent.as
package layout { import com.addicted2flash.layout.core.Component; import flash.display.Graphics; import flash.display.Sprite; import flash.text.TextField; import flash.text.TextFieldAutoSize; /** * @author Tim Richter */ public class SimpleComponent extends Component { private static var _id: int = 0; private var _tField: TextField; public function SimpleComponent( w: Number, h: Number ) { desiredWidth = w; desiredHeight = h; _tField = new TextField( ); _tField.autoSize = TextFieldAutoSize.CENTER; _tField.selectable = false; _tField.textColor = 0x999999; _tField.text = ( _id++ ).toString(); display.addChild( _tField ); } override public function arrange(): void { var g: Graphics = display.graphics; g.clear(); g.beginFill( 0xccff00 ); g.drawRect( 0, 0, width, height ); g.endFill(); _tField.x = ( width - _tField.textWidth ) * 0.5; _tField.y = ( height - _tField.textHeight ) * 0.5; } } }