（原創）cocos2dx-lua TableView官方demo分析

本來是想看看網上的教程文章，結果看了好幾篇，復制代碼各種報錯，有很多不存在的類和變量，根本用不了。

所以干脆自己去看官方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