白鹭引擎eui控件的简单创建和管理方法

一、创建ui文件：

1. 创建exml文件，改成group类型，拖入default.res.json文件里面，文件类型改成text.

2. 将创建的exml文件拖入控件，控件可以在属性面板命名。

3. 创建完的exml文件源码如下，包括两个按钮，一个静态文本：

<e:Group width="640" height="960" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing"> 
    <e:Label horizontalCenter="0" top="25" text="Alert" textColor="0x094cef" size="50" name="lab_title"/> 
    <e:Button top="16" left="16" label="Back" skinName="skins.ButtonSkin" name="btn_back"/> 
    <e:Button skinName="skins.ButtonSkin" horizontalCenter="0" verticalCenter="0" label="Show Alert" name="btn_alert"/> 
</e:Group>

二、导入ui文件到代码中创建：

1. 创建的exml文件名字：TestEui.exml，导入到资源管理的key名为TestEui_exml,

在界面中创建一个UILayer层，用于放置eui控件层，

var uiLayer:eui.UILayer = new eui.UILayer();
stage.addChild(uiLayer);

2.在上面创建的uilayer中，创建一个eui.Group对象

var exmlText = RES.getRes(file_name);
var exmlClass = EXML.parse(exmlText);
var group:eui.Group = new exmlClass();
uilayer:addChild(group);

3. 获取group里面的子控件

var btn:egret.DisplayObject = group.getChildByName(“btn_back”);

btn.addEventListener(egret.TouchEvent.TOUCH_END, this.onButtonClick, this)//添加点击事件

4. 批量获取group里面的子控件

 var ctrlArr:string[] = ["btn_back", "lab_title", "btn_alert"];//创建一个字符串数组保存控件名字
 var ctrlMap:{[key: string]: egret.DisplayObject;}= {};//控件map，用于保存控件
 for(var str in ctrlArr)
 {
        var ctrl:egret.DisplayObject = g.getChildByName(ctrlArr[str]);
 　　ctrlMap[ctrlArr[str]] = ctrl;
  }
  ctrlMap["btn_back"].addEventListener(egret.TouchEvent.TOUCH_END, this.onButtonClick, this);

转载请注明出处，from 博客园HemJohn