container and layout

http://enboga.javaeye.com/blog/207279

 

 

1.管理程序的佈局

容器累組件都位於mx.containers包中。Container類是UIComponent的子類，是所有Flex容器類的父類，每個容器類都在它的基礎上添加自己的功能。

 

1.1控制Application 的佈局

Application 是一個特殊的容器，位於界面元素的根部，包含了整個程序的所有元素。

layout ：

    值爲absolute時，horizontalAlign水平對齊和verticalAlign垂直對齊不起作用，界面上的元素將由各自的座標決定。

 

 

    值爲vertical 或 horizontal時，元素的位置由horizontalAlign和verticalAlign控制。

 

width 長， height 高。決定SWF文件的尺寸。

 

我們可以設置如下的屬性，所有組件公有：

horizontalGap 水平間距

vericalGap 垂直間距

paddingTop 頂部邊距

paddingLeft 左邊距

paddingRight 右邊距

paddingBottom 底邊距

 

Constraint layout 約束佈局，只能在layout屬性值爲absolute才能使用，具有這一特性的容器有：Application、Canvas、Panel和Panel的子類TitleWingdow

點擊元素得到如下界面：

 

 

如果對某一組件使用了約束佈局，它會被強制定位在相應的位置，設置的X,Y座標會失效。

 

ApplicationContolBar是和Application相關的一個容器，通常用來提供全局導航。有水平（默認）和垂直方向選擇。它的dock屬性，表示是否強行停靠在Application的頂部。默認false，被當作一個普通的組件。true，始終在頂部，寬度爲100%。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" horizontalAlign="left" verticalAlign="top" height="100%" width="100%"
 horizontalGap="0" verticalGap="0" paddingTop="0">
    <mx:Button label="Button1" height="120" x="24" y="0"/>
    <mx:Button label="Button2" top="0" bottom="30" width="72" horizontalCenter="-72"/>
    <mx:Button label="Button3" width="240" x="168" y="0"/>
    <mx:ApplicationControlBar dock="true">
        <mx:Label text="這裏是頂部導航" width="93" height="20"/>
    </mx:ApplicationControlBar>
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
layout="absolute" horizontalAlign="left" verticalAlign="top" height="100%" width="100%"
 horizontalGap="0" verticalGap="0" paddingTop="0">	
	<mx:Button label="Button1" height="120" x="24" y="0"/>
	<mx:Button label="Button2" top="0" bottom="30" width="72" horizontalCenter="-72"/>
	<mx:Button label="Button3" width="240" x="168" y="0"/>
	<mx:ApplicationControlBar dock="true">
		<mx:Label text="這裏是頂部導航" width="93" height="20"/>
	</mx:ApplicationControlBar>
</mx:Application>

 

 

1.2 Canvas

Canvas 直接繼承自Container，體積小，使用靈活。在它裏面的元素只能由X,Y來定位。如果元素超出 Canvas 的區域範圍， Canvas 會自動增加滾動條。每個容器默認情況下都會自動帶滾動條。可以通過horizontalScrollPolicy和 verticalScrollPolicy 的屬性值來控制，on/off/auto。在AS中對應ScrollPolicy.ON, ScrollPolicy.OFF, ScrollPolicy.AUTO。

 

1.3 VBox 和 HBox

VBox 和 HBox 都是Box的子類，和Canvas相比,Box對子級元素採取規則的佈局方式，其中VBox內的元素垂直方向分佈，而HBox水平方向分佈。通過horizontalAlign和verticalAlign控制容器內的元素對齊方式。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:HBox x="27" y="30" width="50%" height="50%" horizontalAlign="left"
            verticalAlign="middle">
        <mx:Button label="Button"/>
        <mx:Label text="這是一個HBox"/>
    </mx:HBox>
    <mx:VBox width="50%" x="263" y="30" height="100%">
        <mx:Label text="這是一個VBox"/>
        <mx:Button label="Button"/>
    </mx:VBox>
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:HBox x="27" y="30" width="50%" height="50%" horizontalAlign="left" 
            verticalAlign="middle">
		<mx:Button label="Button"/>
		<mx:Label text="這是一個HBox"/>
	</mx:HBox>
	<mx:VBox width="50%" x="263" y="30" height="100%">
		<mx:Label text="這是一個VBox"/>
		<mx:Button label="Button"/>
	</mx:VBox>	
</mx:Application>

 

1.4 用DividedBox分割界面

DividedBox繼承自Box類，它有兩個子類：HDividedBox和VDividedBox。類似於HBox和VBox，多了在子級元素之間增加了可以拖動的分割塊。拖動分割塊可以動態的調整分割塊附近元素的長寬。

borderStyle是組件的樣式之一，表示邊框樣式，默認：none，表示無邊框。solid爲實心線條。

liveDragging：true 表示在拖動時，在鬆開鼠標後，調整位置。false 拖動時調整。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:HDividedBox width="90%" height="90%" liveDragging="false" borderStyle="solid"
            x="10" y="10">
        <mx:Canvas width="200" height="246">
            <mx:Label x="33" y="10" text="一個Canvas容器"/>
        </mx:Canvas>
        <mx:HBox width="50%" height="50%">
            <mx:Label text="HBox容器" width="140"/>
            <mx:HBox width="50%" height="50%">
                <mx:Label text="HBox內的HBox" width="140"/>
            </mx:HBox>
        </mx:HBox>
    </mx:HDividedBox>
</mx:Application>