Cocos2d-lua示例（一）排行榜之ScrollView

       游戏都会有排行榜，人都有虚荣，竞争之心，为了挤入排行榜，玩家得费大量时间，大量金钱。我觉得玩游戏就是消遣时间，但不能在游戏中迷失自我，现实和虚幻得分开，这是对大家的忠告。这篇主要讲排行榜的开发，排行榜是比较简单的，任何界面都是数据+显示。首先我们得准备排行榜的数据，数据从哪里？是从服务器请求来的。数据准备好了，我们就通过某种形式表现出来，比如列表，网格表现。效果如下：

一、UI界面的制作

CocosStudio制作UI界面，看这篇文章：http://blog.csdn.net/fjdmy001/article/details/52982515

二、配置文件

1.修改config.json

• 竖屏："isLandscape" = false
• 尺寸："width" = 540, "height" = 960

2.修改config.lua

• 开启全局变量：CC_DISABLE_GLOBAL = false
• 设计尺寸：width = 1080，height = 1920，autoscale = "FIXED_HEIGHT"

三、代码逻辑

1.views下创建RankView.lua文件，文件 --> 新建 --> 文件

2.lua项目下添加RankView.lua文件，lua项目鼠标右击 --> Synchronize file and folders

3.代码

local RankView = class("RankView")

function RankView:ctor()
    self:init();
end

function RankView:init()
    --加载Rank.json文件
    self.m_uiRoot = ccs.GUIReader:getInstance():widgetFromJsonFile("ui/Rank.json");

    local panelMain = self.m_uiRoot:getChildByName("Panel_Main");

    --获得滚动层
    self.m_scrollViewRankList = panelMain:getChildByName("ScrollView_RankList");

    --获得列表项
    self.m_panelRankItem = self.m_scrollViewRankList:getChildByName("Panel_RankItem");
    --引用计数加1，记住retain，必定会release(引用计数减1)
    self.m_panelRankItem:retain();
    --列表项从父节点中移除
    self.m_panelRankItem:removeFromParent();

    self:resetScrollViewRankList();
end

function RankView:resetScrollViewRankList()
    --创建10个列表项
    local iTotalNum = 10; 
    local iTotalHeight = 0;  --内容高
    for i = 1, iTotalNum do
        local panelRankItem = self.m_panelRankItem:clone();
        local imageRankNum = panelRankItem:getChildByName("Image_RankNum");
        local labelRankNum = imageRankNum:getChildByName("Label_RankNum");
        labelRankNum:setString(i);

        --getLayoutParameter():getMargin()，获得布局的Margin
        iTotalHeight = iTotalHeight + panelRankItem:getContentSize().height + panelRankItem:getLayoutParameter():getMargin().bottom;

        --添加到滚动层
        self.m_scrollViewRankList:addChild(panelRankItem);
    end
    --设置滚动层内容的大小
    self.m_scrollViewRankList:setInnerContainerSize(cc.size(self.m_scrollViewRankList:getContentSize().width, iTotalHeight));
    --是否显示滚动条
    --self.m_scrollViewRankList:setScrollBarEnabled(false);

    --别忘了，引用计数减1
    self.m_panelRankItem:release();
end

return RankView

3.RankView添加到场景

local MainScene = class("MainScene", cc.load("mvc").ViewBase)

function MainScene:onCreate()
    local rankView = require("src.app.views.RankView").new();
    self:addChild(rankView.m_uiRoot)
end

return MainScene

ScrollView开发简单的排行榜就好了，但是这里有个遗留问题是：ScrollView中添加了列表项10个，那么你试试加10000个甚至更多，你会发现界面会比较卡。为什么会卡呢？以为一次就创建这么多的控件，渲染的时间也增多了。那怎么解决呢？我们会用TableView来代替ScrollView。如果界面的列表项比较少，我们可以使用ScrollView。