LayaBox -- List组件的使用

本节我们使用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的效果，不知道怎么处理的可以去看看。