Skip to content

Latest commit

 

History

History
executable file
·
208 lines (172 loc) · 6.76 KB

File metadata and controls

executable file
·
208 lines (172 loc) · 6.76 KB

首先新建一个 eui 项目,使用:

egret create HelloEUI --type eui

下面的教程里使用的是该项目的默认皮肤。

这是Group的默认布局模式。在基本布局模式下,容器内的子项的定位方式,取决于每个子项的坐标设置。首先,创建一个 Group 容器,并设置其布局属性为基本布局:

this.myGroup = new eui.Group();
this.addChild( this.myGroup );
this.myGroup.width = 400;
this.myGroup.height = 300;
this.myGroup.layout = new eui.BasicLayout();

其中预先定义了:

private  myGroup:eui.Group;

为了看清楚容器的边缘,在容器内先绘制一个与容器宽高一致的空心矩形:

/// 绘制矩形用于显示 myGroup 的轮廓
var outline:egret.Shape = new egret.Shape;
outline.graphics.lineStyle(3,0x00ff00);
outline.graphics.beginFill(0x000000,0);
outline.graphics.drawRect(0,0,400,300);
outline.graphics.endFill();

this.myGroup.addChild( outline );

以上代码是基础代码,后边讲解中列出的代码段都在此基础上添加。

绝对定位

基本布局的主要特征就是绝对定位,设置子项的 x 与 y 坐标即可设置其相对于容器的坐标位置。
首先用坐标递增的方式放置4个按钮:

for(var i:number=0;i<4;i++) {
    var btn:eui.Button = new eui.Button();
    btn.x = 25 +i*35;
    btn.y = 40+i*65;
    btn.label = "button "+i;
    this.myGroup.addChild(btn);
}

效果如图:

居中设定

上面设置的是子项的位置,至于尺寸,则是设置每个子项的widthheight。上面所述的情况比较简单,即每个子项的位置和尺寸是确定的,是定值。但实际需求中,可能会比较复杂。比如有一个按钮,希望它能根据容器的尺寸,自动处于居中位置,不需要写代码来设置xy坐标。此时有两个属性可用:

  • horizontalCenter
  • verticalCenter

这两个值是定义对象的中心点与容器的中心点之间的差值。如果两项都设置为0,代表中心点完全重合,也就实现了自动居中功能。

var btn:eui.Button = new eui.Button();
btn.label = "This is an egret button";
btn.horizontalCenter = 0;
btn.verticalCenter = 0;
this.myGroup.addChild( btn );

效果如图:

边距设定

假如需求更复杂一些,按钮不仅仅是居中,还始终和容器边界保持20像素的差值,需要用到的属性是:

  • top
  • bottom
  • left
  • right

top的值,就是定义对象的上边界和容器的上边界之间的距离,其他3个值以此类推。设置如下:

var btn:eui.Button = new eui.Button();
btn.label = "This is an egret button";
btn.top = 20;
btn.bottom = 20;
btn.left = 20;
btn.right = 20;
this.myGroup.addChild( btn );

效果如图:

百分比设定

在尺寸的定义上,可以使用百分比。比如要让按钮容器的尺寸一致,可以设置:

var btn:eui.Button = new eui.Button();
btn.label = "This is an egret button";
btn.percentWidth = 60;
btn.percentHeight = 80;
this.myGroup.addChild( btn );

可以根据需求,决定使用percentWidth,percentHeight还是top,bottom,left,rightpercentWidth,percentHeight只能约束宽高,而top,bottom,left,right则同时约束了尺寸和位置(x,y)

为了使按钮在容器处于中心位置,可以在上一段代码基础上加入居中设定:

btn.horizontalCenter = 0;
btn.verticalCenter = 0;

效果如图:

如图中效果所示,这些属性可以混合使用(相矛盾的设置除外)。

完整的类定义如下:

class bascLayout extends egret.Sprite {
    private  myGroup:eui.Group;

    public  constructor () {

        super();

        this.myGroup = new eui.Group();
        this.myGroup.width = 400;
        this.myGroup.height = 300;
        this.addChild( this.myGroup );

        this.myGroup.layout = new eui.BasicLayout();
        
        var outline:egret.Shape = new egret.Shape;
        outline.graphics.lineStyle(3,0x00ff00);
        outline.graphics.beginFill(0x000000,0);
        outline.graphics.drawRect(0,0,400,300);
        outline.graphics.endFill();

        this.myGroup.addChild( outline );

        for(var i:number=0;i<4;i++) {
            var btn:eui.Button = new eui.Button();
            btn.x = 25 +i*35;
            btn.y = 40+i*65;
            btn.label = "button "+i;
          //这里先注释掉,需要的时候再添加到显示对象里面     
          //this.myGroup.addChild(btn);
        }

        var btn:eui.Button = new eui.Button();
        btn.label = "This is an egret button";
        btn.horizontalCenter = 0;
        btn.verticalCenter = 0;
      //这里先注释掉,需要的时候再添加到显示对象里面 
      //this.myGroup.addChild( btn );

        var btn:eui.Button = new eui.Button();
        btn.label = "This is an egret button";
        btn.top = 20;
        btn.bottom = 20;
        btn.left = 20;
        btn.right = 20;
      //这里先注释掉,需要的时候再添加到显示对象里面 
      //this.myGroup.addChild( btn );

        var btn:eui.Button = new eui.Button();
        btn.label = "This is an egret button";
        btn.percentWidth = 60;
        btn.percentHeight = 80;
        this.myGroup.addChild( btn );

        btn.horizontalCenter = 0;
        btn.verticalCenter = 0;

    }
}

文档类的完整定义如下:

class Main extends eui.UILayer {

    protected createChildren(): void {
        super.createChildren();
        
        //注入自定义的素材解析器
        let assetAdapter = new AssetAdapter();
        egret.registerImplementation("eui.IAssetAdapter", assetAdapter);
        egret.registerImplementation("eui.IThemeAdapter", new ThemeAdapter());
        
        var theme = new eui.Theme("resource/default.thm.json", this.stage);
        
        var button = new eui.Button();
        button.label = "Click!";
        button.horizontalCenter = 0;
        button.verticalCenter = 0;
        this.addChild(button);
        button.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onButtonClick,this);
        
        // 这里是添加的代码        
        var base =  new bascLayout();
        base.x = 50;
        base.y = 50;

        this.addChild(base);
    }   
    private onButtonClick(e:egret.TouchEvent) { 
        var panel = new eui.Panel();
        panel.title = "Title";
        panel.horizontalCenter = 0;
        panel.verticalCenter = 0;
        this.addChild(panel);
    }
}