在手機(jī)游戲的開發(fā)中，滾動(dòng)是一項(xiàng)非常重要的操作，而cocos2dx中使用的最廣泛的就屬于TableView了，不過由于cocos2dx的接口比較晦澀，所以需要一個(gè)熟悉的過程。本文主要講解如何使用TableView。
首先當(dāng)然是創(chuàng)建一個(gè)TableView，這比較簡(jiǎn)單，和其他控件差不多。看看示例代碼：

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的參數(shù)，cc.SCROLLVIEW_DIRECTION_VERTICAL表示在垂直方向滾動(dòng)，cc.SCROLLVIEW_DIRECTION_HORIZONTAL則表示在水平方向滾動(dòng)。
其次為TableView設(shè)置一些回調(diào)函數(shù)。主要有4個(gè)回調(diào)函數(shù)。先看看示例代碼：

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被觸摸的時(shí)候的回調(diào)，主要用于選擇TableView中的Cell。

TABLECELL_SIZE_FOR_INDEX：此回調(diào)需要返回TableView中Cell的尺寸大小。
TABLECELL_SIZE_AT_INDEX：此回調(diào)需要為TableView創(chuàng)建在某個(gè)位置的Cell。
NUMBER_OF_CELLS_IN_TABLEVIEW：此回調(diào)需要返回TableView中Cell的數(shù)量。
然后，我們先看最簡(jiǎn)單的兩個(gè)回調(diào)函數(shù)的示例：

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

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

參數(shù)中的view表示TableView對(duì)象，idx表示Cell的索引。
再次，我們看看觸摸函數(shù)，參數(shù)cell表示哪一個(gè)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

最后，看看最重要的函數(shù)，就是映射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

是不是特別簡(jiǎn)單呢？如果需要多樣化的cell，比如物品欄，技能欄這些功能，只需要在cell上擴(kuò)展，創(chuàng)建一些精靈或者按鈕，作為cell的子節(jié)點(diǎn)加到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)

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

numberOfCellsInTableView返回的個(gè)數(shù)和TableView創(chuàng)建的cell數(shù)量通常是不一樣的，這是因?yàn)閏ocos2dx設(shè)計(jì)上為
了節(jié)省資源，創(chuàng)建的cell數(shù)量 = tabview的高度 / 單個(gè)cell的高度 +
1。所以在觸摸和選中等邏輯處理的時(shí)候，一定不能使用cell來標(biāo)識(shí)。因?yàn)橥粋€(gè)cell物理對(duì)象，可能會(huì)映射N個(gè)邏輯對(duì)象。

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

在手機(jī)游戲的開發(fā)中，滾動(dòng)是一項(xiàng)非常重要的操作，而cocos2dx中使用的最廣泛的就屬于TableView了，不過由于cocos2dx的接口比較晦澀，所以需要一個(gè)熟悉的過程。本文主要講解如何使用TableView。 首先當(dāng)然是創(chuàng)建一個(gè)TableView，這比較簡(jiǎn)單，和其他控件差不多?？纯词纠a：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的參數(shù)，cc.SCROLLVIEW_DIRECTION_VERTICAL表示在垂直方向滾動(dòng)，cc.SCROLLVIEW_DIRECTION_HORIZONTAL則表示在水平方向滾動(dòng)。 其次為TableView設(shè)置一些回調(diào)函數(shù)。主要有4個(gè)回調(diào)函數(shù)。先看看示例代碼：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被觸摸的時(shí)候的回調(diào)，主要用于選擇TableView中的Cell。 TABLECELL_SIZE_FOR_INDEX：此回調(diào)需要返回TableView中Cell的尺寸大小。 TABLECELL_SIZE_AT_INDEX：此回調(diào)需要為TableView創(chuàng)建在某個(gè)位置的Cell。 NUMBER_OF_CELLS_IN_TABLEVIEW：此回調(diào)需要返回TableView中Cell的數(shù)量。 然后，我們先看最簡(jiǎn)單的兩個(gè)回調(diào)函數(shù)的示例：function SkillBoard.cellSizeForTable(view, idx) return 200, 200endfunction SkillBoard.numberOfCellsInTableView(view) return table.size(local_skills)end參數(shù)中的view表示TableView對(duì)象，idx表示Cell的索引。 再次，我們看看觸摸函數(shù)，參數(shù)cell表示哪一個(gè)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 endend最后，看看最重要的函數(shù)，就是映射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 cellend是不是特別簡(jiǎn)單呢？如果需要多樣化的cell，比如物品欄，技能欄這些功能，只需要在cell上擴(kuò)展，創(chuàng)建一些精靈或者按鈕，作為cell的子節(jié)點(diǎn)加到cell上即可。例如：cell = cc.TableViewCell:new()local image1 = CHOOSE_SERVER_AREA_NORMALlocal 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_SELECTEDlocal 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)好了，基本的使用方法就如此了，但是。。但是，還有最重要的一點(diǎn)，需要大家注意的。numberOfCellsInTableView返回的個(gè)數(shù)和TableView創(chuàng)建的cell數(shù)量通常是不一樣的，這是因?yàn)閏ocos2dx設(shè)計(jì)上為了節(jié)省資源，創(chuàng)建的cell數(shù)量 = tabview的高度 / 單個(gè)cell的高度 + 1。所以在觸摸和選中等邏輯處理的時(shí)候，一定不能使用cell來標(biāo)識(shí)。因?yàn)橥粋€(gè)cell物理對(duì)象，可能會(huì)映射N個(gè)邏輯對(duì)象。 通常我的做法是在tableCellAtIndex中把當(dāng)前cell對(duì)應(yīng)的邏輯對(duì)象存起來，這樣在tableCellTouched就可以直接找到物理cell對(duì)應(yīng)的邏輯對(duì)象來處理了。