Use TableView for lua of cocos2dx

Use TableView for lua of cocos2dx

In the development of mobile games, rolling is a very important operation, and the most widely used in cocos2dx is TableView. However, because cocos2dx interfaces are obscure, therefore, a familiar process is required. This document describes how to use TableView.

First of all, create a TableView, which is relatively simple and similar to other controls. Let's look at the sample code:

    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)

It should be noted that the setDirection parameter, cc. SCROLLVIEW_DIRECTION_VERTICAL indicates rolling in the vertical direction, and cc. SCROLLVIEW_DIRECTION_HORIZONTAL indicates rolling in the horizontal direction.

Set some callback functions for TableView. There are mainly four callback functions. Let's take a look at the sample code:

    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: the callback when TableView is touched. It is mainly used to select the Cell in TableView.

TABLECELL_SIZE_FOR_INDEX: This callback needs to return the Cell size in TableView.

TABLECELL_SIZE_AT_INDEX: This callback needs to create a Cell at a certain position for TableView.

NUMBER_OF_CELLS_IN_TABLEVIEW: This callback needs to return the number of cells in TableView.
Then, let's look at the simplest examples of the two callback functions:

function SkillBoard.cellSizeForTable(view, idx)return 200, 200endfunction SkillBoard.numberOfCellsInTableView(view)return table.size(local_skills)end

In the parameter, view indicates the TableView object, and idx indicates the index of the Cell.

Again, let's look at the touch function. The cell parameter indicates which cell is touched.

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

Finally, let's look at the most important function, that is, the interface mapped to the cell. idx indicates the index of the 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

Is it very simple? If you need a variety of cell functions, such as the item bar and skill bar, you only need to expand them on the cell, create some genie or buttons, and add them as child nodes of the cell to the cell. For example:

        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)

Okay, the basic usage is like this, .. However, you need to pay attention to the most important aspect.

The number returned by numberOfCellsInTableView is usually different from the number of cells created by TableView, because cocos2dx is designed to save resources, the number of cells created = the height of tabview/the height of a single cell + 1. Therefore, cell cannot be used for processing touch and select medium logic. Because the same cell physical object may map N logical objects.

My practice is to store the logical objects corresponding to the current cell in tableCellAtIndex, so that the logical objects corresponding to the physical cell can be directly found in tableCellTouched.