Ⓔeui.Watcher 用法
監視場景開關
MainUI.ts
MainUI.ts
namespace edwin {
export class MainUI extends eui.Component {
protected createChildren(): void {
super.createChildren();
this.percentWidth = this.percentHeight = 100;
eui.Watcher.watch(this, ['visible'], (e) => this.do(e), this);
this.visible = false; // 停止遊戲動畫
this.visible = true; // 播放遊戲動畫
}
private do(visible: boolean): void {
if (visible) {
console.log('播放遊戲動畫');
} else {
console.log('停止遊戲動畫');
}
}
}
}
Ⓔeui.UILayer 用法
UILayer 跟普通容器一樣，允許創建多個實例，但通常都將它作為 UI 顯示列表的根節點使用. Main.ts 的 Main 類別就是 eui.UILayer. 特色是寬高會跟隨 stage.stageWidth 跟 stage.stageHeight
Ⓔeui.UIEvent 用法
Panel UIEvent 註冊
MainUISkin.exml
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:Panel id="panel" title="test" />
</e:Group>
</e:Skin>
namespace edwin {
export class MainUI extends eui.Component {
private panel: eui.Panel;
protected createChildren(): void {
super.createChildren();
this.percentWidth = this.percentHeight = 100;
this.panel.addEventListener(eui.UIEvent.CLOSING, this.onUIEventHandler, this);
this.panel.addEventListener(eui.UIEvent.MOVE, this.onUIEventHandler, this);
}
private onUIEventHandler(e: eui.UIEvent): void {
egret.log("eui.UIEvent:", e.type);
}
}
}
Ⓔ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>
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.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.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
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
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>
訂閱：
文章 (Atom)