63 lines
3.0 KiB
Markdown
63 lines
3.0 KiB
Markdown
|
上一节讲解了皮肤分离机制的原理，将一个普通组件拆分成了两个组件。本节说明拆分后逻辑组件是如何访问皮肤里的子项的。这里引入一个皮肤部件(SkinPart)的概念。
|
|||
|
|
|
|||
|
|
首先看一个自定义按钮的例子：
|
|||
|
|
|
|||
|
|
Button.ts
|
|||
|
|
|
|||
|
|
~~~ typescript
|
|||
|
|
class Button extends eui.Component{
|
|||
|
|
public constructor(){
|
|||
|
|
super();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
public labelDisplay:eui.Label;
|
|||
|
|
|
|||
|
|
private _label:string = "";
|
|||
|
|
|
|||
|
|
public get label():string{
|
|||
|
|
return this._label;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
public set label(value:string){
|
|||
|
|
this._label = value;
|
|||
|
|
if(this.labelDisplay){
|
|||
|
|
this.labelDisplay.text = value;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
protected childrenCreated():void{
|
|||
|
|
super.childrenCreated();
|
|||
|
|
if(this.labelDisplay){
|
|||
|
|
this.labelDisplay.text = this._label;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
~~~
|
|||
|
|
|
|||
|
|
上述代码的关键点：所有的可定制皮肤组件都必须继承自eui.Component或它的子类，Component的每个子类都封装了一定的功能，写自定义组件时根据需求选择不同的组件继承即可。这里是一个自定义的按钮，没有额外功能，所以直接继承Component类。然后为自定义按钮声明了一个label属性，作用是修改按钮上显示的文本。每个组件都有一个childrenCreated()方法，它会在组件初始化完成后回调，子类通常覆盖这个方法来访问一些延迟实例化的子项。
|
|||
|
|
|
|||
|
|
下面是这个自定义按钮对应的皮肤：
|
|||
|
|
|
|||
|
|
ButtonSkin.exml
|
|||
|
|
|
|||
|
|
~~~ typescript
|
|||
|
|
<e:Skin class="ButtonSkin" xmlns:e="http://ns.egret.com/eui">
|
|||
|
|
<e:Image source="image/button.png" width="100%" height="100%"/>
|
|||
|
|
<e:Label id="labelDisplay" textAlign="center" verticalAlign="middle" left="20" right="20" top="10" bottom="10"/>
|
|||
|
|
</e:Skin>
|
|||
|
|
~~~
|
|||
|
|
|
|||
|
|
通过如下代码可以将皮肤附加到组件：
|
|||
|
|
|
|||
|
|
~~~ typescript
|
|||
|
|
var button = new Button();
|
|||
|
|
button.skinName="resource/ButtonSkin.exml" //假设Button.exml在resource文件夹下。
|
|||
|
|
this.addChild(button);
|
|||
|
|
~~~
|
|||
|
|
|
|||
|
|
其中，Button上定义了一个labelDisplay的公开变量，ButtonSkin里也有一个id为labelDisplay的Label节点，在皮肤附加到逻辑组件上时，会自动匹配双方的同名变量和id，这些同名变量就叫做“皮肤部件”(SkinPart)，例如负责显示文本标签的labelDisplay对象，匹配结果就是把ButtonSkin上的Label节点引用赋值给了`button.labelDisplay`属性。正是因为这个皮肤部件的自动匹配功能，在按钮初始化完成后，才可以直接访问`this.labelDisplay`属性。逻辑组件就是通过定义皮肤部件对皮肤里的子节点进行操作的。
|
|||
|
|
|
|||
|
|
关于皮肤部件，这里还要注意：所有可定制皮肤的组件都定义了各自不同的皮肤部件。当为某个组件定制皮肤时，实际上分为创建对应的皮肤部件和显示图片素材两部分。如果只添加了图片素材，而没有声明并实例化对应变量名的皮肤部件，逻辑组件将无法正常工作。具体皮肤部件名请参考每个组件定义的public公开变量列表。
|
|||
|
|
|