cocos2dx-lua 实现tableView来加载大量的Item，弃用listView啦

引言

经过几天的努力初步做了个类似好友系统，可以添加、删除好友！打包测试时，直接在后台导入了300+的好友，导致成员列表，直接卡到闪退！立刻想到就是这个listView惹的祸！原来这个控件一次性克隆了全部的item导致的，占用了太多内存，listView在这里显得很不适用！这时想到了TableView，于是尝试用代码创建了这个控件，感觉还是很给力的，立即解决了这个问题。为了方便后续使用，现在记录下来！不足之处，望请指正。

代码片段1

 

--创建TableView
function funA:createTableView(handleType,callBack)
    local membersTableView = cc.TableView:create(cc.size(self.listMembers:getContentSize().width,self.listMembers:getContentSize().height))
    membersTableView:registerScriptHandler(function (membersTableView)
        return self:numberOfCell(membersTableView)
    end,cc.NUMBER_OF_CELLS_IN_TABLEVIEW)

    membersTableView:registerScriptHandler(function (membersTableView,index)
        return self:sizeForIndex(membersTableView,index)
    end,cc.TABLECELL_SIZE_FOR_INDEX)

    membersTableView:registerScriptHandler(function (membersTableView,index)
        return self:cellAtIndex(membersTableView,index)
    end,cc.TABLECELL_SIZE_AT_INDEX)

    membersTableView:registerScriptHandler(function (membersTableView,cell)
        Log:debug("funA createTableView：TABLECELL_TOUCHED")
    end,cc.TABLECELL_TOUCHED)

    return membersTableView
end
--创建cell的数量
function funA:numberOfCell(tableView)
    local numberOfCell = 0
    local membersArr = ClubData._creatClubInfo.MemberInfoArr
    if not ClubData._creatClubInfo.MemberInfoArr then
        return 0
    end
    --向上取整数
    numberOfCell = math.ceil(#membersArr / 2)   --由于这里我们一排并列显示两个成员
    return numberOfCell
end
--索引项目大小
function funA:sizeForIndex(tableView,index)
    return self.listMembersItem:getContentSize().width,self.listMembersItem:getContentSize().height
end
--cell
function funA:cellAtIndex(tableView,index)
    local cell = tableView:cellAtIndex(index)

    if not cell then
        cell = cc.TableViewCell:new()
         --会员信息赋值 ClubData._clubMembersArr[index * 2] ,ClubData._clubMembersArr[index * 2 -1]
        local memberInfoArr = ClubData._clubMembersArr
        local listViewItem = self.listMembersItem:clone()
        listViewItem:setVisible(true)
        local item = nil
        local idx = (index+1) * 2
        if memberInfoArr[idx -1] then
            item = self:cloneOneItem(memberInfoArr[idx -1],cc.p(8,5))
            listViewItem:addChild(item)
        end
        if memberInfoArr[idx] then
            item = self:cloneOneItem(memberInfoArr[idx],cc.p(8 + item:getContentSize().width + 8,5))
            listViewItem:addChild(item)
        end
        listViewItem:setPosition(cc.p(0,0))

        cell:addChild(listViewItem)        
    end
    return cell
end
function funA:cloneOneItem(intemInfo,pos)
    local item = self.panelMemberItem:clone()
    item:setVisible(true)
    self:memberInfo(item,intemInfo)  --会员信息赋值
    item:setPosition(pos)
    item:setTag(intemInfo.UserID)
    item:setSwallowTouches(false)

    item:addClickEventListener(handler(self,funA.onClickEvent))  --这里我们可以添加要处理的事件

    return item
end
--会员信息 排序
function funA:membersSort(memberInfoArr)
    Log:debug("funA:membersSort")
    --信息页面
    self.membersTableView:reloadData()
end
function funA:memberInfo(item,memberInfo)

	--这里我们也可以添加要处理的事件，也可以用来给每一个Item赋值

    --会员昵称
    local txtPlayerName = ccui.Helper:seekWidgetByName_(item,"Text_playerName")
    txtPlayerName:setString(memberInfo.NickName)
    --会员ID
    local txtPlayerID = ccui.Helper:seekWidgetByName_(item,"Text_playerID")
    if txtPlayerID then
        txtPlayerID:setString("ID:"..memberInfo.UserID)
    end
end

到这里我们就可以创建tableView了

 

 

 

代码片段2

 

self.membersTableView = self:createTableView()
self.membersTableView:setPosition(self.listMembers:getPosition())
self.membersTableView:setVisible(true)
self.membersTableView:setDirection(cc.SCROLLVIEW_DIRECTION_VERTICAL)
self.membersTableView:setVerticalFillOrder(cc.TABLEVIEW_FILL_TOPDOWN)
self.membersTableView:setAnchorPoint(cc.p(0,0))
self.membersTableView:setLocalZOrder(1000)
self.panelMemberDown:addChild(self.membersTableView)

是不是创建出来一个tableView了？如果没有，那可能是以下几种可能：
1、没有调用tableView的reloadData()方法，只有使用了这个方法，才有数据的哦（很重要）
2、确保创建的tableView的层级没有被遮挡，并且是可见的

美中不足的是cocos创建的这个tableView也是有bug的，如果你的这个tableView有点击事件，不妨你上下滑动几下item，然后在隐藏的上下方点击，是不是仍然有点击事件呢？简单一招，添加Panel遮挡，勾上交互性轻松搞定！
listView裁切了就不会有这种问题的存在，也是可视化的，但是只能加载少量的item,多了就会很卡，我也不想修改这个listView直接就拿着tableView用起来，感觉还是可以的！如果能把二者结合起来就好了！

=================================== the end ====================================

好了，今天的分享就到这里，如有不足之处，还望大家及时指正，随时欢迎探讨交流！！！