Cocos2dx-lua組件tableView的簡單用法

目錄

目錄

1、博客介紹

2、內容

.創建tableView

.設置tableView相關事件

.事件方法的設置

.數據刷新 

.可點擊的tableView

3、推送

4、結語

---

1、博客介紹

本篇作爲cocos2dx學習筆記之一，淺談一下tableView組件的一些用法，以做記錄之用

---

2、內容

 

.創建tableView

    -- 創建tablView   參數爲tableView的尺寸
    local m_tableView = cc.TableView:create(cc.size(480,320))
    -- 設置回彈
    m_tableView:setBounceable(false)
    -- 設置滑動方向   HORIZONTAL：橫向   VERTICAL：縱向
    m_tableView:setDirection(cc.SCROLLVIEW_DIRECTION_HORIZONTAL)
    -- 設置排列方式   TOP_DOWN：idx序號從小到大    BOTTOM_UP：idx序號從大到小
    m_tableView:setVerticalFillOrder(cc.TABLEVIEW_FILL_TOPDOWN)
    -- 設置事件
    m_tableView:setDelegate()
    -- 添加到面板
    menuLayer:addChild(m_tableView)

創建的方式和主要屬性都在註釋內有介紹

 

.設置tableView相關事件

    -- table觸摸回調 設置後每次點擊在tableView區域內都會調用一次tableCellTouched方法
    m_tableView:registerScriptHandler(tableCellTouched, cc.TABLECELL_TOUCHED)   

    -- 在創建cell的時候會調用，從cellSizeForTable方法內獲取cell的尺寸                  
    m_tableView:registerScriptHandler(cellSizeForTable, cc.TABLECELL_SIZE_FOR_INDEX);       

    -- 創建cell的調用，在tableCellAtIndex方法內設置cell的生成      
    m_tableView:registerScriptHandler(tableCellAtIndex, cc.TABLECELL_SIZE_AT_INDEX);              

    -- numberOfCellsInTableView方法內返回tableView需要生成的cell數量
    m_tableView:registerScriptHandler(numberOfCellsInTableView, cc.NUMBER_OF_CELLS_IN_TABLEVIEW); --cell數量

tableView主要的相關事件就是以上四個

 

.事件方法的設置

-- 每次觸摸tableView調用
function tableCellTouched(view, cell)

end

-- 返回cell的尺寸 width,height
function cellSizeForTable(view, idx)
    return 120, 102
end

-- 返回一個cell
function tableCellAtIndex(view, idx)
    local cell = view:dequeueCell()
    if not cell then
        cell = cc.TableViewCell:new()
    else
        cell:removeAllChildren()
    end
    local img = cc.Sprite:create("test.png")
    img:setPosition(60,0)
    cell:addChild(img,100)
    return cell
end

-- tableView內Cell的總數
function numberOfCellsInTableView(view)
    return 10
end

 以上就是四個事件回調方法的最基本設置

 

.數據刷新 

    m_tableView:reloadData();

所有的做完後必須調用一下數據的刷新，tableView才能正確的顯示出來，以上是這個簡單小例的效果，一個滑動圖片的列表

 

.可點擊的tableView

接下來我們完善一下我們的例子，我們將cell改爲可點擊的button，並且加上點擊反饋和點擊事件

-- 返回一個cell
function tableCellAtIndex(view, idx)
    local cell = view:dequeueCell()
    if not cell then
        cell = cc.TableViewCell:new()
    else
        cell:removeAllChildren()
    end
    local path       = "test.png"
    local button     = ccui.Button:create(path,path,path)
    local function onTouchIcon(sender, eventType)
        if eventType == ccui.TouchEventType.began then
            sender:setScale(0.97)
        elseif eventType == ccui.TouchEventType.ended then
            sender:setScale(1)
            local d = cc.pGetDistance(sender:getTouchBeganPosition(), sender:getTouchEndPosition())
            if d < 30 then
                print("我被觸摸了")
            else
                print("我被滑動了")
            end
        elseif eventType == ccui.TouchEventType.canceled then
            sender:setScale(1)
        end
    end
    button:addTouchEventListener(onTouchIcon)
    button:setSwallowTouches(false)
    button:setPosition(60,0)
    cell:addChild(button,100)
    return cell
end

 

只需要修改一下tableCellAtIndex方法就可以了，在新修改的方法裏，我們將原本的精靈替換爲Button，並且給button註冊了監聽事件，在點擊的時候我們會有一個縮放來給用戶反饋，並且添加了一個距離判斷d，因爲我們滑動的同時也可能點擊到圖片，我們需要判斷一下用戶的操作到底是點擊按鈕還是滑動view。

---

3、推送

Github：https://github.com/KingSun5

---

4、結語

若是覺得博主的文章寫的不錯，不妨關注一下博主，點贊一下博文，另博主能力有限，若文中有出現什麼錯誤的地方，歡迎各位評論指摘。

       QQ交流羣：806091680（Chinar）

       該羣爲CSDN博主Chinar所創，推薦一下！我也在羣裏！

       本文屬於原創文章，轉載請著名作者出處並置頂！！！！