白鷺引擎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