Ⓔeui.Skin 用法

當版面類似時可以自訂義 states 與切換 state, 這是常用功能, 可以部分換皮膚

state1

state2

MainUISkin.exml

<?xml version="1.0" encoding="utf-8"?>
<!-- 定義 state1,state2 -->
<e:Skin class="edwin.MainUISkin" states="state1,state2" xmlns:e="http://ns.egret.com/eui">
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
    <e:Group width="100%" height="100%">
        <!-- 用.state1 .state2 設定不同顏色 -->
        <e:Rect fillColor.state1="0xFF0000" fillColor.state2="0x00FF00" width="100%" height="100%" />
        <e:Group>
            <e:Button id="btn_state1" label="state1" />
            <e:Button id="btn_state2" label="state2" />
            <e:layout>
                <e:HorizontalLayout />
            </e:layout>
        </e:Group>
        <!-- 用 includeIn 設定 state = state1 時顯示 -->
        <e:Group horizontalCenter="0" verticalCenter="0" includeIn="state1">
            <e:Label text="state1 wow1" />
            <e:Label text="state1 wow2" />
            <e:Label text="state1 wow3" />
            <e:Label text="state1 wow4" />
            <e:layout>
                <e:VerticalLayout />
            </e:layout>
        </e:Group>
        <!-- 用 includeIn 設定 state = state2 時顯示 -->
        <e:Group horizontalCenter="0" verticalCenter="0" includeIn="state2">
            <e:Rect fillColor="0xCCCCCC" width="50" height="50" />
            <e:Rect fillColor="0xCCCCCC" width="50" height="50" />
            <e:Rect fillColor="0xCCCCCC" width="50" height="50" />
            <e:Rect fillColor="0xCCCCCC" width="50" height="50" />
            <e:layout>
                <e:VerticalLayout />
            </e:layout>
        </e:Group>
    </e:Group>
</e:Skin>

MainUI.ts

namespace edwin {

    export class MainUI extends eui.Component {

        private btn_state1: eui.Button;
        private btn_state2: eui.Button;

        protected createChildren(): void {
            super.createChildren();
            this.percentWidth = this.percentHeight = 100;

            this.btn_state1.addEventListener(egret.TouchEvent.TOUCH_TAP, () => this.currentState = "state1", this);
            this.btn_state2.addEventListener(egret.TouchEvent.TOUCH_TAP, () => this.currentState = "state2", this);
        }

    }

}