egret自定义控件

在游戏中我们难免会用到自定义控件，比如多语言翻译等

egret的自定义控件目前需要和皮肤进行绑定，才可以使用，下面我们一步步来实现一个多语言支持的Label

一：首先，我们在自己的皮肤文件夹(可以是resource下面的任意文件夹)下面新建一个皮肤

<?xml version='1.0' encoding='utf-8'?>

<e:Skin class="LocalLabelSkin" minHeight="10" minWidth="10" xmlns:e="http://ns.egret.com/eui">

    <e:Label id="myLabel" text="标签" x="0" y="0"/>

</e:Skin>

比如这种

二：光有皮肤还不够，我们需要为这个皮肤写一个对应的实现类

module component {

    /**

     *

     * @author xxx

     * @date 2016.07.04

     * @desc 多语言label

     *

     */

    export class SFLocalLabel extends eui.Component{

        private myLabel:eui.Label;

        public constructor() {

            super();

            this.skinName ="LocalLabelSkin";

        }

        public get size(): number {

            return this.myLabel.size;

        }

        public set size(value: number) {

            this.myLabel.size;

        }

        /**

         * 重载设置文本

         */ 

        public set text(value:string){

            this.myLabel.text = manager.SFLanaguageManager.getInstance<manager.SFLanaguageManager>().translate(value);

        }

        public get text(): string {

            return this.myLabel.text;

        }

        public get bold(): boolean {

            return this.myLabel.bold;

        }

        public set bold(value: boolean) {

            this.myLabel.bold=value;

        } 

        public get textColor(): number {

            return this.myLabel.textColor;

        }

        public set textColor(value: number) {

            this.myLabel.textColor=value;

        }

    }

}

模块是component.

现在这样还不能直接使用，我们需要把这个控件添加到我们的主题中

打开-项目-主题，添加控件，然后添加上我们的自定义控件就可以了，记住，控件名一定要包含模块名，不然找不到的，这里就是component.SFLocalLabel