Egret GUI库的使用

GUI: 图形库组件

安装

核心代码目录: /src/extension/gui/

在 egretProperties.json 中增加 {“name”: “gui”} 执行 egret build -e
新建项目时增加 –type gui

创建带有 GUI 的工程: egret create WeChat –type gui

有哪些不同?

相对原有工程增加

资源: resource/assets/simple/
主题: resource/theme.thm
皮肤: src/scene/ 和 src/skins/
代码: src/AssertAdapter.ts

//注入自定义的素材解析器
egret.Injector.mapClass(“egret.gui.IAssetAdapter”,AssetAdapter);
//加载皮肤主题配置文件,可以手动修改这个文件。替换默认皮肤。
egret.gui.Theme.load(“resource/theme.thm”);
//加载素材配置文件，然后继续完成皮肤所需素材的加载
RES.loadConfig(“resource/resource.json”,”resource/“);

UIAsset(“key”) 代替 UIAsset(RES.getRes(“key”))

控件使用

UI 显示容器

this.uiStage = new egret.gui.UIStage();
this.addChild(this.uiStage);

// this.uiStage.addElement(label);

文本显示 Label

var label:egret.gui.Label = new egret.gui.Label();
label.text = "我是地球人";
this.uiStage.addElement(label);

label.fontFamily = "Tahoma";//设置字体
label.textColor = 0xFFFFFF;//设置颜色
label.size = 35;//设置文本字号
label.bold = true;//设置是否加粗
label.italic = true;//设置是否斜体
label.textAlign = "left";//设置水平对齐方式
label.verticalAlign = "top";//设置垂直对齐方式
label.lineSpacing = 2;//行间距

label.width = 200;
label.height = 30;
label.text = "很多的文字很多的文字很多的文字很多的文字很多的文字很多的文字";
label.maxDisplayedLines = 2;//最大行数

label.padding = 30;
label.paddingLeft = 20;
label.paddingRight = 40;
label.paddingTop = 20;
label.paddingBottom = 40;

按钮 Button

var btn:egret.gui.Button = new egret.gui.Button();
btn.label = "我是按钮";
this.uiStage.addElement(btn);
btn.enabled = false;

btn.addEventListener(egret.TouchEvent.TOUCH_TAP,this.btnTouchHandler,this);
private btnTouchHandler(evt:egret.TouchEvent):void {
    console.log("button touched");
}

var btn2:egret.gui.Button = new egret.gui.Button();
btn2.width = 200;
btn2.height = 200;
btn2.label = "我是按钮2";
this.uiStage.addElement(btn2);

状态按钮 ToggleButton

var btn:egret.gui.ToggleButton = new egret.gui.ToggleButton();
btn.x = btn.y = 20;
btn.label = "我是ToggleButton";
btn.addEventListener(egret.Event.CHANGE,this.changeHandler,this);
this.UIStage.addElement(btn);
private changeHandler(evt:egret.Event):void {
    console.log(evt.target.selected);
}

复选框 CheckBox

var cbx:egret.gui.CheckBox = new egret.gui.CheckBox();
cbx.addEventListener(egret.Event.CHANGE,this.btnTouchHandler,this);
cbx.label = "选择我1";
this.addElement(cbx);
private btnTouchHandler(evt:egret.Event):void {
    console.log(evt.target.selected);
}

单选按钮 RadioButton

//单选按钮需要绑定到一个组上
var radioGroup:egret.gui.RadioButtonGroup = new egret.gui.RadioButtonGroup();
radioGroup.addEventListener(egret.Event.CHANGE,this.groupChangeHandler,this);

//创建单选按钮
var rdb:egret.gui.RadioButton = new egret.gui.RadioButton();
rdb.label = "选择我1";
rdb.value = 1;
rdb.group = radioGroup;
this.addElement(rdb);

var rdb2:egret.gui.RadioButton = new egret.gui.RadioButton();
rdb2.label = "选择我2";
rdb2.value = 2;
rdb2.selected = true;//默认选项
rdb2.group = radioGroup;
this.addElement(rdb2);

private groupChangeHandler(evt:egret.Event):void {
    var radioGroup:egret.gui.RadioButtonGroup = evt.target;
    console.log(radioGroup.selectedValue);
}

滑动条 HSlider HSlider

var hSlider:egret.gui.HSlider = new egret.gui.HSlider();
hSlider.width = 200;    // vSlider.height = 200;
hSlider.x = 20;
hSlider.y = 20;
hSlider.minimum = 0;//定义最小值
hSlider.maximum = 100;//定义最大值
hSlider.value = 10;//定义默认值
hSlider.addEventListener(egret.Event.CHANGE,this.changeHandler,this);
this.addElement(hSlider);
private changeHandler(evt:egret.TouchEvent):void {
    console.log(evt.target.value);
}

进度条 ProgressBar

private pBar:egret.gui.ProgressBar;
public createChildren(): void {
    super.createChildren();
    this.pBar = new egret.gui.ProgressBar();
    this.pBar.hostComponentKey = "HProgressBar";
    // this.vBar.hostComponentKey = "VProgressBar";
    // this.vBar.direction = "bottomToTop";
    this.pBar.y = 20;
    this.pBar.width = 200;
    this.pBar.height = 40;
    this.pBar.value = 0;//取值范围是0-100
    this.uiStage.addElement(this.pBar);

    // 设置显示文字
    this.pBar.labelFunction = this.barLabelFunction;

    //用timer来模拟一下加载进度吧
    var timer:egret.Timer = new egret.Timer(100,100);
    timer.addEventListener(egret.TimerEvent.TIMER,this.timerHandler,this);
    timer.start();
}
private timerHandler(evt:egret.TimerEvent):void {
    this.pBar.value += 1;
}
private barLabelFunction(value:number,maximum:number):string {
    return "加载中... " + Math.ceil( value / maximum * 100 ) + "%";
}

确认框

// 提示
egret.gui.Alert.show("您还没有登录!","提醒",this.closeHandler);
private closeHandler(evt:egret.gui.CloseEvent):void {
    console.log("用户关闭了提醒");
}

// 选择
egret.gui.Alert.show("您还没有登录,是否登录?","提醒",this.confirmHandler,"OK","Cancel");
private confirmHandler(evt:egret.gui.CloseEvent):void {
    if(evt.detail==egret.gui.Alert.FIRST_BUTTON) {
        console.log("用户点击了OK");
    } else {
        console.log("用户点击了Cancel");
    }
}

容器使用 egret.gui.Group

最简单的容器, 无皮肤, 无外观.

与 egret.Sprite 比

不可以使用addChild，用addElement代替
不可以使用addChildAt，用addElementAt代替
不可以使用removeChild，用removeElement代替
不可以使用removeChildAt，用removeElementAt代替
不可以使用getChildAt，用getElementAt代替
不可以使用getChildIndex，用getElementIndex代替
不可以使用setChilcIndex，用setElementIndex代替
不可以使用swapChildren，用swapElements代替
不可以使用swapChildrenAt，用swapElementsAt代替
不可以使用numChildren，用numElements代替

容器内容必须实现 egret.gui.IVisualElement 接口

// 自定义bitmap等,必须进行UIAssert封装
var shapeUI:egret.gui.UIAsset = new egret.gui.UIAsset("file_icon");
myGroup.addElement(shapeUI);
// 自定义子类 必须覆盖createChildren():void{}方法
// 在此方法中进行控件创建与加载

#####