学习Eegret UI Editor-如何使用自己做的exml皮肤文件_ui_editor

我这边是直接用Eegret UI Editor写好了自己的exml文件，如下图所示

根据白鹭官方的B站教程，使用这个exml文件的核心就是要将添加到stage舞台的类和这个exml文件绑定起来，有两种方式，接下来听我好好地给大伙娓娓道来（装上一逼）。

两种方法都需要做的文件准备：

1. 第一种方式：（自定义场景类绑定exml文件）
   先创建好需要加载到舞台的自定义的类：

class BallGame extends eui.Component implements eui.UIComponent{ constructor(){
    super()
    //这一行是第一种方法需要用到的而已，第二种就不用了
    this.skinName="resource/eui_skins/my_skin/new_skin.exml" }

protected partAdded(partName: string, instance: any): void {
    super.partAdded(partName,instance) } protected childrenCreated(): void {
    super.childrenCreated() } }
1
2
3
4
5
6
7
8

eui.Component是继承自 egret.DisplayObjectContainer容器类并实现一个UIComponent接口的一个类，而UIComponent是一个源码的接口

如果你问我为什么要继承类这个又实现那个接口的话，那我只能说，“想知道我的秘密吗？想要的话就给你好了，去找吧！我把这段代码的秘密都放在了源码里了”

类创建成功后，设置属性skinName，源码里的定义是

 /**
         * 皮肤标识符。有效值可为：皮肤类定义,皮肤类名,皮肤实例,EXML文件内容,或外部EXML文件路径，
         * @version Egret 2.4
         * @version eui 1.0
         * @platform Web,Native
         * @language zh_CN
  */
        skinName: any;
1
2
3
4
5
6
7
8

之后源码会对skinName进行一个解析（对，想知道就去看源码，这里不方便说太多，因为我懒）
做完上面步骤之后，最重要一步来了，就是别忘了在入口类里将你的场景类添加到舞台上，

protected createGameScene(): void {
 	let gameball=new BallGame()
    this.addChild(gameball)
    //两种方式均可
    // this.addChild(new BallGame())
    }
1
2
3
4
5
6

2. 第二种方式：（自定义场景类＋直接修改default.thm.json）
   把方式一里的this.skinName="***“给删掉，主打的就是一个"低代码”
   找到resource目录下的default.thm.json文件，直接修改！

{
	"skins": {
		"eui.Button": "resource/eui_skins/ButtonSkin.exml",
		"eui.CheckBox": "resource/eui_skins/CheckBoxSkin.exml",
		"eui.HScrollBar": "resource/eui_skins/HScrollBarSkin.exml",
		"eui.HSlider": "resource/eui_skins/HSliderSkin.exml",
		"eui.Panel": "resource/eui_skins/PanelSkin.exml",
		"eui.TextInput": "resource/eui_skins/TextInputSkin.exml",
		"eui.ProgressBar": "resource/eui_skins/ProgressBarSkin.exml",
		"eui.RadioButton": "resource/eui_skins/RadioButtonSkin.exml",
		"eui.Scroller": "resource/eui_skins/ScrollerSkin.exml",
		"eui.ToggleSwitch": "resource/eui_skins/ToggleSwitchSkin.exml",
		"eui.VScrollBar": "resource/eui_skins/VScrollBarSkin.exml",
		"eui.VSlider": "resource/eui_skins/VSliderSkin.exml",
		"eui.ItemRenderer": "resource/eui_skins/ItemRendererSkin.exml",
		"BallGame": "resource/eui_skins/my_skin/new_skin.exml"
	},
	"autoGenerateExmlsList": true,
	"exmls": [
		"resource/eui_skins/ButtonSkin.exml",
		"resource/eui_skins/CheckBoxSkin.exml",
		"resource/eui_skins/HScrollBarSkin.exml",
		"resource/eui_skins/HSliderSkin.exml",
		"resource/eui_skins/ItemRendererSkin.exml",
		"resource/eui_skins/my_skin/new_skin.exml",
		"resource/eui_skins/PanelSkin.exml",
		"resource/eui_skins/ProgressBarSkin.exml",
		"resource/eui_skins/RadioButtonSkin.exml",
		"resource/eui_skins/ScrollerSkin.exml",
		"resource/eui_skins/TextInputSkin.exml",
		"resource/eui_skins/ToggleSwitchSkin.exml",
		"resource/eui_skins/VScrollBarSkin.exml",
		"resource/eui_skins/VSliderSkin.exml",
		"resource/eui_skins/my_skin/new_skin.exml"
	],
	"path": "resource/default.thm.json"
}
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

注意每个组的最后一行，都是我新添加进去的，然后Ctrl+S保存，直接运行，搞定