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

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前面]；

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

对于ProgressBar的一些可以设置的属性介绍：

this.barid.maximum=100;//设置进度条的最大值
this.barid.minimum=0;//设置进度条的最小值
this.barid.width = 200;//设置bar宽

this.barid.height = 40;//高

this.barid.value = 0;//进度条初始值

对于显示的label也在这里；我们可以用他的也可以自定义；

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.保存编译运行，自定义的进度条界面出来了；

好了，白鹭自定义加载进度条界面 end.... ~ o(*￣▽￣*)o；

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

猜你喜欢