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

       TableView是在实际开发经常用到的控件，它可以重复利用所创建的列表项，这样就避免了界面卡顿。效果和ScrollView做的排行榜效果差不多。不同之处是ScrollView右边有滚动条，而TableView没有。TableView就没有问题了？不是的，TableView还有隐藏的问题，这篇我们就来看看如何用TableView以及解决在实际开发中的一些问题。

一、TableView

1.RankView.lua代码

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:initTableView();
end

function RankView:initTableView()
    --scroll的尺寸
    local sizeScroll = self.m_scrollViewRankList:getContentSize()
    --scroll的位置坐标
    local positionScroll = cc.p(self.m_scrollViewRankList:getPositionX(), self.m_scrollViewRankList:getPositionY());
    --scroll从父节点移除
	self.m_scrollViewRankList:removeFromParent();

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

    --创建TableView
    self.m_tableView = cc.TableView:create( cc.size( sizeScroll.width, sizeScroll.height) );
    --TabelView添加到PanleMain
	panelMain:addChild(self.m_tableView);
	self.m_tableView:setPosition(positionScroll);
    --设置滚动方向
	self.m_tableView:setDirection( self.m_scrollViewRankList:getDirection() );
    --竖直从上往下排列
	self.m_tableView:setVerticalFillOrder(cc.TABLEVIEW_FILL_TOPDOWN);
    --设置代理
	self.m_tableView:setDelegate();

    self.m_tableView:registerScriptHandler( handler(self, self.scrollViewDidScroll),cc.SCROLLVIEW_SCRIPT_SCROLL);           --滚动时的回掉函数
	self.m_tableView:registerScriptHandler( handler(self, self.cellSizeForTable), cc.TABLECELL_SIZE_FOR_INDEX);             --列表项的尺寸
	self.m_tableView:registerScriptHandler( handler(self, self.tableCellAtIndex), cc.TABLECELL_SIZE_AT_INDEX);              --创建列表项
	self.m_tableView:registerScriptHandler( handler(self, self.numberOfCellsInTableView), cc.NUMBER_OF_CELLS_IN_TABLEVIEW); --列表项的数量

    self.m_tableView:reloadData();
end

function RankView:scrollViewDidScroll(view)
end

function RankView:cellSizeForTable(view, idx)
    local panelRankItem = self.m_panelRankItem:clone();
    iHeight = panelRankItem:getContentSize().height + panelRankItem:getLayoutParameter():getMargin().bottom;
	return 0, iHeight;
end

function RankView:numberOfCellsInTableView(view)
	return 10;  --10个列表项
end

function RankView:tableCellAtIndex(view, idx)
	local index = idx + 1;
	local cell = view:dequeueCell();

    local panelRankItem = nil;
    if nil == cell then
        cell = cc.TableViewCell:new();
        --创建列表项
        local panelRankItem = self.m_panelRankItem:clone();
        self:resetLabelNum(panelRankItem, index);
        panelRankItem:setPosition(cc.p(0, 0));
        panelRankItem:setTag(123);
        cell:addChild(panelRankItem);
    else
        panelRankItem = cell:getChildByTag(123);
        self:resetLabelNum(panelRankItem, index);
    end

	return cell
end

--设置排行榜名次
function RankView:resetLabelNum(panelRankItem, iRankNum)
    local imageRankNum = panelRankItem:getChildByName("Image_RankNum");
    local labelRankNum = imageRankNum:getChildByName("Label_RankNum");
    labelRankNum:setString(iRankNum);
end

return RankView

2.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

3.运行效果

二、TableView的问题

 问题1：列表项有触摸事件，列表项会吞噬TableView的触摸事件。

• 修改CocosStudio的Panel_RankItem交互为可交互，保存并导出UI界面。

 

• 问题

解决问题1

• 设置列表项不吞噬触摸事件

--不吞噬触摸事件
panelRankItem:setSwallowTouches(false);   

• 列表项添加触摸监听

--添加触摸监听
panelRankItem:addTouchEventListener(handler(self, self.onTouchPanelRankItem));

• TableView滚动时设置不能点击列表项

function RankView:scrollViewDidScroll(view)
    self.m_bMovedTableView = true;
end

• 监听回掉函数

function RankView:onTouchPanelRankItem(sender, eventType)
    if eventType == ccui.TouchEventType.began then
        self.m_bMovedTableView = false
    elseif eventType == ccui.TouchEventType.ended then
        if self.m_bMovedTableView ~= true then
            print("点击了==")
        end
    end
end

问题2：列表项滚动到TableView外时还可以触摸列表项

文件下载地址：http://pan.baidu.com/s/1skMaUID
还么找到好的解决方法，找到了再来补充吧。大家有好的解决方法，告诉我。