对于一个自定义的皮肤,名称为testSkin.exml,有两种方式使用它
<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="mySkin.TestSkin" xmlns:e="http://ns.egret.com/eui">
<e:DataGroup>
<e:itemRendererSkinName>
<e:Skin>
<e:Label textColor="0xfd0000" text="{data.label}"/>
</e:Skin>
</e:itemRendererSkinName>
<e:ArrayCollection>
<e:Array>
<e:Object label="item1"/>
<e:Object label="item2"/>
<e:Object label="item3"/>
</e:Array>
</e:ArrayCollection>
</e:DataGroup>
</e:Skin>
class TestSkin extends eui.Component {
constructor() {
super();
this.addEventListener(eui.UIEvent.COMPLETE,this.onComplete,this);
this.skinName = "resource/testSkin.exml";
}
protected createChildren() {
super.createChildren();
console.log("createChildren")
}
private onComplete():void{
console.log("onComplete");
}
}
直接把skinName设置为exml文件的路径。这种方式要注意的是,在 createChildren 的时候,是获取不到内部组件的,因为此时 exml 文件还没有加载完成,要通过监听 eui.UIEvent.COMPLETE 这个事件获取组件创建完成的消息。 像上面这个例子,console 会先输出 createChildren 再输出 onComplete
需要注意的是:如果已经在主题中加载了 EXML 文件,会先输出 onComplete 再输出 createChildren.
egret create euiDemo --type eui
创建一个 eui 项目,里面默认就会有主题管理解析的示例。 具体方式可以查看文档
方式1的代码还可以正常使用,但是console 会先输出 onComplete 再输出 createChildren,和之前相反。这是因为主题已经加载过这个 exml 文件了,所以不需要重新加载。
另外因为在 exml 中定义了 class="mySkin.TestSkin",所以还可以像下面这样使用
class TestSkin extends eui.Component {
constructor() {
super();
this.skinName = "mySkin.TestSkin";
}
}