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所创，推荐一下！我也在群里！

       本文属于原创文章，转载请著名作者出处并置顶！！！！

Cocos2dx-lua组件tableView的简单用法

目录

1、博客介绍

2、内容

.创建tableView

.设置tableView相关事件

.事件方法的设置

.数据刷新

.可点击的tableView

3、推送

4、结语

猜你喜欢