本節我們使用LayaBox 自帶List元件實現了一個排行榜介面，由於List元件限制很多，我們下篇自己實現一個類似Unity ScrollView的效果。list滑動效果如下：

排行榜裡面的資料，頭像等都是隨便寫上去的，而且分數也沒有實現從高到低的排序，我們現在只是做出上圖的效果。

一、UI效果製作
a. 建立一個View型別的UI頁面，RankList.ui。

b. 製作返回按鈕和上面的標籤

注：圖片可以使用九宮格切割，這樣的話一張圓圖可以製作橢圓形按鈕或者長條Image。選中Image->常用->sizeGrid

c. 製作一個單元格樣式

最後效果如下：

這裡面元件的相互位置，需要自己設定。具體數值沒有意義，所以自己動手完成。
d. 將C中所有資源選中，然後右鍵（Crit + B）生成一個Box容器，該容器就是你List中的一個單元格，並將renderType設定為render，
e. 選中生成的Box容器，然後右鍵（Crit + B）生成一個List容器，該List就是我們最後生成的List，調整List位置到合適的位置，同時調整Box的width,height,x,y等屬性，將其對齊。最後層級結構如下：

f. 這一步我們來看看list中一些常用屬性的設定

repeatX，repeatY： 為5的話會將Box單元格重複5次，並且依次排列渲染。
spaceX，spaceY： 兩個Box單元格之間的間隔距離。
vScrollBarSkin，hScrollBarSkin：橫豎滾動面板。
其它一些根據自己情況設定，更多的是從程式碼中設定。

好了，選擇匯出->清理並匯出或者（Crit + F12）。將生成Ui的匯出，不然程式碼中找不到相應的UI。

二、程式碼部分。

好了，現在終於到重點了。下面我直接貼出專案中的程式碼。

/**
 * 排行榜UI
 */
class TMRankListUI extends ui.gameUI.RankListUI implements TMBaseUI {
    rankListBtns: Array<Laya.Button> =  [
        this.backBtn
    ];

    constructor() {
        super();
        for
 
 (var button of this.rankListBtns) {
            let buttons: Array<string> = [button.name]
            button.clickHandler = new Laya.Handler(this, this.addButtonEvent, buttons);
            this.addMouseOverEvent(button);
            this.addMouseOutEvent(button);
        }
        this.initList();
    }

    /**
     * 新增按鈕點選事件
     * @param buttons 
     */
    private addButtonEvent(buttons: string) {
        if (buttons == "backBtn") {
            gameUIInstance.showUI(UIType.mainMenu);
        }
    }

    /**
     * 滑鼠進入到按鈕，按鈕效果
     * @param button 
     */
    private addMouseOverEvent(button: Laya.Button) {
        button.on(Laya.Event.MOUSE_OVER, button, function() {
            button.scale(1.2, 1.2);
        });
    }

    /**
     * 滑鼠離開到按鈕，按鈕效果
     * @param button 
     */
    private addMouseOutEvent(button: Laya.Button) {
        button.on(Laya.Event.MOUSE_OUT, button, function() {
            button.scale(1, 1);
        });
    }

    /**
     * 初始化ListUI
     */
    private initList() {
        var rankDatas = this.getRankDatas();
        this.rankList.vScrollBarSkin = '';
        this.rankList.repeatY = rankDatas.length;
        this.rankList.array = rankDatas;
        this.rankList.renderHandler = new Laya.Handler(this, this.onListRender);
    }

    /**
     * 排行榜渲染
     */
    private onListRender(cell: Box, index: number): void {
        if (index > this.rankList.array.length) {
            return;
        }
        var data: RankData = this.rankList.array[index];
        var headImg: Laya.Image = cell.getChildByName("touXiangImg") as Laya.Image;
        var nickNameLab: Laya.Label = cell.getChildByName("niChengLab") as Laya.Label;
        var orderLab: Laya.Label = cell.getChildByName("paiMingLab") as Laya.Label;
        var scoreLab: Laya.Label = cell.getChildByName("fenShuLab") as Laya.Label;
        var paiMingImg: Laya.Image = cell.getChildByName("paiMingImg") as Laya.Image;
        headImg.skin = "ui/" + data.headImg + ".png";
        nickNameLab.changeText(data.nickName);
        orderLab.changeText((index + 1).toString());
        scoreLab.changeText(data.score.toString());
        if (index == 0) {
            paiMingImg.skin = "ui/ranking01.png";
        } else if (index == 1) {
            paiMingImg.skin = "ui/ranking02.png";
        } else if (index == 2) {
            paiMingImg.skin = "ui/ranking03.png";
        } else {
            paiMingImg.skin = "ui/ranking04.png";
        }
    }

    /**
     * 獲取排行榜資料
     */
    private getRankDatas(): Array<RankData> {
        var rankDatas = TMParsingThythm.ParsingRank();
        return this.sortRankByScore(rankDatas);
    }

    /**
     * 將排行榜按照分數排序 
     * @param Array 
     */
    private sortRankByScore(rankDatas: Array<RankData>): Array<RankData> {
        return rankDatas;
    }

    public showUI() {
        this.visible = true;
        var rankDatas = this.getRankDatas();
        this.rankList.repeatY = rankDatas.length;
        this.rankList.array = rankDatas;
        this.rankList.scrollTo(0);
    }

    public hideUI() {
        this.visible = false;
    }
}

/**
 * 排行資料 
 */
class RankData {
    // 頭像
    headImg: string;
    // 分數
    score: number;
    // 暱稱
    nickName: string;
    constructor(headImg: string, nickname: string, score: number) {
        this.headImg = headImg;
        this.nickName = nickname;
        this.score = score;
    }
}

上面一些函式我並沒有實現，但是並不影響使用。重點部分在兩個函式中：initList，onListRender。程式碼比較簡單，加上一些註釋，看起來肯定沒問題的。

上面效果倒是實現了，但是呢，list有很多問題在。比如無法將其中某一項放大使用，將其中某一項居中使用，總之問題多多，下一篇，我自己實現了一個類似於ScrollView的效果，不知道怎麼處理的可以去看看。