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", ["name"]="testName", ["picture"]="test.png"},
		{["id"]="1234567890", ["name"]="testName", ["picture"]="test.png"},
		{["id"]="1234567890", ["name"]="testName", ["picture"]="test.png"},
	}
    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 類似