cocos2d-x lua 自定义TableView

效果

    实现一个自定义的TableLayer，该Layer具有以下特性

   1. 该TableLayer可以在create的时候可以设置表格的行数和列数

   2. 该TableLayer具有一个addCell方法可以添加CCNode对象到表格

   3. 该TableLayer可以自动对表格中的CCNode对象进行排列

   假设行数为3，列数为3时，通过TableLayer的addCell方法添加12个宽和高相同的CCNode对象，它们的添加顺序和位置如下图所示：

   

    可以看出表格可以不断向右扩展，而且单元格自动排序，如果把该TableLayer添加到CCScrollView的container中，就可以实现一个可滑动的自定义TableView了。

实现思路

  1. TableLayer继承CCLayer

  2. TableLayer通过构造函数传入表格列数、行数、单元格宽、高

  3. TableLayer提供了一个addCell方法添加单元格（CCNode对象）

  4. addCell方法先调用nextCell方法获取单元格的坐标（由单元格的列数和行数组成），然后调用positionByColumnAndRow方法根据单元格坐标获取该单元格的位置，最后      调用CCNode的setPosition方法设置位置并添加到TableLayer中。

   如何知道单元格的位置？

   1.首先需要知道单元格的所在的列和行，通过nextCell方法获取，具体逻辑下面的代码有说明。 

    2.然后根据单元格的宽、高，表格的高度计算单元格的的x，y坐标。

    第一列为1，第一行为1

    x = 单元格宽度 * （单元格所在列 - 1）+ 单元格宽度 / 2

    y = 表格高度 - （单元格高度 * （单元格所在行 - 1）+  单元格高度 / 2）（注意：cocos2d-x坐标是以左下角为原点，而这里单元格坐标是以左上角为原点）

实现代码

Lua代码：

module("ui_table_layer_t", package.seeall)
-- 继承CCLayer
baseClass(layer_base_t, ui_table_layer_t)

-- 构造函数
function init(self, column, row, cellWidth, cellHeight)
	-- 初始化CCLayer
	layer_base_t.init(self)

	-- 列
	self.column = column
	-- 行
	self.row = row

	self.cellWidth = cellWidth
	self.cellHeight = cellHeight

	-- 下一行
	self.nextColumn = 1
	self.curColumn = 1
	-- 下一列
	self.nextRow = 1

	-- 表格宽高
	self.width = column * cellWidth
	self.height = row * cellHeight

	self.menu = CCMenu:create()
	self.menu:setPosition(CCPointZero)
	self.node_:addChild(self.menu)
end

function getTableView(self)
    if self.scrollView == nil then
        self.scrollView = CCScrollView:create(CCSizeMake(self.column * self.cellWidth, self.row * self.cellHeight), self.node_)
        --设置滚动方向为水平滚动
        self.scrollView:setDirection(kCCScrollViewDirectionHorizontal)
    end
    return self.scrollView
end

function addCell(self, cell)
	cell:setAnchorPoint(ccp(0.5,0.5))
	cell:setPosition(self:nextPosition())
	self.node_:addChild(cell)
	
    self.node_:setContentSize(CCSize(self.curColumn * self.cellWidth, self.height))
end

function addMenuItem(self, item)
	item:setAnchorPoint(ccp(0.5,0.5))
	item:setPosition(self:nextPosition())
	self.menu:addChild(item)
	
    self.node_:setContentSize(CCSize(self.curColumn * self.cellWidth, self.height))
end


-- 单元格坐标计算逻辑
function nextCell(self)
	local column = self.nextColumn
	local row = self.nextRow

	-- 计算下一个单元格的坐标
    if column < self.column then
        self.nextColumn = self.nextColumn + 1
    elseif column == self.column then
        -- 到达指定行，换列
        if row == self.row then
            self.nextColumn = column + 1
            self.nextRow = 1
        else
            -- 未到达指定行，换行
            self.nextColumn = 1
            self.nextRow = row + 1
        end        
    else
        -- 到达指定行，+列
        if row == self.row then
            self.nextColumn = column + 1
            self.nextRow = 1
        else
            self.nextRow = row + 1
        end
    end

    cclog("nextCell column=%d row=%d",column,row)

	self.curColumn = column
	return column,row
end


-- 根据单元格坐标计算出单元格的位置
function positionByColumnAndRow(self, column, row)
	local x = self.cellWidth*(column-1) + self.cellWidth/2
	local y = self.height - self.cellHeight*(row-1) - self.cellHeight/2 -- 需要转换为UI坐标
	-- cclog("positionByColumnAndRow column=%d row=%d x=%f y=%f", column, row, x, y)
	return x,y
end

-- 获取下一个单元格位置
function nextPosition(self)
	return self:positionByColumnAndRow(self:nextCell())
end

-- 获取可偏移范围
function getOffsetRange(self)
	return self.curColumn*self.cellWidth - self.width
end