Ⓔeui.ToggleSwitch 用法

iphone開關鈕

MainUISkin.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="edwin.MainUISkin" xmlns:e="http://ns.egret.com/eui">
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
    <e:Group horizontalCenter="0" verticalCenter="0">
        <e:ToggleSwitch id="mySwitch">
            <e:Skin states="up,down,disabled,upAndSelected,downAndSelected,disabledAndSelected">
                <e:Group>
                    <e:Rect fillColor="0x333333" width="100" height="50" ellipseWidth="50" ellipseHeight="50"
                            horizontalCenter="0" verticalCenter="0" includeIn="up,down" />
                    <e:Rect fillColor="0x00FF00" width="100" height="50" ellipseWidth="50" ellipseHeight="50"
                            horizontalCenter="0" verticalCenter="0" includeIn="upAndSelected,downAndSelected" />
                    <e:Rect fillColor="0xFFFFFF" width="45" height="45" ellipseWidth="45" ellipseHeight="45"
                            includeIn="up,down" left="3"  verticalCenter="0" />
                    <e:Rect fillColor="0xFFFFFF" width="45" height="45" ellipseWidth="45" ellipseHeight="45"
                            includeIn="upAndSelected,downAndSelected" right="3"  verticalCenter="0"/>
                </e:Group>
            </e:Skin>
        </e:ToggleSwitch>
    </e:Group>
</e:Skin>

MainUI.ts

namespace edwin {

    export class MainUI extends eui.Component {

        private mySwitch: eui.ToggleSwitch;

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

            this.mySwitch.addEventListener(eui.UIEvent.CHANGE, () => console.log(this.mySwitch.selected), this);
        }

    }

}

Ⓔeui.ToggleButton 用法

請參考：eui.ToggleSwitch 用法

Ⓔeui.TileOrientation 用法

Group TileOrientation 展示

MainUISkin.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="edwin.MainUISkin" xmlns:e="http://ns.egret.com/eui">
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
    <e:Group>
        <!-- TileLayout -->
        <e:Group>
            <e:Rect fillColor="0xFF0000" width="100" height="100" />
            <e:Rect fillColor="0x00FF00" width="100" height="100" />
            <e:Rect fillColor="0x0000FF" width="100" height="100" />
            <e:Rect fillColor="0xFF0000" width="100" height="100" />
            <e:Rect fillColor="0x00FF00" width="100" height="100" />
            <e:Rect fillColor="0x0000FF" width="100" height="100" />
            <e:layout>
                <!-- orientation=rows 表示逐行排列元素 -->
                <e:TileLayout horizontalGap="0" verticalGap="0" orientation="rows" />
            </e:layout>
        </e:Group>
        <!-- TileLayout -->
        <e:Group>
            <e:Rect fillColor="0xFF0000" width="100" height="100" />
            <e:Rect fillColor="0x00FF00" width="100" height="100" />
            <e:Rect fillColor="0x0000FF" width="100" height="100" />
            <e:Rect fillColor="0xFF0000" width="100" height="100" />
            <e:Rect fillColor="0x00FF00" width="100" height="100" />
            <e:Rect fillColor="0x0000FF" width="100" height="100" />
            <e:layout>
                <!-- orientation=columns 表示逐列排列元素 -->
                <e:TileLayout horizontalGap="0" verticalGap="0" orientation="columns" />
            </e:layout>
        </e:Group>
        <e:layout>
            <e:VerticalLayout gap="10" />
        </e:layout>
    </e:Group>
</e:Skin>

Ⓔeui.TileLayout 用法

請參考：eui.Group 用法

Ⓔeui.Theme 用法

Main.ts

class Main extends eui.UILayer {

    protected createChildren(): void {
        super.createChildren();
        egret.lifecycle.onPause = () => egret.ticker.pause();
        egret.lifecycle.onResume = () => egret.ticker.resume();
        egret.registerImplementation("eui.IAssetAdapter", new AssetAdapter());
        egret.registerImplementation("eui.IThemeAdapter", new ThemeAdapter());
        this.runGame();
    }

    private async loadResource() {
        let loadingView = this.stage.addChild(new LoadingUI()) as LoadingUI;
        await RES.loadConfig("resource/default.res.json", "resource/");
        // 注意：皮膚主題是一次性設置的替代值，並不能運行時切換所有組件替換皮膚。切換皮膚您可以自行對Component.skinName賦值進行修改。
        await new Promise(resolve => new eui.Theme("resource/default.thm.json", this.stage).once(eui.UIEvent.COMPLETE, resolve, this));
        await RES.loadGroup("preload", 0, loadingView);
        this.stage.removeChild(loadingView);
    }

    private async runGame() {
        await this.loadResource();
        this.addChild(new edwin.MainUI());
    }

}

Ⓔeui.TextInput 用法

TextInput 展示

MainUISkin.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="edwin.MainUISkin" xmlns:e="http://ns.egret.com/eui">
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
    <e:Group horizontalCenter="0" verticalCenter="0">
        <e:TextInput prompt="請輸入電話號碼" width="300" height="70" restrict="0-9">
            <e:Skin states="normal,disabled,normalWithPrompt,disabledWithPrompt">
                <e:Group width="100%" height="100%">
                    <e:Rect fillColor="0x333333" width="100%" height="100%" />
                    <e:EditableText id="textDisplay" verticalCenter="0" left="10" right="10" textColor="0xFFFFFF"
                                    textColor.disabled="0xff0000" width="100%" height="24" size="20" />
                    <e:Label id="promptDisplay" verticalCenter="0" left="10" right="10" textColor="0xa9a9a9"
                             width="100%" height="24" size="20" touchEnabled="false"
                             includeIn="normalWithPrompt,disabledWithPrompt" />
                </e:Group>
            </e:Skin>
        </e:TextInput>
    </e:Group>
</e:Skin>

Ⓔeui.TabBar 用法

tabbar 展示

MainUISkin.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="edwin.MainUISkin" xmlns:e="http://ns.egret.com/eui">
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
    <e:Group horizontalCenter="0" top="20">
        <!-- tabbar 區 -->
        <e:TabBar dataProvider="{viewStack}">
            <!-- 自訂 tabbar 皮膚 -->
            <e:itemRendererSkinName>
                <e:Skin states="up,down">
                    <e:Group>
                        <e:Rect fillColor="0x333333" width="100" height="50" />
                        <e:Label text="{data}" textColor.down="0xFFFFFF" textColor.up="0x666666" horizontalCenter="0"
                                 verticalCenter="0" />
                    </e:Group>
                </e:Skin>
            </e:itemRendererSkinName>
            <e:layout>
                <e:HorizontalLayout gap="1" />
            </e:layout>
        </e:TabBar>
        <!-- 內容區 -->
        <e:Group width="600" height="200">
            <e:Rect fillColor="0x333333" width="100%" height="100%" />
            <!-- 內容顯示區有兩組內容 -->
            <e:ViewStack id="viewStack" width="100%" height="100%">
                <e:Group name="tab1" width="100%" height="100%">
                    <e:Label text="TestPanel1" horizontalCenter="0" verticalCenter="0" />
                </e:Group>
                <e:Group name="tab2" width="100%" height="100%">
                    <e:Label text="TestPanel2" horizontalCenter="0" verticalCenter="0" />
                </e:Group>
            </e:ViewStack>
        </e:Group>
        <e:layout>
            <e:VerticalLayout gap="0" />
        </e:layout>
    </e:Group>
</e:Skin>

Ⓔeui.State 用法⚡

請參考：eui.Skin 用法

Ⓔeui.SliderBase 用法

請參考：eui.HSlider 用法

Ⓔ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);
        }

    }

}

Ⓔeui.SetStateProperty 用法⚡

待研究