目錄

List 元件

編碼示例

ProgressBar 進度條

預設進度條資源

自定義進度條資源

List 元件

Package	laya.ui
類	public class List
Inheritance	List Box Component Sprite Node EventDispatcher Object
實現	IRender, IItem

1、List 控制元件可顯示專案列表，預設為垂直方向列表。可通過UI編輯器自定義列表

2、​ List 通常由兩個部分組成：列表渲染項（單元格）、滾動條。

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  屬於特殊元件，即它是兩張及以上圖片完成的操作。

更多 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