自定义进度条资源

List 组件

Package	laya.ui
类	public class List
Inheritance	List Box Component Sprite Node EventDispatcher Object
实现	IRender, IItem

1、List 控件可显示项目列表，默认为垂直方向列表。可通过UI编辑器自定义列表

2、 List 通常由两个部分组成：列表渲染项（单元格）、滚动条。

常用属性	功能说明
repeatX	水平方向显示的单元格数量。
repeatY	垂直方向显示的单元格数量。
spaceX	水平方向显示的单元格之间的间距（以像素为单位）。
spaceY	垂直方向显示的单元格之间的间距（以像素为单位）。
vScrollBarSkin	垂直方向滚动条皮肤。
hScrollBarSkin	水平方向滚动条皮肤。

3、给 List 添加滚动条有两种方式：一种是直接在List 内部拖放一个滚动条，并设置滚动条的名字为 scrollBar，另一种方式是设置 List 的属性vScrollBarSkin、hScrollBarSkin 的值为滚动条的资源地址。

4、List 的列表渲染项既可以是 Box 对象，也可以是页面对象。

5、Box、List、Tab、RadioGroup、ViewStack、Panel、HBox、VBox、Tree、Sprite 都属于容器组件。

编码示例

1、在 bin/ui目录下准备了6张列表图片，尺寸为 300 * 60 像素(尺寸没有强制要求)

(function () {
    // List 列表项渲染器——————需要在 setup 之前执行
    var WID = 373, HEI = 85;
    function Item() {
        Item.__super.call(this);
        this.size(WID, HEI);
        this.img = new Laya.Image();
        this.addChild(this.img);
        this.setImg = function (src) {
            this.img.skin = src;
        }
    }
    //在JS中，通过Laya.class来定义类，同时可以指定其继承关系
    Laya.class(Item, "Item", Laya.Box);

    Laya.init(1080, 1920, Laya.WebGL);//初始化容器，不支持WebGL时自动切换至Canvas
    Laya.stage.bgColor = "#232628";//舞台背景色
    setup();

    //设置显示列表 List
    function setup() {
        var list = new Laya.List();
        //itemRender:单元格渲染器,取值为 单元格类对象，或者 UI 的 JSON 描述
        list.itemRender = Item;

        list.repeatX = 1;//水平方向显示的单元格数量
        list.repeatY = 3;//垂直方向显示的单元格数量
        list.x = (Laya.stage.width - WID) / 3;//组件显示的x坐标位置
        list.y = 20;//组件显示的y坐标位置
        list.vScrollBarSkin = "";//垂直方向滚动条皮肤，值为空时表示使用滚动条，但是隐藏滚动条
        list.selectEnable = true;//指定是否可以选择，若值为true则可以选择，否则不可以选择。 @default false
        /** 单元格渲染处理器(默认返回参数cell:Box,index:number)
         * 不处理时，组件显示不出来
         */
        list.renderHandler = new Laya.Handler(this, updateItem);
        /**
         * 改变 List 的选择项时执行的处理器，(默认返回参数： 项索引（index:int）)，索引从0开始
         * 当前点击列表项与上一次不同时就会触发
         */
        list.selectHandler = new Laya.Handler(this, onSelect);

        //设置列表数据源，数据项为对应图片的路径(bin目录下)
        list.array = ["ui/list_0.png", "ui/list_1.png", "ui/list_2.png", "ui/list_3.png", "ui/list_4.png", "ui/list_5.png"];

        //假如list.width的值小于列表中图片的宽度，则列表项内容可能显示不出来;
        //list.height高度非自适应时，高度决定了显示的列表项的多少
        list.width = 250;//lsit 的宽度，以像素为单位,值为0时，宽度为自适应大小
        list.height = 250;//list 的高度，以像素为单位,值为0时，高度为自适应大小

        Laya.stage.addChild(list);//将列表添加到舞台显示
    }

    //显示列表渲染处理器回调函数
    function updateItem(cell, index) {
        cell.setImg(cell.dataSource);
    }

    //改变显示列表选择项时执行的处理器回调函数
    function onSelect(index) {
        console.log("当前选择索引：" + index);
    }
})();

官网文档：https://ldc.layabox.com/doc/?nav=zh-js-2-3-7

ProgressBar 进度条

Package	laya.ui
类	public class ProgressBar
Inheritance	ProgressBar Component Sprite Node EventDispatcher Object

1、ProgressBar 组件显示内容的加载进度，经常被用于显示游戏中某个操作的进度，例如加载资源的进度、角色经验或血量的进度等

2、ProgressBar 属于特殊组件，即它是两张及以上图片完成的操作。

Property（属性）
bar : Image ，[read-only] 获取进度条对象。
bg : Image ，[read-only] 获取背景条对象。
changeHandler : Handler 当 ProgressBar 实例的 value 属性发生变化时的函数处理器。默认返回参数value 属性（进度值）。
height : Number ，[override] 表示显示对象的高度，以像素为单位。注：当值为0时，高度为自适应大小。
sizeGrid : String 当前 ProgressBar 实例的进度条背景位图（ Image 实例）的有效缩放网格数据。数据格式："上边距,右边距,下边距,左边距,是否重复填充(值为0：不重复填充，1：重复填充)"，以逗号分隔。例如："4,4,4,4,1"
skin : String 对象的皮肤地址，以字符串表示。如果资源未加载，则先加载资源，加载完成后应用于此对象。注意：资源加载完成后，会自动缓存至资源库中。
value : Number ，当前的进度量。取值：介于0和1之间。
width : Number ，[override] 表示显示对象的宽度，以像素为单位。注：当值为0时，宽度为自适应大小。

Method（方法）
ProgressBar(skin:String = null) ，创建一个新的 ProgressBar 类实例。
destroy(destroyChild:Boolean = true):void [override] 销毁此对象。destroy对象默认会把自己从父节点移除，并且清理自身引用关系，等待js自动垃圾回收机制回收。destroy后不能再使用。 destroy时会移除自身的事情监听，自身的timer监听，移除子对象及从父节点移除自己。

Method（方法）

ProgressBar(skin:String = null) ，创建一个新的 ProgressBar 类实例。

destroy(destroyChild:Boolean = true):void

[override] 销毁此对象。destroy对象默认会把自己从父节点移除，并且清理自身引用关系，等待js自动垃圾回收机制回收。destroy后不能再使用。 destroy时会移除自身的事情监听，自身的timer监听，移除子对象及从父节点移除自己。

更多 API 可以参考官网：https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.ProgressBar

默认进度条资源

1、系统默认提供的进度条资源如上所示，如果觉得样式不能满足需求，则可以自己 PS 新的资源来替换掉即可。

//初始化引擎，设置宽高并开启WebGL渲染模式
Laya.init(600, 400, Laya.WebGL);
// Laya.stage.bgColor = "#FFF";//设置舞台背景颜色
var progressBar;//进度条对象
var label_Info;//标签对象

//加载系统默认的图集资源，加载成功后执行onLoad回调方法
Laya.loader.load("res/atlas/comp.atlas", Laya.Handler.create(this, onLoaded));
function onLoaded() {
    //创建进度条对象，参数为皮肤地址(使用系统默认的进度条资源)，也可以用 skin 属性设置
    progressBar = new Laya.ProgressBar("comp/progress.png");
    progressBar.width = 400;//组件长度
    progressBar.pos(20, 10);//组件显示的位置
    progressBar.value = 0;//当前的进度量.介于0和1之间,默认不设置时是0.5，即会出现在中间的位置

    //实例的进度条背景位图Image的有效缩放网格数据
    //数据格式："上边距,右边距,下边距,左边距,是否重复填充(值为0：不重复填充，1：重复填充)"，以逗号分隔
    progressBar.sizeGrid = "5,5,5,5";
    Laya.stage.addChild(progressBar);
    Laya.timer.loop(Math.round(Math.random() * 2000), this, changeProgressBar);
    showInfo();
}

//改变进度条的值
function changeProgressBar() {
    if (progressBar.value >= 1) {
        progressBar.value = 0;
    }
    progressBar.value += Math.random() * 0.1;
    label_Info.text = "加载 " + Math.floor(progressBar.value * 100) + " %";
}

//显示一个标签用于描述当前进度条的进度
function showInfo() {
    label_Info = new Laya.Label();
    label_Info.text = "加载 0";
    label_Info.fontSize = 15;
    label_Info.color = "#fff";
    label_Info.pos(190, 30);
    Laya.stage.addChild(label_Info);
}

2、使用两张图片进行不停的切换来达到进度效果，上面的称为进度条对象，下面白色称为背景条对象。

自定义进度条资源

1、如果觉得系统默认提供进度条样式不能满足需求，则可以自己 PS 新的资源来替换掉即可。

2、自己 PS 两张图片，分别作为进度条背景与进度条，尺寸不要太大。以 progressbar_ 、progress_ 前缀命名的资源自动识别为进度条组件。可以参考《LayaAir 快捷键设置与资源命名规则》

//初始化引擎，设置宽高并开启WebGL渲染模式
Laya.init(600, 400, Laya.WebGL);
// Laya.stage.bgColor = "#FFF";//设置舞台背景颜色
var progressBar;//进度条对象
var label_Info;//标签对象

//加载自定义进度条资源，加载成功后执行onLoad回调方法
Laya.loader.load(["ui/progress_me.png","ui/progress_me$bar.png"], Laya.Handler.create(this, onLoaded));
function onLoaded() {
    //创建进度条对象，参数为皮肤地址(使用自定义进度条资源)，也可以用 skin 属性设置
    progressBar = new Laya.ProgressBar("ui/progress_me.png");
    progressBar.width = 400;//组件长度
    progressBar.pos(20, 10);//组件显示的位置
    progressBar.value = 0;//当前的进度量.介于0和1之间,默认不设置时是0.5，即会出现在中间的位置

    //实例的进度条背景位图Image的有效缩放网格数据
    //数据格式："上边距,右边距,下边距,左边距,是否重复填充(值为0：不重复填充，1：重复填充)"，以逗号分隔
    progressBar.sizeGrid = "5,5,5,5";
    Laya.stage.addChild(progressBar);
    Laya.timer.loop(Math.round(Math.random() * 2000), this, changeProgressBar);
    showInfo();
}

//改变进度条的值
function changeProgressBar() {
    if (progressBar.value >= 1) {
        progressBar.value = 0;
    }
    progressBar.value += Math.random() * 0.1;
    label_Info.text = "加载 " + Math.floor(progressBar.value * 100) + " %";
}

//显示一个标签用于描述当前进度条的进度
function showInfo() {
    label_Info = new Laya.Label();
    label_Info.text = "加载 0";
    label_Info.fontSize = 15;
    label_Info.color = "#fff";
    label_Info.pos(190, 30);
    Laya.stage.addChild(label_Info);
}

更多可以参考官网：https://ldc.layabox.com/doc/?nav=zh-js-2-3-12

LayaAir UI组件 # List 列表、ProgressBar 进度条

List 组件

编码示例

ProgressBar 进度条

默认进度条资源

自定义进度条资源

猜你喜欢