FLEX4自定义布局

1.自定义布局要点
    (1)继承BaseLayout类
    (2)重载updateDisplayList()
    (3)利用FOR循环，获取所有的待显示元素，计算X和Y坐标值，用setLayoutBoundsPosition()进行显示。
    for (var i:int = 0; i < count; i++)
    {
       layoutElement = target.getElementAt(i);
       //计算X和Y坐标的值
       layoutElement.setLayoutBoundsPosition( w2 + (_x * radius) - 25, h2 + (_y * radius) - 10 );
    ｝

例1：实现一个在原点周围顺时针放置组件的布局


    xmlns:fx=""
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    xmlns:layouts="layouts.*">
   
   
   
                    for ( var x:int = 0; x < 10; x++ ){
                dataSource.addItem( dataSource.length );
            }
        ]]>
   
   
   
       
   
   
            width="100%" height="100%"
        dataProvider="{ dataSource }"
        itemRenderer="SimpleItemRenderer">
       
       
           
       
       
   
   
            left="5" bottom="5"
        label="Click to Add a Button"
        click="dataSource.addItem( dataSource.length )" />
   



    xmlns:fx=""
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/halo">
   
   
       
       
   
   
   
       
   
   
   
   



package layouts
{
    import mx.core.ILayoutElement;
    import spark.layouts.supportClasses.LayoutBase;
   
    public class CircularLayout extends LayoutBase
    {
        override public function updateDisplayList(w:Number, h:Number):void
        {
            super.updateDisplayList(w, h);
           
            if (!target)
                return;
           
            var layoutElement:ILayoutElement;
            var count:uint = target.numElements;
           
            var angle : Number = 360/count;
            var radius : Number = Math.min( target.width/2, target.height/2 ) - 25;
           
            var w2 : Number = target.width/2;
            var h2 : Number = target.height/2;
           
            for (var i:int = 0; i < count; i++)
            {
                layoutElement = target.getElementAt(i);
               
                if (!layoutElement || !layoutElement.includeInLayout)
                    continue;
               
                var radAngle : Number = (angle * i) * (Math.PI / 180) ;
               
                var _x : Number = Math.sin( radAngle );
                var _y : Number = - Math.cos( radAngle );
               
                layoutElement.setLayoutBoundsPosition( w2 + (_x * radius) - 25, h2 + (_y * radius) - 10 );
            }
        }
    }
}

例2：平行添加长方形框


               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo"
               xmlns:layouts="layouts.*"
               viewSourceURL="srcview/index.html"
               creationComplete="creationCompleteHandler(event)">

   
                    import mx.events.FlexEvent;
            import mx.graphics.SolidColorStroke;
            import spark.primitives.Rect;

            protected function buttonClickHandler(event:MouseEvent):void
            {
                addRectangle();
            }
            protected function creationCompleteHandler(event:FlexEvent):void
            {
                for(var i:int;i<7;i++)
                {
                    addRectangle();
                }
            }
            protected function addRectangle():void
            {
                var r:Rect = new Rect();
                r.width = 100;
                r.height = 20;
                r.stroke = new SolidColorStroke(0x9Bc5dc);
                container.addElement(r);
            }
        ]]>
   

                  top="0"
              horizontalCenter="0"
              click="buttonClickHandler(event)" />
                 left="0" right="0" top="40" bottom="0">
       
          
       
   



package layouts
{
    import mx.core.ILayoutElement;
    import spark.components.supportClasses.GroupBase;
    import spark.layouts.supportClasses.LayoutBase;

    public class StepLayout extends LayoutBase
    {
       
        private var _columns:int = 5;
        [Inspectable(category="General")]

        public function get columns():int
        {
            return _columns;
        }

        public function set columns(value:int):void
        {
            if (_columns == value)
                return;

            _columns = value;
            invalidateTargetSizeAndDisplayList();
        }
       

        override public function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            var layoutTarget:GroupBase = target;
           
            var layoutElement:ILayoutElement;
             var num:Number = target.numElements
    
             var row:Number = 0;   
             var col:int = 0;
    
            for (var index:int = 0; index < num; index++)
            {
                layoutElement = layoutTarget.getElementAt(index);
                layoutElement.setLayoutBoundsSize(NaN,NaN);   
               
                var elementWidth:Number = layoutElement.getLayoutBoundsWidth();
                var elementHeight:Number = layoutElement.getLayoutBoundsHeight();
               
                var elementX:Number = col * elementWidth;
                var elementY:Number = col * elementHeight + row * elementHeight;
   
                layoutElement.setLayoutBoundsPosition(elementX,elementY);
               
                col++;
               
                if(col == _columns)
                {    col = 0;
                    row++;
                }
            }
        }
       
        private function invalidateTargetSizeAndDisplayList():void
        {
            var g:GroupBase = target;

            if (!g)
                return;
            g.invalidateSize();
            g.invalidateDisplayList();
        }
    }
}