cocos2dx3.12 CCTableView优化和使用

前言：公司项目原先所有UI都用的是UIListView，优化过很多遍了，仍然有很多地方不尽人意。想改掉这一块，本想重写一个tableView，新项目开发很急，因此先拿cocos自带的CCTableView来使用，改掉其原生的一些使用bug即可正常商用了。

cocos2dx自带的scrollView有两种。
1，cocos2dx/extensions/GUI/CCScrollView（自带） 和cocos2dx/cocos/ui/UIScrollView。（ios ui控件）
2，GUI部分里面就带有一个CCTableView就是即将使用的这个，继承CCScrollView。
3，CCTableView实现了界面item个数+1的显示，所以使用起来效率还是可以的。

但是在使用过程中发现缺少了几个需求，因此对c++方面做了以下3点更改：
1，缺少refreshData函数

// 添加刷新函数，刷新相同个数item的view，不用每次都重载

// CCTableView.h文件，添加以下函数:
void refreshData();

// CCTableView.cpp文件， 添加以下函数:
void TableView::refreshData()
{
    if (_dataSource->numberOfCellsInTableView(this) == 0)
        return;

    for (const auto &cell: _cellsUsed)
    {
        _dataSource->tableCellAtIndex(this, cell->getIdx());
    }
}

2，缺少跳转到第几个item的函数，同样修改CCTableView.cpp和CCTableView.h

// CCTableView.h文件，添加以下函数:
// 从上往下数，跳到第几个
bool setItemTop(int nIndex, bool animated=false);
// 跳到第几个为中心
bool setItemMiddle(int nIndex, bool animated=false);


// CCTableView.cpp文件， 添加以下函数:
bool TableView::setItemTop(int nIndex,  bool animated)
{
    if (_dataSource == NULL)
    {
        return false;
    }

    if (nIndex <= 0)
    {
        nIndex = 1;
    }
    else if ( nIndex > _vCellsPositions.size())
    {
        nIndex = _vCellsPositions.size();
    }

    this->unschedule(CC_SCHEDULE_SELECTOR(TableView::deaccelerateScrolling));

    if (_direction == Direction::VERTICAL)
    {
        return this->setItemTopV(nIndex, animated);
    }
    else
    {
        return this->setItemTopH(nIndex, animated);
    }
}

bool TableView::setItemTopV(int nIndex,  bool animated)
{
    if (_viewSize.height >=  this->getContentSize().height)
    {
        this->setContentOffset(Vec2(this->getContentOffset().x, this->minContainerOffset().y),  animated);
        return true;
    }

    Vec2 offset = __offsetFromIndex(nIndex - 1);
    if (_viewSize.height >= this->getContentSize().height - offset.y)
    {
        this->setContentOffset(Vec2(this->getContentOffset().x, this->maxContainerOffset().y),  animated);
        return true;
    }

    float fOffsetX = this->getContentOffset().x;
    float fOffsetY      = -(this->getContentSize().height - offset.y) + _viewSize.height;

    this->setContentOffset(Vec2(fOffsetX, fOffsetY),  animated);

    return true;
}

bool TableView::setItemTopH(int nIndex,  bool animated)
{
    if (_viewSize.width >=  this->getContentSize().width)
    {
        this->setContentOffset(Vec2(this->maxContainerOffset().x, this->getContentOffset().y ),  animated);
        return true;
    }

    Vec2 offset = __offsetFromIndex(nIndex - 1);
    if (_viewSize.width >= this->getContentSize().width - offset.x)
    {
        this->setContentOffset(Vec2(this->minContainerOffset().x, this->getContentOffset().y),  animated);
        return true;
    }

    float fOffsetX = -offset.x;
    float fOffsetY = this->getContentOffset().y;

    this->setContentOffset(Vec2(fOffsetX, fOffsetY),  animated);
    return true;
}

bool TableView::setItemMiddle(int nIndex, bool animated)
{
    if (_dataSource == NULL)
    {
        return false;
    }

    if (nIndex <= 0)
    {
        nIndex = 1;
    }
    else if ( nIndex > _vCellsPositions.size())
    {
        nIndex = _vCellsPositions.size();
    }

    this->unschedule(CC_SCHEDULE_SELECTOR(TableView::deaccelerateScrolling));

    if (_direction == Direction::VERTICAL)
    {
        return this->setItemMiddleV(nIndex, animated);
    }
    else
    {
        return this->setItemMiddleH(nIndex, animated);
    }
}

bool TableView::setItemMiddleV(int nIndex, bool animated)
{
    Vec2 offset = __offsetFromIndex(nIndex - 1);
    Size sizeCell = _dataSource->tableCellSizeForIndex(this, nIndex - 1);

    const Size& sizeContent = this->getContentSize();
    const Size& sizeView = _viewSize;

    if (sizeView.height >= sizeContent.height || ((offset.y + sizeCell.height / 2) <= sizeView.height / 2) )
    {
        this->setContentOffset(Vec2(this->getContentOffset().x, this->minContainerOffset().y),  animated);
        return true;
    }

    if ((sizeContent.height - (offset.y + sizeCell.height/2)) <= sizeView.height/2)
    {
        this->setContentOffset(Vec2(this->getContentOffset().x, this->maxContainerOffset().y),  animated);
        return true;
    }

    float fOffsetX = this->getContentOffset().x;
    float fOffsetY = sizeView.height - sizeContent.height + offset.y - (sizeView.height - sizeCell.height) / 2;

    this->setContentOffset(Vec2(fOffsetX, fOffsetY),  animated);

    return true;
}

bool TableView::setItemMiddleH(int nIndex, bool animated)
{
    Vec2 offset = __offsetFromIndex(nIndex - 1);
    const Size sizeCell = _dataSource->tableCellSizeForIndex(this, nIndex - 1);

    const Size& sizeContent = this->getContentSize();
    const Size& sizeView = _viewSize;

    if (sizeView.width >= sizeContent.width || ((offset.x + sizeCell.width/2) <= sizeView.width/2) )
    {
        this->setContentOffset(Vec2(this->maxContainerOffset().x, this->getContentOffset().y),  animated);
        return true;
    }

    if ((sizeContent.width - (offset.x + sizeCell.width/2)) <= sizeView.width/2)
    {
        this->setContentOffset(Vec2(this->minContainerOffset().x, this->getContentOffset().y),  animated);
        return true;
    }

    float fOffsetX = -offset.x + (sizeView.width - sizeCell.width) / 2;
    float fOffsetY = this->getContentOffset().y;

    this->setContentOffset(Vec2(fOffsetX, fOffsetY),  animated);

    return true;
}

3，将修改的函数导出接口到lua使用

//修改lua_cocos2dx_extension_auto.cpp，添加以下函数
//add --
int lua_cocos2dx_extension_TableView_refreshData(lua_State* tolua_S)
{
    int argc = 0;
    cocos2d::extension::TableView* cobj = nullptr;
    bool ok  = true;

#if COCOS2D_DEBUG >= 1
    tolua_Error tolua_err;
#endif


#if COCOS2D_DEBUG >= 1
    if (!tolua_isusertype(tolua_S,1,"cc.TableView",0,&tolua_err)) goto tolua_lerror;
#endif

    cobj = (cocos2d::extension::TableView*)tolua_tousertype(tolua_S,1,0);

#if COCOS2D_DEBUG >= 1
    if (!cobj) 
    {
        tolua_error(tolua_S,"invalid 'cobj' in function 'lua_cocos2dx_extension_TableView_refreshData'", nullptr);
        return 0;
    }
#endif

    argc = lua_gettop(tolua_S)-1;
    if (argc == 0) 
    {
        if(!ok)
        {
            tolua_error(tolua_S,"invalid arguments in function 'lua_cocos2dx_extension_TableView_refreshData'", nullptr);
            return 0;
        }
        cobj->refreshData();
        lua_settop(tolua_S, 1);
        return 1;
    }
    luaL_error(tolua_S, "%s has wrong number of arguments: %d, was expecting %d \n", "cc.TableView:refreshData",argc, 0);
    return 0;

#if COCOS2D_DEBUG >= 1
    tolua_lerror:
    tolua_error(tolua_S,"#ferror in function 'lua_cocos2dx_extension_TableView_refreshData'.",&tolua_err);
#endif

    return 0;
}
int lua_cocos2dx_extension_TableView_setItemTop(lua_State* tolua_S)
{
    int argc = 0;
    cocos2d::extension::TableView* cobj = nullptr;
    bool ok  = true;
#if COCOS2D_DEBUG >= 1
    tolua_Error tolua_err;
#endif

#if COCOS2D_DEBUG >= 1
    if (!tolua_isusertype(tolua_S,1,"cc.TableView",0,&tolua_err)) goto tolua_lerror;
#endif
    cobj = (cocos2d::extension::TableView*)tolua_tousertype(tolua_S,1,0);
#if COCOS2D_DEBUG >= 1
    if (!cobj)
    {
        tolua_error(tolua_S,"invalid 'cobj' in function 'lua_cocos2dx_extension_TableView_setItemTop'", nullptr);
        return 0;
    }
#endif
    argc = lua_gettop(tolua_S)-1;
    do{
        if (argc == 2) {
            int arg0;
            ok &= luaval_to_int32(tolua_S, 2,(int *)&arg0, "cc.TableView:setItemTop");

            if (!ok) { break; }
            bool arg1;
            ok &= luaval_to_boolean(tolua_S, 3,&arg1, "cc.TableView:setItemTop");

            if (!ok) { break; }
            bool ret = cobj->setItemTop(arg0, arg1);
            tolua_pushboolean(tolua_S,(bool)ret);
            return 1;
        }
    }while(0);
    ok  = true;
    do{
        if (argc == 1) {
            int arg0;
            ok &= luaval_to_int32(tolua_S, 2,(int *)&arg0, "cc.TableView:setItemTop");

            if (!ok) { break; }
            bool ret = cobj->setItemTop(arg0);
            tolua_pushboolean(tolua_S,(bool)ret);
            return 1;
        }
    }while(0);
    ok  = true;
    luaL_error(tolua_S, "%s has wrong number of arguments: %d, was expecting %d \n",  "cc.TableView:setItemTop",argc, 1);
    return 0;

#if COCOS2D_DEBUG >= 1
    tolua_lerror:
    tolua_error(tolua_S,"#ferror in function 'lua_cocos2dx_extension_TableView_setItemTop'.",&tolua_err);
#endif

    return 0;
}
int lua_cocos2dx_extension_TableView_setItemMiddle(lua_State* tolua_S)
{
    int argc = 0;
    cocos2d::extension::TableView* cobj = nullptr;
    bool ok  = true;
#if COCOS2D_DEBUG >= 1
    tolua_Error tolua_err;
#endif

#if COCOS2D_DEBUG >= 1
    if (!tolua_isusertype(tolua_S,1,"cc.TableView",0,&tolua_err)) goto tolua_lerror;
#endif
    cobj = (cocos2d::extension::TableView*)tolua_tousertype(tolua_S,1,0);
#if COCOS2D_DEBUG >= 1
    if (!cobj)
    {
        tolua_error(tolua_S,"invalid 'cobj' in function 'lua_cocos2dx_extension_TableView_setItemMiddle'", nullptr);
        return 0;
    }
#endif
    argc = lua_gettop(tolua_S)-1;
    do{
        if (argc == 2) {
            int arg0;
            ok &= luaval_to_int32(tolua_S, 2,(int *)&arg0, "cc.TableView:setItemMiddle");

            if (!ok) { break; }
            bool arg1;
            ok &= luaval_to_boolean(tolua_S, 3,&arg1, "cc.TableView:setItemMiddle");

            if (!ok) { break; }
            bool ret = cobj->setItemMiddle(arg0, arg1);
            tolua_pushboolean(tolua_S,(bool)ret);
            return 1;
        }
    }while(0);
    ok  = true;
    do{
        if (argc == 1) {
            int arg0;
            ok &= luaval_to_int32(tolua_S, 2,(int *)&arg0, "cc.TableView:setItemMiddle");

            if (!ok) { break; }
            bool ret = cobj->setItemMiddle(arg0);
            tolua_pushboolean(tolua_S,(bool)ret);
            return 1;
        }
    }while(0);
    ok  = true;
    luaL_error(tolua_S, "%s has wrong number of arguments: %d, was expecting %d \n",  "cc.TableView:setItemMiddle",argc, 1);
    return 0;

#if COCOS2D_DEBUG >= 1
    tolua_lerror:
    tolua_error(tolua_S,"#ferror in function 'lua_cocos2dx_extension_TableView_setItemMiddle'.",&tolua_err);
#endif

    return 0;
}
//

//然后修改lua_register_cocos2dx_extension_TableView函数将刚才的方法导出到lua
int lua_register_cocos2dx_extension_TableView(lua_State* tolua_S)
{
    tolua_usertype(tolua_S,"cc.TableView");
    tolua_cclass(tolua_S,"TableView","cc.TableView","cc.ScrollView",nullptr);

    tolua_beginmodule(tolua_S,"TableView");
        tolua_function(tolua_S,"new",lua_cocos2dx_extension_TableView_constructor);
        tolua_function(tolua_S,"updateCellAtIndex",lua_cocos2dx_extension_TableView_updateCellAtIndex);
        tolua_function(tolua_S,"setVerticalFillOrder",lua_cocos2dx_extension_TableView_setVerticalFillOrder);
        tolua_function(tolua_S,"scrollViewDidZoom",lua_cocos2dx_extension_TableView_scrollViewDidZoom);
        tolua_function(tolua_S,"_updateContentSize",lua_cocos2dx_extension_TableView__updateContentSize);
        tolua_function(tolua_S,"getVerticalFillOrder",lua_cocos2dx_extension_TableView_getVerticalFillOrder);
        tolua_function(tolua_S,"removeCellAtIndex",lua_cocos2dx_extension_TableView_removeCellAtIndex);
        tolua_function(tolua_S,"initWithViewSize",lua_cocos2dx_extension_TableView_initWithViewSize);
        tolua_function(tolua_S,"scrollViewDidScroll",lua_cocos2dx_extension_TableView_scrollViewDidScroll);
        tolua_function(tolua_S,"reloadData",lua_cocos2dx_extension_TableView_reloadData);

        //add-- 此处是我添加的3个函数
        tolua_function(tolua_S,"refreshData",lua_cocos2dx_extension_TableView_refreshData);
        tolua_function(tolua_S,"setItemTop",lua_cocos2dx_extension_TableView_setItemTop);
        tolua_function(tolua_S,"setItemMiddle",lua_cocos2dx_extension_TableView_setItemMiddle);
        //end

        tolua_function(tolua_S,"insertCellAtIndex",lua_cocos2dx_extension_TableView_insertCellAtIndex);
        tolua_function(tolua_S,"cellAtIndex",lua_cocos2dx_extension_TableView_cellAtIndex);
        tolua_function(tolua_S,"dequeueCell",lua_cocos2dx_extension_TableView_dequeueCell);
    tolua_endmodule(tolua_S);
    std::string typeName = typeid(cocos2d::extension::TableView).name();
    g_luaType[typeName] = "cc.TableView";
    g_typeCast["TableView"] = "cc.TableView";
    return 1;
}

在lua使用过程发现了CCTableView有两个问题，因此在lua使用时候做了以下修改
1，tableView滑动出可视区域，仍然可以点击被隐藏的cell上面的button。即穿透问题。
解决思路就是：在按钮上创建一个layer监听点击事件，判断点击区域的坐标是否属于tableView即可。

2, tableView点击cell上的button进行滑动，cell不可滑动。即button为wiget的时候touch被吞噬。
解决思路就是：监听点击事件同时，在开始点击储存begionPos，在点击结束判断位移的offset是否满足可以点击,满足就点击，不满足就滑动tableView

3，解决方法的lua代码如下：

--因为我们项目所有的按钮都是用UIbutton来创建的。所以只需要改UIButton即可
local ButtonEx = class("ButtonEx")
ButtonEx.__index = ButtonEx
function ButtonEx.extend(target)
    local t = tolua.getpeer(target)
    if not t then
        t = {}
        tolua.setpeer(target, t)
    end
    setmetatable(t, ButtonEx)
    return target
end
function ButtonEx:setTableView(tableView)
    self.tableView = tableView
    if not self.tableView or self.touchLayer then
        return
    end
    self:initTouchLayer()
end
function ButtonEx:initTouchLayer()
    self:setSwallowTouches(false)
    self.touchLayer = cc.Layer:create()
    self.touchLayer:setContentSize(self:getContentSize())
    self:addChild(self.touchLayer)
    self.touchLayer:unregisterScriptTouchHandler()
    local onTouch = function (eventType, x, y, id)
        if eventType == "began"  then
            self.touchBeginPos = self:getWorldPos(self)

            if self.isNotInView then
                return true
            end

            if self.tableView then
                local viewPos = self:getWorldPos(self.tableView)
                local size = self.tableView:getViewSize()
                local viewSize = cc.rect(viewPos.x, viewPos.y, size.width, size.height)
                if not cc.rectContainsPoint(viewSize, cc.p(x, y)) then
                    self.isNotInView = true
                end
            end
            return true
        end
    end
    self.touchLayer:registerScriptTouchHandler(onTouch, false, 0, false)
    self.touchLayer:setTouchEnabled(true)
end
function ButtonEx:isCanNotClick()
    if not self.tableView then
        return false
    end

    -- 防止界面移出clipNode仍然可点击
    if self.isNotInView then
        self.isNotInView = false
        return true
    end

    -- 防止移动后仍触发点击事件
    local curPos = self:getWorldPos(self)
    local offset = 15
    local moveX = math.abs(curPos.x - self.touchBeginPos.x) > offset
    local moveY = math.abs(curPos.y - self.touchBeginPos.y) > offset
    if moveX or moveY then
        return true
    end
end
function ButtonEx:getWorldPos(node)
    local parent = node:getParent()
    return parent:convertToWorldSpace(cc.p(node:getPosition()))
end
function ButtonEx:setTouchEvent(touchEvent)
    local function _btnTouchEvent(sender, eventType)
        if eventType == ccui.TouchEventType.ended then     
            --tableView
            if self:isCanNotClick() then
                return
            end
        end
        if touchEvent then
            touchEvent(sender, eventType);
        end 
    end 
    self:addTouchEventListener(_btnTouchEvent)
end



--然后在使用的时候，只需要在cell上创建此按钮，
--然后在将此按钮上的tableView传入即可防止以上两个问题
function createButtonNormal(key, selKey, touchEvent, loadType )
    local btn = ButtonEx.extend(ccui.Button:create())
    btn:setTouchEnabled(true)
    btn:setTouchEvent(touchEvent)
    return btn
end
--使用方法
function use()
    //创建cell上的按钮
    local btn = createButtonNormal()
    //传入正在使用的tableView
    btn:setTableView(useTableView)
end

好了，做了如上修改，tableView就可以正常使用了，使用方法如下：

在panel里面可以调用如下方法，创建tableView

--@ tableView:refreshData()             刷新仅能刷新相同个数cell的view
--@ tableView:reloadData()              从组数据和view
--@ tableView:setDirection(Dir)         设置view显示横竖方向
--@ tableView:setVerticalFillOrder(Ver) 设置view数据正序或倒序
--@ tableView:initWithViewSize(size)    设置view可视区域大小
--@ tableView:setItemTop(num)           跳转到从顶部数下来第几个cell
--@ tableView:setItemMiddle(num)        同setItemTop,但以num为view中心位置
function view:createTableView(handleType, callBack)
    local tableView = cc.TableView:create(cc.size(708,500))  
    tableView:registerScriptHandler(function (tabView) 
        return self:numberOfCell()(tabView) 
    end, cc.NUMBER_OF_CELLS_IN_TABLEVIEW)  

    tableView:registerScriptHandler(function (tabView, idx) 
        return self:sizeForIndex(tabView, idx) 
    end, cc.TABLECELL_SIZE_FOR_INDEX)  

    tableView:registerScriptHandler(function (tabView, idx) 
        return self:cellAtIndex(tabView, idx) 
    end, cc.TABLECELL_SIZE_AT_INDEX)

    return tableView
end

function view:numberOfCell(tableView)
    return 100
end
function view:sizeForIndex(tableView, idx)
    return 705,150
end
function view:cellAtIndex(tableView, idx)  
    local cell = tableView:dequeueCell()     
    if not cell then
        cell = cc.TableViewCell:create()
        cell:refresh()
    end
    return cell
end

还有一处修改就是自带的滑动惯性有点慢，修改了CCScrollView.cpp里面的#define BOUNCE_BACK_FACTOR 0.05f ，减少这个值可以了

总结：使用tableView可以提高使用效率，有效减卡顿。稍作修改即可，挺方便的- -.
同一帧内不要做太多操作，分帧操作会很大程度提高流畅性