
一、使用exml搭建界面
1.创建exml文件,进入到编辑模式

2.组织UI界面元素

将所需的控件下的组件拖入编辑页中,输入ID,修改标签属性

快速调整组件位置

二、使用编码将EXML联系起来
1.到src目录下,创建新的ts文件

打开该文件进行编码,设置关联的皮肤类,将类名保持与文件名一致,并将其继承eui.Component的基础类

2.设置皮肤类名
this.skinName = "皮肤类名";
这个皮肤类名应与对应exml文件中的类名一致


3.实例化创建
为了能够使用到组件,我们需要对其ID进行声明,引用到类里面去
在对应ts文件中进行编辑

声明ID后,还不能马上用到。当组件构建完成后,才能够使用。
EUI框架中,有个方法, childrenCreated() ,这个方法能够保证组件能够被引用到。这里面可以监听事件。

三.实例化创建
在Main.ts文件中进行编辑实例化创建的过程
找到startCreateScene()方法

创建完成后,进行编译调试,就可以看到界面了

四.资源管理
1.在目录resource下点击default.res.json文件,将展示出一个资源管理器状态

在默认的模版项目下可以看到有个preload分组,这是预加载的资源组,要注意这个组的资源不要太多,以免影响加载速度。
2.添加资源组,点击添加组,并命名

可从资源列表中拖拽资源到自定义分组

3.导入资源
将资源放置resource文件夹某个目录下,刷新资源列表

为了能引用到,要将资源添加到preload分组当中去

4.快速添加按钮皮肤
复制资源名称
到皮肤快捷模版,即可实现按钮替换

