（原创）cocos2dx-luaTableView官方demo分析

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› LUA›LUA教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本来是想看看网上的教程文章，结果看了好几篇，复制代码各种报错，有很多不存在的类和变量，根本用不了。

所以干脆自己去看官方demo，经过自己分析测试，已经大概会用了，顺便记录一下。

以下是代码，复制粘贴就能运行的那种！（图片资源自备）

新建 tableviewTest.lua，把下面的代码复制进去，保存为utf8格式。在需要的地方（比如main()函数里）调用 require("tableviewTest")

local TableViewTestLayer = class("TableViewTestLayer")
TableViewTestLayer.__index = TableViewTestLayer

--这里是为了让layer能调用TableViewTestLayer的方法
function TableViewTestLayer.extend(target)
    local t = tolua.getpeer(target)
    if not t then
        t = {}
        tolua.setpeer(target, t)
    end
    setmetatable(t, TableViewTestLayer)
    return target
end

--滚动事件
function TableViewTestLayer.scrollViewDidScroll(view)
    --print("滚动事件")
end

function TableViewTestLayer.scrollViewDidZoom(view)
    print("scrollViewDidZoom")
end

--cell点击事件
function TableViewTestLayer.tableCellTouched(table,cell)
    print("点击了cell：" .. cell:getIdx())
end

--cell的大小，注册事件就能直接影响界面，不需要主动调用
function TableViewTestLayer.cellSizeForTable(table,idx) 
    return 150,150
end

--显示出可视部分的界面，出了裁剪区域的cell就会被复用
function TableViewTestLayer.tableCellAtIndex(table, idx)
    local strValue = string.format("%d",idx)
    print("数据加载"..strValue)
    local cell = table:dequeueCell()
    local label = nil
    if nil == cell then
        print("创建了新的cell")
        cell = cc.TableViewCell:new()

        --添加cell内容
        local sprite = cc.Sprite:create("res/tablecell.png")
        sprite:setAnchorPoint(cc.p(0,0))
        sprite:setPosition(cc.p(0, 0))
        cell:addChild(sprite)

        label = cc.Label:createWithSystemFont(strValue, "Helvetica", 40)
        label:setPosition(cc.p(0,0))
        label:setAnchorPoint(cc.p(0,0))
        label:setColor(cc.c3b(255,0,0))
        label:setTag(123)
        cell:addChild(label)
    else
        print("使用已经创建过的cell")
        label = cell:getChildByTag(123)
        if nil ~= label then
            label:setString(strValue)
        end
    end

    return cell
end

--设置cell个数，注册就能生效，不用主动调用
function TableViewTestLayer.numberOfCellsInTableView(table)
   return 100
end

function TableViewTestLayer:init()

    local winSize = cc.Director:getInstance():getWinSize()

    --创建TableView
    local tableView = cc.TableView:create(cc.size(600,200))
    --设置滚动方向  水平滚动
    tableView:setDirection(cc.SCROLLVIEW_DIRECTION_HORIZONTAL)
    tableView:setPosition(cc.p(20, winSize.height / 2 - 150))
    tableView:setDelegate()
    self:addChild(tableView)
    --registerScriptHandler functions must be before the reloadData funtion
    --注册脚本编写器函数必须在reloadData函数之前（有道自动翻译）

    --cell个数
    tableView:registerScriptHandler(TableViewTestLayer.numberOfCellsInTableView,cc.NUMBER_OF_CELLS_IN_TABLEVIEW)  
    --滚动事件
    tableView:registerScriptHandler(TableViewTestLayer.scrollViewDidScroll,cc.SCROLLVIEW_SCRIPT_SCROLL)
    tableView:registerScriptHandler(TableViewTestLayer.scrollViewDidZoom,cc.SCROLLVIEW_SCRIPT_ZOOM)
    --cell点击事件
    tableView:registerScriptHandler(TableViewTestLayer.tableCellTouched,cc.TABLECELL_TOUCHED)
    --cell尺寸、大小
    tableView:registerScriptHandler(TableViewTestLayer.cellSizeForTable,cc.TABLECELL_SIZE_FOR_INDEX)
    --显示出可视部分的cell
    tableView:registerScriptHandler(TableViewTestLayer.tableCellAtIndex,cc.TABLECELL_SIZE_AT_INDEX)
    --调用这个才会显示界面
    tableView:reloadData()


    -----------------------------------------------------------
    --跟上面差不多，这里是创建一个“垂直滚动”的TableView
    tableView = cc.TableView:create(cc.size(200, 350))
    tableView:setDirection(cc.SCROLLVIEW_DIRECTION_VERTICAL)
    tableView:setPosition(cc.p(winSize.width - 150, winSize.height / 2 - 150))
    tableView:setDelegate()
    tableView:setVerticalFillOrder(cc.TABLEVIEW_FILL_TOPDOWN)
    self:addChild(tableView)
    tableView:registerScriptHandler(TableViewTestLayer.scrollViewDidScroll,cc.SCROLLVIEW_SCRIPT_SCROLL)
    tableView:registerScriptHandler(TableViewTestLayer.scrollViewDidZoom,cc.SCROLLVIEW_SCRIPT_ZOOM)
    tableView:registerScriptHandler(TableViewTestLayer.tableCellTouched,cc.TABLECELL_TOUCHED)
    tableView:registerScriptHandler(TableViewTestLayer.cellSizeForTable,cc.TABLECELL_SIZE_FOR_INDEX)
    tableView:registerScriptHandler(TableViewTestLayer.tableCellAtIndex,cc.TABLECELL_SIZE_AT_INDEX)
    tableView:registerScriptHandler(TableViewTestLayer.numberOfCellsInTableView,cc.NUMBER_OF_CELLS_IN_TABLEVIEW)
    tableView:reloadData()
    
    

    return true
end

--这里是为了让layer能调用TableViewTestLayer的方法
function TableViewTestLayer.create()
    local layer = TableViewTestLayer.extend(cc.Layer:create())
    if nil ~= layer then
        layer:init()
    end

    return layer
end

--运行测试场景
function runTableViewTest()
    local newScene = cc.Scene:create()
    local newLayer = TableViewTestLayer.create()
    newScene:addChild(newLayer)
    cc.Director:getInstance():replaceScene(newScene)
    --return newScene
end

runTableViewTest()

return TableViewTestLayer