倚天杖
在手机游戏的开发中，滚动是一项非常重要的操作，而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, 200endfunction 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() thenfor cl, sitem in pairs(self._skillItems) dolocal issel = (cl == cell)sitem:select(issel)if issel thenself:onClickSkill(sitem:getSkill())endendendend最后，看看最重要的函数，就是映射cell的接口，idx表示cell的索引。function SkillBoard.tableCellAtIndex(view, idx)local self = GUI.GetGUI("SkillBoard")local cell = view:dequeueCell()if not cell thencell = cc.TableViewCell:new()endreturn cellend是不是特别简单呢？如果需要多样化的cell，比如物品栏，技能栏这些功能，只需要在cell上扩展，创建一些精灵或者按钮，作为cell的子节点加到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)好了，基本的使用方法就如此了，但是。。但是，还有最重要的一点，需要大家注意的。numberOfCellsInTableView返回的个数和TableView创建的cell数量通常是不一样的，这是因为cocos2dx设计上为了节省资源，创建的cell数量 = tabview的高度 / 单个cell的高度 +1。所以在触摸和选中等逻辑处理的时候，一定不能使用cell来标识。因为同一个cell物理对象，可能会映射N个逻辑对象。通常我的做法是在tableCellAtIndex中把当前cell对应的逻辑对象存起来，这样在tableCellTouched就可以直接找到物理cell对应的逻辑对象来处理了。
www说
在手机游戏的开发中，滚动是一项非常重要的操作，而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, 200endfunction 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 endend最后，看看最重要的函数，就是映射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是不是特别简单呢？如果需要多样化的cell，比如物品栏，技能栏这些功能，只需要在cell上扩展，创建一些精灵或者按钮，作为cell的子节点加到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)好了，基本的使用方法就如此了，但是。。但是，还有最重要的一点，需要大家注意的。numberOfCellsInTableView返回的个数和TableView创建的cell数量通常是不一样的，这是因为cocos2dx设计上为了节省资源，创建的cell数量 = tabview的高度 / 单个cell的高度 + 1。所以在触摸和选中等逻辑处理的时候，一定不能使用cell来标识。因为同一个cell物理对象，可能会映射N个逻辑对象。 通常我的做法是在tableCellAtIndex中把当前cell对应的逻辑对象存起来，这样在tableCellTouched就可以直接找到物理cell对应的逻辑对象来处理了。