Programming Flex2 - 六.布局的管理

翻译 2007年09月20日 23:16:00
Flex的可视组件中,分为容器类和用户操作类。

两者最大的区别在于,容器类不直接响应用户的操作,只对可视组件进行有规则布局。因此,容器类组件的tabEnabled和tabChildren属性,默认分别为false和true。

在Flex中,容器内的元素默认都是匿名的,并继承于UIComponent。如果要自定义能够添加入容器的组件,必须要实现IUIComponent接口。

Flex中的容器就好像Flash Player的显示列表,处理起来也有相同的一些API:
addChild(), addChildAt(), getChildAt(), getChildByName(), getChildIndex(), getChildren(), removeAllChildren(), contains(), setChildIndex(), 以及属性 numChildren。
这些几乎都被重载过,因为不同的容器在元素的添加,删除和摆放上都有不同的规则。和Flash Player的最初方法比起来,某些容器在添加元素上,不仅要加入指定的元素,还要多一些框框条条之类的摆设(chrome:详细解释)。

布局规则
布局规则定义了一个容器在初始时,有元素添加/删除时,或者容器被改了尺寸时,其容器中元素位置和尺寸的计算。
    与之相关的一个属性叫autoLayout,默认为true。当设置成false时,布局规则在初始和元素添加/删除时照旧,但容器尺寸改变时,就不会有任何反应。

在实现规则时,程序首先测量出各元素的大小和之间的距离,然后决定合适的位置。
    与之相关的一个属性叫includeInLayout,默认为true。当设置成false时,程序测量时忽略该元素。

大多数容器的布局规则分为两类:Box和Canvas。

Box布局规则
Box布局规则指定容器内各元素是以水平排放或是垂直排放。水平方向由左向右,垂直方向自上向下。
对应的属性direction值为BoxDirection.HORIZONTAL或BoxDirection.VERTICAL。

如果容器的宽度缺省,则以容器中最宽元素的宽度为容器宽度。
高度亦然。
如果明确设置了容器的宽/高度,当容器中所有元素的宽/高度之和大于设置值时,容器出现滚动条。
如果horizontalScrollPolicy/verticalScrollPolicy设置为off,则不出现滚动条。

一般Box不作为直接使用的容器类型,而采用继承者VBox或HBox。

Canvas布局规则
Canvas布局规则指定容器内各元素都必须明确位置关系。
位置关系分两种,一种是(x,y)坐标定位,另一种称为约束(Constraint)定位。

约束定位定义了6种对应的属性:top,bottom,left,right,horizontalCenter,verticalCenter。前4种是数值,后2种是boolean。

如果设置了元素的top属性,则元素顶部离容器顶部相差top个像素。
如果设置了元素的bottom属性,则元素底部离容器底部相差bottom个像素。
如果同时设置了元素的top和bottom属性,则元素的高度等于容器高度减top再减bottom后,剩余的像素。
left和right规则同上。
如果同时设置了元素的top/bottom和y,则忽略y。left/right和x,则忽略x。
width/height属性可以设置为百分比(在AS中是percentWidth/percentHeight)
一个容器里面的不同元素,可以混合使用坐标定位和约束定位。

混合布局规则
Application,Panel,TitleWindow这些容器同时拥有Box和Canvas布局规则。
由属性layout决定,值为ContainerLayout.ABSOLUTE,ContainerLayout.HORIZONTAL和ContainerLayout.VERTICAL。
第一种是Canvas布局规则,后两者是Box布局规则。

Grid布局规则
类型HTML的Table。
<table>相当于<mx:Grid>
<tr>相当于<mx:GridRow>
<td>相当于<mx:GridItem>
colspan和rowspan属性相当于GridItem的colSpan和rowSpan属性
align属性相当于horizontalAlign
valign属性相当于verticalAlign

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
<mx:Grid>
        
<mx:GridRow>
            
<mx:GridItem width="100">
                
<mx:Label text="Select a Color:"/>
            
</mx:GridItem>
            
<mx:GridItem>
                
<mx:ColorPicker/>
            
</mx:GridItem>
        
</mx:GridRow>
        
<mx:GridRow>
            
<mx:GridItem colSpan="2" horizontalAlign="right">
                
<mx:Button label="Submit"/>
            
</mx:GridItem>
        
</mx:GridRow>
    
</mx:Grid>
</mx:Application>

Tile布局规则
类似正方化的Grid,所有元素成网格式摆放。
水平和垂直的方向优先性取决于direction属性值等于TileDirection.HORIZONTAL或TileDirection.VERTICAL。
网格的宽高,取决于最宽,最高元素的宽高。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
<mx:Tile>
        
<mx:CheckBox label="运动"/>
        
<mx:CheckBox label="听歌"/>
        
<mx:CheckBox label="看书"/>
        
<mx:CheckBox label="上网"/>
        
<mx:CheckBox label="旅游"/>
        
<mx:CheckBox label="泡吧"/>
        
<mx:CheckBox label="看电影"/>
    
</mx:Tile>
</mx:Application>

Form布局规则
表单式布局。就两个元素,FormHeading还有FormItem。
两者都各占一行显示。FormItem遵守Box布局规则。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
<mx:Form>
        
<mx:FormHeading label="Account Information"/>
        
<mx:FormItem label="First Name, Last Name" direction="horizontal">
            
<mx:TextInput id="firstName"/>
            
<mx:TextInput id="lastName"/>
        
</mx:FormItem>
        
<mx:FormItem label="e-mail">
            
<mx:TextInput id="email"/>
        
</mx:FormItem>
        
<mx:FormHeading label="Bug Report"/>
        
<mx:FormItem label="Version">
            
<mx:TextInput id="version"/>
        
</mx:FormItem>
        
<mx:FormItem label="Comment">
            
<mx:TextArea id="comment" editable="true" width="326" height="100"/>
        
</mx:FormItem>
    
</mx:Form>
</mx:Application>

缺口,边框和空袭
paddingTop, paddingBottom, paddingLeft和paddingRight
border
horizontalGap,verticalGap
类似HTML。

容器的嵌入
当一个容器嵌入到另一个容器时,被嵌入的容器性质可视为一个元素。

处理滚动和剪辑
滚动条的对应属性horizontalScrollPolicy/verticalScrollPolicy有3个值auto, off, on。默认为auto。
剪辑的意思是指容器的元素整体尺寸在超越容器尺寸后,是否仍显示超越部分。
对应属性clipContent,默认为false。并且只有在滚动条被明确设置为off时,设置为true才有效。但这样可能会由于强制显示超越部分,而破坏整个布局。

Spacer
还有一个比较特殊的元素Spacer。可以自定义留白的大小。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    
<mx:HBox>
        
<mx:Button label="First"/>
        
<mx:Spacer width="40"/>
        
<mx:Button label="Second"/>
        
<mx:Button label="Third"/>
    
</mx:HBox>
</mx:Application>

最后一个比较综合的例子

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
<mx:Panel layout="horizontal" width="100%" height="100%" title="Putting it all Together">
        
<mx:VDividedBox direction="vertical" width="200" height="100%">
            
<mx:List width="100%" height="200">
            
</mx:List>
            
<mx:List width="100%">
            
</mx:List>
        
</mx:VDividedBox>
        
<mx:Canvas width="100%" height="100%">
            
<mx:Button bottom="10" right="10" label="Save"/>
        
</mx:Canvas>
    
</mx:Panel>
</mx:Application>

代码实现UI6宫格布局

代码写UI实现一页6个6宫格 private void addLongViewHomePagerView(LinearLayout mLinearLayoutHome) { ...
  • solarsaber
  • solarsaber
  • 2016年09月06日 14:15
  • 583

Java布局管理器(六)SpringLayout布局管理

SpringLayout布局管理器  SpringLayout布局器是通过定义组件边缘之间的距离来对组件在容器之中组件的布局进行管理而工作的。这样,当一个组件的位置确定后,另一个组件某个边缘的位置可...
  • shiShuiNanCheng
  • shiShuiNanCheng
  • 2013年07月16日 04:44
  • 1140

java布局管理

1、 Swing基本组件练习 l JTextField(文本框) l JPasswordField(密码框) l JTextArea(文本域) l JCheckBox(复选框) l JRadioBut...
  • qq_27373459
  • qq_27373459
  • 2016年03月18日 14:26
  • 164

Masonry自动布局详解六:tableviewCell布局

Masonry自动布局详解六:tableviewCell布局 说到iOS自动布局,有很多的解决办法。有的人使用xib/storyboard自动布局,也有人使用frame来适配。对于前者,笔者并不喜欢,...
  • woaifen3344
  • woaifen3344
  • 2015年11月30日 16:31
  • 9024

(译文)The Linux Programming Interface:第1章(历史和标准)

1 HISTORY AND STANDARDS (译者:鱼时代  校对:fgn)       Linux 是UNIX操作系统家族中的一员,在计算机出现以来,UNXI已经有很长的历史了。在这一章...
  • a82793510
  • a82793510
  • 2015年06月10日 16:58
  • 462

常用后台管理界面布局

效果
  • u010837612
  • u010837612
  • 2016年03月09日 15:21
  • 881

Extjs案例---后台管理系统界面布局

主要使用的是viewPort布局,,再添加一些组件(下附源代码) HELLO WORD Ext.onReady(function(){ //使...
  • LIUMINGM900913
  • LIUMINGM900913
  • 2014年03月22日 18:43
  • 2234

Expert Python Programming, 2nd Edition(读书笔记,似乎对Python 3.5并未着墨强调,但是代码示例容易看懂一点)

Expert Python Programming, 2nd Edition 目录 1 Python当前状态2 语法最佳实践:class级别以下3 语法最...
  • cteng
  • cteng
  • 2016年08月09日 13:41
  • 826

《Programming Hive》读书笔记(一)Hadoop和hive环境搭建

《Programming Hive》读书笔记(一)Hadoop和Hive环境搭建 先把基本的技术和工具学好,才能更高效地思考和工作。...
  • linger2012liu
  • linger2012liu
  • 2014年11月12日 00:26
  • 1964

WEB前端-HTML-CSS-后台管理页面布局小例

作为一个后台管理页面,不必太过复杂,一般只需要三部分: 1、上层标签块; 2、左侧菜单块; 3、中部内容显示块;今天简要给大家分享一个布局中的一个小case; 需求:要求上层标签块、左侧菜单快...
  • qq_34409701
  • qq_34409701
  • 2016年08月14日 23:45
  • 4815
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Programming Flex2 - 六.布局的管理
举报原因:
原因补充:

(最多只允许输入30个字)