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

Myth丶恋晨 2022-04-10 06:47 817阅读 0赞

**目录**

List 组件

编码示例

ProgressBar 进度条

默认进度条资源

自定义进度条资源

--------------------

# List 组件 #

<table> 
 <tbody> 
  <tr> 
   <td><strong>Package</strong></td> 
   <td>laya.ui</td> 
  </tr> 
  <tr> 
   <td><strong>类</strong></td> 
   <td>public class List</td> 
  </tr> 
  <tr> 
   <td><strong>Inheritance</strong></td> 
   <td>List <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181228134503106">Box <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181228134503106">Component <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181228134503106">Sprite <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181228134503106">Node <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181228134503106">EventDispatcher <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181228134503106"> Object</td> 
  </tr> 
  <tr> 
   <td><strong>实现</strong></td> 
   <td>IRender, IItem</td> 
  </tr> 
 </tbody> 
</table>

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

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

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

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

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

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

## 编码示例 ##

![20181228134039278.gif][]

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

![20181228134446674.gif][]

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

# ProgressBar 进度条 #

<table> 
 <tbody> 
  <tr> 
   <td><strong>Package</strong></td> 
   <td>laya.ui</td> 
  </tr> 
  <tr> 
   <td><strong>类</strong></td> 
   <td>public class ProgressBar</td> 
  </tr> 
  <tr> 
   <td><strong>Inheritance</strong></td> 
   <td>ProgressBar <img alt="Inheritance" src="https://img-blog.csdnimg.cn/2018122814353867">Component <img alt="Inheritance" src="https://img-blog.csdnimg.cn/2018122814353867">Sprite <img alt="Inheritance" src="https://img-blog.csdnimg.cn/2018122814353867">Node <img alt="Inheritance" src="https://img-blog.csdnimg.cn/2018122814353867">EventDispatcher <img alt="Inheritance" src="https://img-blog.csdnimg.cn/2018122814353867"> Object</td> 
  </tr> 
 </tbody> 
</table>

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

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

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

<table> 
 <tbody> 
  <tr> 
   <th colspan="1">Method（方法）</th> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.ProgressBar#ProgressBar%28%29" rel="nofollow">ProgressBar</a>(skin:String = null)&nbsp; ，创建一个新的 ProgressBar 类实例。</p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.ProgressBar#destroy%28%29" rel="nofollow">destroy</a>(destroyChild:Boolean = true):void</p> <p>[override] 销毁此对象。destroy对象默认会把自己从父节点移除，并且清理自身引用关系，等待js自动垃圾回收机制回收。destroy后不能再使用。 destroy时会移除自身的事情监听，自身的timer监听，移除子对象及从父节点移除自己。</p> </td> 
  </tr> 
 </tbody> 
</table>

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

## 默认进度条资源 ##

![20181228142723852.gif][]

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);
    }

![20181228143336845.gif][]

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

## 自定义进度条资源 ##

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

![20181228144817584.gif][]

2、自己 PS 两张图片，分别作为进度条背景与进度条，尺寸不要太大。以 progressbar\_  、progress\_ 前缀命名的资源自动识别为进度条组件。可以参考《[LayaAir 快捷键设置与资源命名规则][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);
    }

![20181228145040359.gif][]

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

[20181228134039278.gif]: /images/20220402/c6e73714b9ca4f9ca1c608b35ef94d1e.png
[20181228134446674.gif]: /images/20220402/9b58d3dadfb943b6a65cde89c0401205.png
[https_ldc.layabox.com_doc_nav_zh-js-2-3-7]: https://ldc.layabox.com/doc/?nav=zh-js-2-3-7
[ProgressBar]: https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.ProgressBar
[Link 1]: https://blog.csdn.net/wangmx1993328/article/details/85245444#h3-3-2-
[20181228142723852.gif]: /images/20220402/7215e4ebc7534e04bd18fc46956bf4bb.png
[20181228143336845.gif]: /images/20220402/dd1be752c66b48cba787f70ebd8ad359.png
[20181228144817584.gif]: /images/20220402/da7304a6b2df4a21be4fc3e2e3a9cd5a.png
[LayaAir]: https://blog.csdn.net/wangmx1993328/article/details/85245444
[20181228145040359.gif]: /images/20220402/72ffa71193ad465685962f07283c7ca6.png
[https_ldc.layabox.com_doc_nav_zh-js-2-3-12]: https://ldc.layabox.com/doc/?nav=zh-js-2-3-12