Egret 使用自定义皮肤

Egret中可以定义一个exml文件来布局UI样式，然后在创建的代码中使用它。
官方链接：皮肤

这里我要说一些关于自定义皮肤容易犯错的地方，不注意代码就会出bug。

一、在构造函数中使用皮肤里定义的组件是，容易找不到组件。

class ExmlTestView extends eui.Component{
    constructor() {
        super();
        this.skinName = "resource/skins/ExmlTestViewSkin.exml";
        this.initUI();
    }

    public label: eui.Label;

    private initUI() {
        this.label.text = "hello world!";
        this.label.textColor = 0xff0000;
    }
}

如上代码，很容易在this.label.text = "hello world!";报错，找不到text，断点结果是label未定义，这是因为皮肤ExmlTestViewSkin.exml并未加载完成就是用里面组件导致，（如果未报错，也是可能，根据设备加载资源顺序有关）

将构造函数改成一下代码即可：

    constructor() {
        super();
        this.addEventListener(eui.UIEvent.COMPLETE, this.initUI, this);
        this.skinName = "resource/skins/ExmlTestViewSkin.exml";
    }

二、使用约束后，又在动画中更改坐标。

这个比较好理解，最后结果肯定是无效的，动画不是自己想要的，因此，在代码或者动画中动态改变位置或者是大小的，就不要使用约束了。