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 ====================================

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

 

你可能感兴趣的:(游戏开发,cocos2dx,Lua,cocos2dx-lua)