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>