Flex 绝对布局 constraintColumns

为日后维护的简单话将使用flex提供的绝对约束布局来实现

页面主页面的样式布局

绝对约束布局的demo在svn(svn:..);

绝对约束布局解释说明：

绝对约束布局的好处

1. 绝对布局是flex提供的一种布局方式，绝对布局依然使用像素x y 的方式来进行

组件的布局，但是比原始的绝对布局更加容易维护。

2. 绝对约束布局构造组件布局的效率较高，使用这种方式要比组件嵌套组件的cup

性能高出很多，也是adobe推荐使用的方式。

3. 可以做到屏幕自适应。

绝对约束布局的简单描述：

1. 使用绝对约束布局和绝对布局一样，必须在布局容器中支持绝对布局， 如果是

Application 这样的既支持绝对布局又支持其他布局凡是的容器，先要设置其layout属性：

layout="absolute"

2. 在容器的根下使用flex提供的两个元素constraintRows 和 constraintColumns

使用的页面样例如下：

       <mx:constraintRows>

              <mx:ConstraintRow id="hero_panel_row" height="200"/>

              <mx:ConstraintRow id="main_padding_row" height="100%"/>

              <mx:ConstraintRow id="bottom_panel_row" height="200"/>

       </mx:constraintRows>

       <mx:constraintColumns>

              <mx:ConstraintColumn id="hero_panel_col" width="200"/>

              <mx:ConstraintColumn id="main_padding_left_col" width="200"/>

              <mx:ConstraintColumn id="main_col" width="0"/>

              <mx:ConstraintColumn id="main_padding_right_col" width="100%"/>

              <mx:ConstraintColumn id="map_panel_col" width="145"/>

       </mx:constraintColumns>

    以上的代码用自然语言的描述是这样的：

    我们在一个类似于canvas的绝对布局容器画行和列。constraintRows 表示画一种行。

    子元素表示每一行（ConstraintRow） 这是第一行，高度为200：

    <mx:ConstraintRow id="hero_panel_row" height="200"/>

    这是第二行，高度为100% <----这里注意.

    <mx:ConstraintRow id="main_padding_row" height="100%"/>

    然后是第三行，高度是200

    <mx:ConstraintRow id="bottom_panel_row" height="200"/>

    重点指出一下，我们把第一行和第三行的高度已经是按照像素的方式指定的很明确。

    无论容器的高度怎么改变，第一 、三行的高度都是固定的，200px。而第二行的

    高度是不固定的，他会根据容器的当前高度进行自动计算。假设：如果一个容器的

    高度是800， 那么，除去第1 ，3 行的400 ， 第二行的高度就是400， 而如果

    容器的高度是600，那第二行的高度就变成200 了。 这种绝对约束布局总是先算

    给定好的绝对像素值，然后才按照百分比来计算其他的位置高度。

    以同样的方式来画布局容器中的列，意思不再赘述。

       <mx:constraintColumns>

              <mx:ConstraintColumn id="hero_panel_col" width="200"/>

              <mx:ConstraintColumn id="main_padding_left_col" width="200"/>

              <mx:ConstraintColumn id="main_col" width="0"/>

              <mx:ConstraintColumn id="main_padding_right_col" width="100%"/>

              <mx:ConstraintColumn id="map_panel_col" width="145"/>

       </mx:constraintColumns>

    到此，我们就在容器中画好了类似于excel那样的格子。虽然这些格子我们看不到，

    但是flex的compiler却已经明确知道他的意义是什么，并且会在内存中画好这些格子

    接下来我们做的就是只需要把每一个组件对其到那个格子或者那几个格子。

    3. 对齐组件到约束布局

    我们写一个自定义的组件并把它添加到容器。

    以下是一个组件：

    <components:HeroPanelView id="hero_panel"

       top="hero_panel_row:0" bottom="hero_panel_row:0"

       left="hero_panel_col:0" right="hero_panel_col:0"/>

    他的四个重要属性被使用：top, bottom , left , right .

    只是不是像就对布局那样只使用一个数值，而是要加前缀(contraint id)

    当让，也可以是组件不完全贴在容器上。 比如让底部 在相对应的格子底部上方5px的位置

    就可以这样写: bottom="hero_panel_row:5"

    以上几乎是约束布局的全部内容，虽然写起来并不那么容易，或者如果你初次见到可能还会

    觉得带来更多的工作量(不如flexBuilder当中提供的WYSIWYD的方式开发快) ，但会给将来

    代码的维护带来便利。建议使用这种方式。

    注意：如果你错把 bottom="hero_panel_row:0" 写成 bottom="hero_panel_col:0" 编译器

    是不会报错的。这里需要注意。