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时自动切换至CanvasLaya.stage.bgColor = "#232628";//舞台背景色setup();//设置显示列表 Listfunction 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 进度条相关推荐

c#进度条刻度_c# ProgressBar进度条方向和美观
protected override CreateParams CreateParams { get { CreateParams cp = base.CreateParams; cp.Style | ...
第一百九十八节，jQuery EasyUI，ProgressBar(进度条)组件
jQuery EasyUI,ProgressBar(进度条)组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI 中 ProgressBar(进度条) ...
android基础 [超级详细android常用控件解析（ScollView控件,ProgressBar进度条,PopupWindow控件）]
目录 1 章节目录 2 ScollView控件 2.1 ScrollView简介 2.2 ScrollView使用 2.3 常用属性及方法 3 ProgressBar进度条 3.1 简介 3.2 常用 ...
Acitivity（页面）之间的跳转，ProgressBar 进度条，PopupWindow 弹出框，Dialog 对话框，Spinner下拉框
Acitivity(页面)之间的跳转 Acitivity(页面)之间的跳转需要使用到 Intent(意图) Intent intent = new Intent(MainActivity.this(从 ...
ProgressBar(进度条)－常用属性讲解与基础实例
本节给大家带来的是Android基本UI控件中的ProgressBar(进度条),ProgressBar的应用场景很多,比如用户登录时,后台在发请求,以及等待服务器返回信息,这个时候会用到进度条:或者 ...
ProgressBar进度条
此处有线程的相关操作--(尚未学习) 进度条通常要与线程同时使用,即后台运行一个线程,同时将后台程序运行的状态以进度条的方式显示出来. import org.eclipse.swt.SWT; impo ...
android 自定义背景园,Android 自定义ProgressBar 进度条颜色和背景颜色
Android 自定义ProgressBar 进度条颜色和背景颜色首先,在drawable目录下新建文件 personal_center_level_progress_bg.xmlandroid a ...
android 自定义进度条旋转,Android_Android ProgressBar进度条使用详解，ProgressBar进度条，分为旋转进 - phpStudy...
Android ProgressBar进度条使用详解 ProgressBar进度条,分为旋转进度条和水平进度条,进度条的样式根据需要自定义,之前一直不明白进度条如何在实际项目中使用,网上演示进度条的案 ...
android ProgressBar 进度条demo
ProgressBar Demo 进度条没有什么好讲解的,就是几个方法,熟悉了就ok.直接上代码. activity_main.xml <?xml version="1.0" ...
Python使用tkinter库制作带有Laber标签、Entry文本框、Progressbar进度条、text日志框等元素的GUI操作界面
本文通过实例介绍Python的tkinter库的title.iconbitmap.geometry.attributes.grid等类的功能,并制作带有Laber标签.Entry文本框.Progres ...

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