custom-eui-control-in-egret

如何创建一个 eui 的控件,在 egret 的文档中是比较零散的,而且有些东西也没有讲到。这里提供一个比较完整的范例。

  1. 创建一个 exml 文件,用来定义控件的显示元素,这里要注意的classname 的设置,比如设置成 game.CustomButton。game 为模块名(文档上也称呼为命名空间),后面需要用到。
  2. 创建一个 ts 文件,用来处理控件的逻辑。这个 ts 文件里面需要有模块,比如:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    module game {

    export class CustomButton extends eui.Button {
    public rtQuality: eui.Rect;

    constructor() {
    super();

    this.skinName = "resource/skins/custom/EquipButtonSkin.exml";
    }

    public set quality(color: number) {
    if (this.rtQuality) {
    this.rtQuality.strokeColor = color;
    }

    let label = this.labelDisplay as eui.Label;
    label.textColor = color;
    }

    public get quality(): number {
    if (this.rtQuality) {
    return this.rtQuality.strokeColor;
    }
    return 0x444444;
    }
    }
    }
  3. 在其他皮肤中使用的时候,可以从组件列表(COMPONENT/Custom)中直接拖动控件来使用,在 wing 4.03 版本中需要修改一下Category Properties中的 Skin,这应该是 wing 的一个 bug。
  4. 看一下 exml 的 Source,会发现添加了两个东西。一个是根节点的 <e:Skin ......... xmlns:game="game.*" >;另一个是添加的控件的 tag 是 <game:CustomButton .....>
    关于这一点,可以参考文档
  5. 在 ts 文件中使用的时候和普通的按钮一样,只是类型需要设置成 game.CustomButton