白鹭官网已经写了几个方法去添加自定义皮肤，但对于管理或调用来说，不是特别方便。借鉴朋友提供的部分方法，分享给大家。
实现功能：显示自定义exml皮肤，切换exml皮肤，隐藏exml皮肤、移除exml皮肤，给该exml皮肤内某个Image的图片资源添加点击事件
（以下需要创建的脚本的位置信息，如图）
一、添加功能脚本DialogManager（集合添加、隐藏、移除、替换的功能），目前添加了3个分组，可以自定义更多。3个分组可以同时显示2个exml自定义页面
|
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
module DialogManager { export var dict1 = {}; export var dict2 = {}; export var dict3 = {}; export var moment_dict1:string = ""; export var moment_dict2:string = ""; export var moment_dict3:string = ""; /** * * @param dialogClass 类名 * @param dialogName 类名 * @param num 组名 */ export function open(dialogClass:any, dialogName:string, num:number = 1) { //小窗口 if(num == 1) { if(this.moment_dict1 != "") { this.dict1[this.moment_dict1].hide(); } if (this.dict1[dialogName] == null) { var dialog = new dialogClass(); dialog.show(); this.dict1[dialogName] = dialog; } else { if(!this.dict1[dialogName].showing) this.dict1[dialogName].show(); } this.moment_dict1 = dialogName;//记录当前正在打开 } else if (num == 2) { if(this.moment_dict2 != "") { this.dict2[this.moment_dict2].hide(); } if (this.dict2[dialogName] == null) { var dialog = new dialogClass(); dialog.show(); this.dict2[dialogName] = dialog; } else { if(!this.dict2[dialogName].showing) this.dict2[dialogName].show(); } this.moment_dict2 = dialogName;//记录当前正在打开 console.log("当前打开",this.moment_dict2); } else if (num == 3) { if(this.moment_dict3 != "") { this.dict3[this.moment_dict3].hide(); } if (this.dict3[dialogName] == null) { var dialog = new dialogClass(); dialog.show(); this.dict3[dialogName] = dialog; } else { if(!this.dict3[dialogName].showing) this.dict3[dialogName].show(); } this.moment_dict3 = dialogName;//记录当前正在打开 } } /** * * @param dialogName 类名 * @param num 组名 * @param hideOnly 是否只隐藏 */ export function remove (dialogName:string, num:number = 1, hideOnly:boolean = false) { if (num == 1) { if (this.dict1[dialogName] != null) { if(this.dict1[dialogName].parent) { this.dict1[dialogName].hide(); } if (hideOnly == false) { this.dict1[dialogName] = null; } } } else if (num == 2) { if (this.dict2[dialogName] != null) { if(this.dict2[dialogName].parent) { this.dict2[dialogName].hide(); } if (hideOnly == false) { this.dict2[dialogName] = null; } } } else if (num == 3) { if (this.dict3[dialogName] != null) { if(this.dict3[dialogName].parent) { this.dict3[dialogName].hide(); } if (hideOnly == false) { this.dict3[dialogName] = null; } } } } } |
二、新建exml文件，名称GameSkin.exml，位置/src/skins/下。里面只是显示了1张图片，图片名称"game_bg"，id：Game_bg
|
1 2 3 4 |
<?xml version='1.0' encoding='utf-8'?> <e:Skin class="GameSkin" width="640" height="960" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing"> <e:Image id="Game_bg" source="game_bg" x="0" y="0"/> </e:Skin> |
三、在Main.ts脚本中添加UIlayer静态变量，并初始化，添加
|
1 2 3 4 5 |
public static euiLayer : eui.UILayer; protected startCreateScene(): void { Main.euiLayer = new eui.UILayer; this.addChild( Main.euiLayer ); } |
四、新建ts文件，名称GameView.ts，位置/src/view/下。
|
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
/** * Created by WangChong on 15/12/7. */ class GameView extends eui.Component { public constructor () { super (); this.skinName = "src/skins/GameSkin.exml"; // 指定Skin目录及全名 } /** * 显示方法，在DialogManager脚本中调用 */ public show() { if (!this.parent) { Main.euiLayer.addChild(this); } } /** * 移除显示方法，在DialogManager脚本中调用 */ public hide() { if (this.parent) { Main.euiLayer.removeChild(this); } } // 指向GameSkin.exml文件中的该ID的图片 public Game_bg : eui.Image; /** * add方法执行完毕，调用该方法 */ public createChildren() { super.createChildren(); // 给图片添加点击事件 this.Game_bg.addEventListener(egret.TouchEvent.TOUCH_TAP, function () { DialogManager.open( GameView, "GameView", 1); }, this); } } |
五、在Main函数中显示该皮肤，并传入该类名，及显示在第几组等参数
|
1 2 3 4 5 6 7 |
protected startCreateScene(): void { Main.euiLayer = new eui.UILayer; this.addChild( Main.euiLayer ); DialogManager.open( GameView, "GameView", 1); } |
六、运行测试是否可以显示该皮肤，及点击事件。点击后，调用移除方法，是否可以移除该皮肤。
如需切换皮肤，则可以直接在当前组打开其它皮肤，如当前已打开GameView皮肤，再打开TitleView皮肤，则GameView消失，TitleView显示。
|
1 |
DialogManager.open( TitleView, "TitleView", 1); |
希望对大家有帮助~~~
- 本文固定链接: http://www.u3d8.com/?p=514
- 转载请注明: 网虫虫 在 u3d8.com 发表过
