cocos2d-x lua 使用ListView

version: cocos2d-x 3.6

本文主要讲述：使用Cocos Studio创建ListView，和列表项的模板，代码中通过模板创建列表的每一项，并替换其中的图片文字等。

1. 加载Cocos Studio编辑好的资源

-- //cocos studio 中资源的名字
M.srcLayer = {
    ["listView"] = "list_view",["btnFriends"] = "button_friends",["btnAround"] = "button_around",}
M.srcListItem = {
    ["bg"] = "image_bg",["img"] = "image_head",["name"] = "lable_name",["meter"] = "lable_meter",}
 
function M:loadLayout()
    if self.m_resNode then
        self.m_resNode:removeSelf()
        self.m_resNode = nil
    end
    self.m_resNode = cc.CSLoader:createNode("ui/layer_test_listview.csb")  -- //load your layout csb
    assert(self.m_resNode,string.format("ViewBase:createResourceNode() - load resouce node from file \"%s\" Failed",resourceFilename))   
    self:addChild(self.m_resNode)
 
    local listView = self.m_resNode:getChildByName(M.srcLayer.listView)
end

2. 更新ListView的每一项

function M:refreshListView()
    local listView = self.m_resNode:getChildByName(M.srcLayer.listView)
    assert(listView,"")
    listView:removeAllChildren()
 
 
    local friendList = {
        {["id"]="1234567890",["name"]="testName",["picture"]="test.png"},{["id"]="1234567890",}
    for idx,oneFriend in pairs(friendList) do
 
        -- //加载模板项
        local oneItem = cc.CSLoader:createNode("ui/layer_test_listview_item.csb")
 
        local imgBg = oneItem:getChildByName(M.srcListItem.bg)
        local imgHead = oneItem:getChildByName(M.srcListItem.img)
        local lableName = oneItem:getChildByName(M.srcListItem.name)
        local lableMeter = oneItem:getChildByName(M.srcListItem.meter)
        -- //reset
        --imgHead:initWithFileName(oneFriend.picture) --//imgHead是精灵类Sprite
        lableName:setString(friendInfo.name)
        --lableMeter:setString(tostring(oneFriend.meter))
 
        --//create layout
        local listItemLayout = ccui.Layout:create()
        listItemLayout:setContentSize(imgBg:getContentSize())
        listItemLayout:addChild(oneItem)
        oneItem:setPosition(cc.p(listItemLayout:getContentSize().width / 2.0,listItemLayout:getContentSize().height / 2.0))
        listItemLayout:setTag(idx)
        listView:insertCustomItem(listItemLayout,0)
    end
end

3. 其他

• 如果想在代码里面创建listview和它的每一个列表项，可直接参照lua test里面的代码
• 注意编辑cocos studio资源的时候不要去拖动每一个空间的4个顶点去缩放它
• 使用page view 和 table view 类似