白鹭egret项目的资源loading，界面的显示与加载进度条；

1.用egret建立一个空的euigame项目；

2.点击f5运行空的项目[他自带了一个加载的txt显示]；

EE:资源太少，加载速度太快，童鞋们可能注意不到；

然后，我们在egretwing的资源路径加如下俩文件夹；

loading【放加载界面用的图片】和Pic【放测试loading用的乱七八糟的图片(多复制一些)】

loading文件夹的loadbg是loading的背景图片；

loadback是进度条的背景图片；

loadfill是进度条图片；

自己新建俩个资源组；并且将刚刚的文件拖到对应资源组里面；

3.制作自己的加载界面；

E:(1)在eui_skins文件夹下，兴建LoadingSkin.exml样式文件，点击他；

(2)从左下角的控件位置，拖一个ProgressBar,设置好对应的参数，再拖一个Image作为背景[注意Image再bar前面]；

4.找到加载对应的函数，将自定义的界面根据加载进度显示；

EE:到src文件夹下打开LoadingUI.ts脚本；添加修改如下代码：

[添加修改的地方,博主已经做了注释:]

 //继承改为eui.Component【可以自定义皮肤】 class LoadingUI extends eui.Component implements RES.PromiseTaskReporter {      public constructor() {         super();         this.skinName="LoadingSkin";//指定好对应的皮肤名称；         this.createView();             }     barid:eui.ProgressBar;     private textField: egret.TextField;      private createView(): void {         this.textField = new egret.TextField();         this.addChild(this.textField);         this.textField.y = 300;         this.textField.width = 480;         this.textField.height = 100;         this.textField.textAlign = "center";     }      //egret加载进度回调的函数     public onProgress(current: number, total: number): void {         this.textField.text = `Loading...${current}/${total}`;          var fill=(current/total);//0,1之间         this.barid.value=fill*100;//进度条显示的进度控制     } } 

5.设置Main.ts脚本中,的资源loading顺序;

E:目的是让load界面需要的资源,先load显示出来，再控制其他资源继续loading;

代码修改如下[意义参考注释]：

6.保存编译运行，自定义的进度条界面出来了；

EE:自定loading条的大小长度等，请打开eui.skins里面ProgressbarSkin.exml修改；

白鹭自定义加载进度条界面End；

文章来源: 白鹭egret项目的资源loading，界面的显示与加载进度条；