BaseUI中文使用说明和范例

2010-12-19 [1219] technology as3 flex layout

在Flex中，界面中的各个组件可以随着浏览器的大小而重新排列位置，始终在浏览器中保持满屏显示的状态。我们将这种效果称为“布局”。

Flex框架实现了一套自己的布局框架。在Flex3中，可以使用HBox、VBox等进行布局管理；在Flex4中，可以使用spark.layouts包中的布局管理器，这个包的布局功能更加强大和灵活。

那么，在Flash或者纯AS项目中，如何实现布局呢？

侦听舞台的Resize事件是解决这个问题的常用方法。但是如果布局比较复杂，就需要大量的代码来实现这些布局，使用侦听Resize事件的方法未免显得繁琐。于是，就有人实现了AS下的布局类或者布局框架。例如：senocular Layout class、Yahoo ASTRA Layout Utility等等。本文介绍的是BaseUI。

BaseUI的中文资料较少，这一篇官方说明的译文，通过它大致可以了解BaseUI的工作方式和特点。本文则准备以实例的方式基于一个纯AS项目来介绍BaseUI的基本用法，这样更容易理解。

一、BaseUI基本使用

在下面的这段代码中，建立了一个BaseUI的实例，然后绘制了一个shape并加入到显示列表中，将其置于舞台右下角，与舞台边框间隔10像素。

几个注意点：

必须设定stage的scaleMode为NO_SCALE，以及设定align为TOP_LEFT，否则布局可能会不正常；
BaseUI必须基于stage，虽然基于root也能工作，但是可能会导致布局不正常；
将元素加入BaseUI并不等于加入显示列表，因此还需要将元素自行加入显示列表中

效果（在浏览器中查看swf或下载后使用Flash Player播放）：

1 文件

源码：

 1[SWF(width=500,height=300,backgroundColor=0xcccccc)]
 2public class BaseUITest extends Sprite
 3{
 4    public function BaseUITest()
 5    {
 6        //绘制一个背景颜色以便于观察
 7        graphics.beginFill(0xFFFFFF);
 8        graphics.drawRect(0, 0, 500, 300);
 9        graphics.endFill();
10        //必须设置scaleMode和align，否则在布局的时候会不正常
11        stage.scaleMode = StageScaleMode.NO_SCALE;
12        stage.align = StageAlign.TOP_LEFT;
13        
14        //绘制一个背景颜色以便于观察
15        graphics.beginFill(0xFFFFFF);
16        graphics.drawRect(0, 0, 500, 300);
17        graphics.endFill();
18        //必须设置scaleMode和align，否则在布局的时候会不正常
19        stage.scaleMode = StageScaleMode.NO_SCALE;
20        stage.align = StageAlign.TOP_LEFT;
21        
22        //基于stage建立一个布局
23        _baseUI = new BaseUI(this.stage);
24        //为布局添加一个布局元素
25        var __elementRB:ElementUI = _baseUI.add(createShape(this.stage));
26        //设置该布局元素距右边和下方各10像素，并刷新布局使其生效
27        __elementRB.right = 10;
28        __elementRB.bottom = 10;
29        __elementRB.refresh();
30    }
31    
32    private var _baseUI:BaseUI;
33
34    //快速绘制一个Shape用于测试，如果绘制的时候提供了父显示对象，就将其加入父显示对象的显示列表
35    private function createShape($parent:DisplayObjectContainer=null):Shape
36    {
37        var __shape:Shape = new Shape();
38        __shape.graphics.lineStyle(2, 0xFF0000);
39        __shape.graphics.drawRect(0, 0 , 30, 30);
40        if($parent)
41            $parent.addChild(__shape);
42        return __shape;
43    }
44}

二、可以使用几个BaseUI？

最开始，我以为BaseUI是可以用于其它的显示容器的，于是就做了个实验，建立一个Sprite并加入到stage中，并基于这个Sprite建立一个BaseUI，再使用这个新的BaseUI来控制Sprite的子显示对象。但发现这样做出来的布局无法正常显示。当然，可能是由于我遗忘了某些东西或者使用方法不正确，但我还是建议对于子容器使用com.soma.ui.layouts包。

三、HBoxUI的用法

HBox是一个横向布局容器，它继承自LayoutUI，而LayoutUI则继承自MovieClip（为什么是MovieClip而不是Sprite？这个我也不知道，我在源码中将LayoutUI的超类改为了Sprite，使用也一切正常）。

下面这段代码中建立了一个HBox容器，并为它增加了6个子显示对象，通过对HBox属性的设定，可以控制子显示对象的间隔以及在HBox中的对其方式。

几个注意点：

backgroundAlpha属性默认是完全透明，因此如果要显示背景色，就必须将其设定为大于0的值；
因为LayoutUI是显示对象，因此可以直接将HBoxUI的实例加入显示列表，而ElementUI是不能加入显示列表的；
要获取LayoutUI的对应ElementUI，可以使用element属性；
不需要将LayoutUI加入到BaseUI的实例中，但需要为LayouUI传递stage，如果传递其它的容器，则可能会导致布局问题。

效果（在浏览器中查看swf或下载后使用Flash Player播放）：

1 文件

源码：

 1//增加一个HBox容器，设定背景色和透明度
 2var __hbox:HBoxUI = new HBoxUI(this.stage);
 3__hbox.backgroundColor = 0x0000FF;
 4//透明度默认是完全透明，所以必须设定才能让背景色显示出来
 5__hbox.backgroundAlpha = 0.2;
 6//让该容器置顶，宽度始终与舞台相同
 7__hbox.right = 0;
 8__hbox.left = 0;
 9__hbox.top = 0;
10//让容器中的子显示对象的横向间隔为10像素
11__hbox.childrenGap = new GapUI(10);
12//让容器中的子显示对象基于容器的右下方对齐
13__hbox.childrenAlign = HBoxUI.ALIGN_BOTTOM_RIGHT;
14//加入6个shape
15for(var i:int=0; i<6; i++)
16{
17    createShape(__hbox);
18}
19//将容器加入显示列表并刷新容器布局
20addChild(__hbox);
21__hbox.refresh();

四、CanvasUI的用法

使用HBoxUI和VBoxUI可以实现横向和纵向的布局。但我们有时候需要布局更灵活一些。例如希望3个显示对象分别排列在容器的左、中、右，如何处理呢？

下面这段代码建立了一个CanvasUI容器，在容器中增加了3个shape，并实现左、中、右排列。

效果（在浏览器中查看swf或下载后使用Flash Player播放）：

1 文件

源码：

 1//增加一个CanvasUI容器
 2var __canvas:CanvasUI = new CanvasUI(this.stage);
 3__canvas.backgroundColor = 0xFF0000;
 4__canvas.backgroundAlpha = .5;
 5//让canvas在舞台中纵向居中，宽度与舞台宽度始终相同
 6__canvas.verticalCenter = 0;
 7__canvas.left = 0;
 8__canvas.right = 0;
 9//建立canvas的第1个子显示对象，在canvas中左下对齐
10var __shape1:Shape = createShape();
11var __element1:ElementUI = __canvas.add(__shape1);
12__element1.left = 0;
13__element1.bottom = 0;
14//建立canvas的第2个子显示对象，在canvas中居中对齐
15var __shape2:Shape = createShape();
16var __element2:ElementUI = __canvas.add(__shape2);
17__element2.horizontalCenter = 0;
18__element2.verticalCenter = 0;
19//建立canvas的第3个子显示对象，在canvas中右上对齐
20var __shape3:Shape = createShape();
21var __element3:ElementUI = __canvas.add(__shape3);
22__element3.right =0;
23addChild(__canvas);
24__canvas.refresh();

五、全部源代码

  1package
  2{
  3import com.soma.ui.BaseUI;
  4import com.soma.ui.ElementUI;
  5import com.soma.ui.layouts.CanvasUI;
  6import com.soma.ui.layouts.HBoxUI;
  7import com.soma.ui.vo.GapUI;
  8
  9import flash.display.DisplayObjectContainer;
 10import flash.display.Shape;
 11import flash.display.Sprite;
 12import flash.display.StageAlign;
 13import flash.display.StageScaleMode;
 14import flash.events.Event;
 15
 16[SWF(width=500,height=300,backgroundColor=0xcccccc)]
 17public class BaseUITest extends Sprite
 18{
 19    public function BaseUITest()
 20    {
 21        //绘制一个背景颜色以便于观察
 22        graphics.beginFill(0xFFFFFF);
 23        graphics.drawRect(0, 0, 500, 300);
 24        graphics.endFill();
 25        //必须设置scaleMode和align，否则在布局的时候会不正常
 26        stage.scaleMode = StageScaleMode.NO_SCALE;
 27        stage.align = StageAlign.TOP_LEFT;
 28        
 29        //基于stage建立一个布局
 30        _baseUI = new BaseUI(this.stage);
 31        //为布局添加一个布局元素
 32        var __elementRB:ElementUI = _baseUI.add(createShape(this.stage));
 33        //设置该布局元素距右边和下方各10像素，并刷新布局使其生效
 34        __elementRB.right = 10;
 35        __elementRB.bottom = 10;
 36        __elementRB.refresh();
 37        
 38        //增加一个HBox容器，设定背景色和透明度
 39        var __hbox:HBoxUI = new HBoxUI(this.stage);
 40        __hbox.backgroundColor = 0x0000FF;
 41        //透明度默认是完全透明，所以必须设定才能让背景色显示出来
 42        __hbox.backgroundAlpha = 0.2;
 43        //让该容器置顶，宽度始终与舞台相同
 44        __hbox.right = 0;
 45        __hbox.left = 0;
 46        __hbox.top = 0;
 47        //让容器中的子显示对象的横向间隔为10像素
 48        __hbox.childrenGap = new GapUI(10);
 49        //让容器中的子显示对象基于容器的右下方对齐
 50        __hbox.childrenAlign = HBoxUI.ALIGN_BOTTOM_RIGHT;
 51        //加入6个shape
 52        for(var i:int=0; i<6; i++)
 53        {
 54            createShape(__hbox);
 55        }
 56        //将容器加入显示列表并刷新容器布局
 57        addChild(__hbox);
 58        __hbox.refresh();
 59        
 60        //增加一个CanvasUI容器
 61        var __canvas:CanvasUI = new CanvasUI(this.stage);
 62        __canvas.backgroundColor = 0xFF0000;
 63        __canvas.backgroundAlpha = .5;
 64        //让canvas在舞台中纵向居中，宽度与舞台宽度始终相同
 65        __canvas.verticalCenter = 0;
 66        __canvas.left = 0;
 67        __canvas.right = 0;
 68        //建立canvas的第1个子显示对象，在canvas中左下对齐
 69        var __shape1:Shape = createShape();
 70        var __element1:ElementUI = __canvas.add(__shape1);
 71        __element1.left = 0;
 72        __element1.bottom = 0;
 73        //建立canvas的第2个子显示对象，在canvas中居中对齐
 74        var __shape2:Shape = createShape();
 75        var __element2:ElementUI = __canvas.add(__shape2);
 76        __element2.horizontalCenter = 0;
 77        __element2.verticalCenter = 0;
 78        //建立canvas的第3个子显示对象，在canvas中右上对齐
 79        var __shape3:Shape = createShape();
 80        var __element3:ElementUI = __canvas.add(__shape3);
 81        __element3.right =0;
 82        addChild(__canvas);
 83        __canvas.refresh();
 84        
 85        this.stage.addEventListener(Event.RESIZE, handler_resize);
 86    }
 87    
 88    private var _baseUI:BaseUI;
 89    
 90    //快速绘制一个Shape用于测试，如果绘制的时候提供了父显示对象，就将其加入父显示对象的显示列表
 91    private function createShape($parent:DisplayObjectContainer=null):Shape
 92    {
 93        var __shape:Shape = new Shape();
 94        __shape.graphics.lineStyle(2, 0xFF0000);
 95        __shape.graphics.drawRect(0, 0 , 30, 30);
 96        if($parent)
 97            $parent.addChild(__shape);
 98        return __shape;
 99    }
100    
101    private function handler_resize(evt:Event):void
102    {
103        trace(stage.stageWidth, stage.stageHeight, stage.width, stage.height);
104    }
105}
106}

文章ID：1219
原文作者：zrong
原文链接：https://blog.zengrong.net/post/baseui-chinese-sample/
版权声明：本作品采用署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可，非商业转载请注明出处（原文作者，原文链接），商业转载请联系作者获得授权。