在學習Flex4的過程中，你對自定義布局的概念是否熟悉，這里和大家分享一下Flex4與自定義布局的關系，F(xiàn)lex4/Spark組件架構的新功能之一是可以定制一個容器的布局而不必改變?nèi)萜鞅旧怼Ｄ枰龅木褪嵌x一個自定義布局。

Flex4與自定義布局

如果您還不熟悉Flex4的***功能，那么有些內(nèi)容肯定是您想要了解的。Flex4/Spark組件架構的新功能之一是可以定制一個容器的布局而不必改變?nèi)萜鞅旧怼Ｄ枰龅木褪嵌x一個自定義布局。

Flex4/Spark架構中的容器并不控制它們自己的布局。相反，每種容器具有一個布局屬性，用于確定如何在屏幕上設置子元素的布局。可以使用一個單獨的Group容器，并賦予其一個垂直布局、水平布局或平鋪布局，這取決于您將如何創(chuàng)建它。
代碼很簡單，如下所示：
 

<s:layout> 
<s:VerticalLayout/> 
</s:layout> 

不過真正的好處在于您不必局限于框架中定義的默認布局。您可以輕松定制BaseLayout類來實現(xiàn)自己定制的布局邏輯。下面是一個簡單的例子，顯示了如何實現(xiàn)一個在原點周圍順時針放置組件的布局。只要單擊左下方的按鈕就可以將更多按鈕添加到布局。

下面是主應用程序文件的代碼。可以看到，代碼相當簡單。這就是一個DataGroup，有點像一個重復程序（repeater），它包含一組按鈕。這個容器的布局基于一個自定義布局實現(xiàn)。在creationComplete中，填充DataGroup的數(shù)據(jù)提供程序，從而在布局中創(chuàng)建按鈕實例。

可以看到，DataGroup實例的布局受CircularLayout類控制（該類如下所示）。該類只是循環(huán)遍歷datagroup對象的子對象并將它們按順時針方向放在一個圓圈內(nèi)。我查看了VerticalLayout類的源代碼，弄清了它的工作方式，并由此開始構建自己的布局實現(xiàn)。
 

package  
{  
importmx.core.ILayoutElement;  
 
importspark.layouts.supportClasses.LayoutBase;  
 
publicclassCircularLayoutextendsLayoutBase  
{  
overridepublicfunctionupdateDisplayList(w:Number,h:Number):void  
{  
super.updateDisplayList(w,h);  
 
if(!target)  
return;  
 
varlayoutElement:ILayoutElement;  
varcount:uint=target.numElements;  
 
varangle:Number=360/count;  
varradius:Number=Math.min(target.width/2,target.height/2)-25;  
 
varw2:Number=target.width/2;  
varh2:Number=target.height/2;  
 
for(vari:int=0;i<count;i++)  
{  
layoutElement=target.getElementAt(i);  
 
if(!layoutElement||!layoutElement.includeInLayout)  
continue;  
 
varradAngle: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);  
}  
}  
}  
}  
 
<s:ItemRenderer 
xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/halo"> 
 
<s:states> 
<s:Statenames:Statename="normal"/> 
<s:Statenames:Statename="hovered"/> 
</s:states> 
 
<s:layout> 
<s:BasicLayout/> 
</s:layout> 
 
<s:Buttonlabels:Buttonlabel="{data}"baseColor.hovered="#FF0000"/> 
 
</s:ItemRenderer> 
 

這個示例中使用的項目渲染器實際上是最基本的。它是一個只包含一個按鈕的ItemRenderer實例，簡單明了并且很容易看到產(chǎn)生的結果。

【編輯推薦】

1. Flex基礎 Flex布局學習手冊
2. 深入剖析Flex Builder布局和導航
3. 學習總結 在Flex中如何嵌入Flex字體
4. 揭開Flex正則表達式的神秘面紗
5. FlexBuilder開發(fā)方法及特點解析