關於cocos2dx之lua使用TableView

在手機遊戲的開發中，滾動是一項非常重要的操作，而cocos2dx中使用的最廣泛的就屬於TableView了，不過由於cocos2dx的接口比較晦澀，所以需要一個熟悉的過程。本文主要講解如何使用TableView。

首先當然是創建一個TableView，這比較簡單，和其他控件差不多。看看示例代碼：

    self._skillView = cc.TableView:create(cc.size(winSize.width / 3 - 50, winSize.height - 140))
    self._skillView:setDirection(cc.SCROLLVIEW_DIRECTION_VERTICAL)    
    self._skillView:setVerticalFillOrder(cc.TABLEVIEW_FILL_TOPDOWN)
    self._skillView:setPosition(cc.p(50, 10))
    self._skillView:setDelegate()
    skill_bg:addChild(self._skillView)

需要注意的是setDirection的參數，cc.SCROLLVIEW_DIRECTION_VERTICAL表示在垂直方向滾動，cc.SCROLLVIEW_DIRECTION_HORIZONTAL則表示在水平方向滾動。

其次爲TableView設置一些回調函數。主要有4個回調函數。先看看示例代碼：

    self._skillView:registerScriptHandler(SkillBoard.tableCellTouched, cc.TABLECELL_TOUCHED)
    self._skillView:registerScriptHandler(SkillBoard.cellSizeForTable, cc.TABLECELL_SIZE_FOR_INDEX)
    self._skillView:registerScriptHandler(SkillBoard.tableCellAtIndex, cc.TABLECELL_SIZE_AT_INDEX)
    self._skillView:registerScriptHandler(SkillBoard.numberOfCellsInTableView, cc.NUMBER_OF_CELLS_IN_TABLEVIEW)

TABLECELL_TOUCHED：TableView被觸摸的時候的回調，主要用於選擇TableView中的Cell。

TABLECELL_SIZE_FOR_INDEX：此回調需要返回TableView中Cell的尺寸大小。

TABLECELL_SIZE_AT_INDEX：此回調需要爲TableView創建在某個位置的Cell。

NUMBER_OF_CELLS_IN_TABLEVIEW：此回調需要返回TableView中Cell的數量。
然後，我們先看最簡單的兩個回調函數的示例：

function SkillBoard.cellSizeForTable(view, idx)
	return 200, 200
end

function SkillBoard.numberOfCellsInTableView(view)
	return table.size(local_skills)
end

參數中的view表示TableView對象，idx表示Cell的索引。

再次，我們看看觸摸函數，參數cell表示哪一個cell被觸摸到了。

function SkillBoard.tableCellTouched(view, cell)
    local self = GUI.GetGUI("SkillBoard")    
    if self:isOpened() then
        for cl, sitem in pairs(self._skillItems) do
            local issel = (cl == cell)
            sitem:select(issel)
            if issel then
                self:onClickSkill(sitem:getSkill())
            end
        end
    end
end

  最後，看看最重要的函數，就是映射cell的接口，idx表示cell的索引。

function SkillBoard.tableCellAtIndex(view, idx)    
    local self = GUI.GetGUI("SkillBoard")
    local cell = view:dequeueCell()
    if not cell then
        cell = cc.TableViewCell:new()
    end
    return cell
end

  是不是特別簡單呢？如果需要多樣化的cell，比如物品欄，技能欄這些功能，只需要在cell上擴展，創建一些精靈或者按鈕，作爲cell的子節點加到cell上即可。例如：

        cell = cc.TableViewCell:new()
        local image1 = CHOOSE_SERVER_AREA_NORMAL
        local sprite1 = cc.Sprite:createWithSpriteFrameName(image1)
        sprite1:setAnchorPoint(cc.p(0, 0))
        sprite1:setPosition(cc.p(0, 0))
        sprite1:setTag(1)
        cell:addChild(sprite1)
        
        local image2 = CHOOSE_SERVER_AREA_SELECTED
        local sprite2 = cc.Sprite:createWithSpriteFrameName(image2)
        sprite2:setAnchorPoint(cc.p(0, 0))
        sprite2:setPosition(cc.p(0, 0))
        sprite2:setTag(2)
        cell:addChild(sprite2)

        local label = cc.Label:createWithSystemFont(strValue, DEFAULT_FONT_TTF, 20)
        label:setAnchorPoint(cc.p(0.5, 0.5))
        label:setPosition(cc.p(77, 30))
        label:setTag(3)
        cell:addChild(label)

  好了，基本的使用方法就如此了，但是。。但是，還有最重要的一點，需要大家注意的。

numberOfCellsInTableView返回的個數和TableView創建的cell數量通常是不一樣的，這是因爲cocos2dx設計上爲了節省資源，創建的cell數量 = tabview的高度 / 單個cell的高度 + 1。所以在觸摸和選中等邏輯處理的時候，一定不能使用cell來標識。因爲同一個cell物理對象，可能會映射N個邏輯對象。

通常我的做法是在tableCellAtIndex中把當前cell對應的邏輯對象存起來，這樣在tableCellTouched就可以直接找到物理cell對應的邏輯對象來處理了。