使用 Cocostudio 创建 listview item

为了快速开发一个小游戏，使用了 Cocostudio 2.0 作为 UI 编辑器。其实 Cocostudio 的功能比较弱，特别是针对稍微复杂一点的控件（Widget），无法做到所见即所得，不得不写一些代码。

游戏中用到了一个 listview，但是 Cocostudio2.0中没有 listview，所以只能写代码实现，这个是没有办法的。好在一个 listview 本身还是比较简单的，但是 listview 中的 item 可以很复杂，是否有办法简化呢？

尝试了很久之后，还真找到了一个迂回的方法，即：

• 在 Cocostudio 中创建一个新的 Layer
• 在 Layer 上编辑所需要的 item

这本来是一件比较简单的事情，但是问题在于 listview 的 item 只能是 widget，而 Cocostudio 2.0中 widget 有限，所以，尽量用 button 拼凑吧！

放出 listview 和 listitem 的 lua 代码：

local LISTVIEW_WIDTH = 340
local LISTVIEW_HEIGHT = 405
local listView = ccui.ListView:create()
-- set list view ex direction
listView:setDirection(ccui.ScrollViewDir.vertical)
listView:setBounceEnabled(true)
-- listView:setBackGroundImage("hall/di.png")
-- listView:setBackGroundImageScale9Enabled(true)
listView:setContentSize(cc.size(LISTVIEW_WIDTH, LISTVIEW_HEIGHT))
listView:setAnchorPoint(cc.p(0, 0))
listView:setPosition(cc.p(10, 12))
listView:addEventListener(listViewEvent)
-- SCISSOR
listView:setClippingType(1)
parent:addChild(listView)

local function createDefaultListItem()
local leaderboardItemLayer =                 cc.CSLoader:createNode("hall/LeaderboardItem.csb")
-- retrieve the widget. MUST be a widget
local listItemRoot = leaderboardItemLayer:getChildByTag(2001)
listItemRoot:removeFromParent()

local listItemRootSize = listItemRoot:getContentSize()
listItemRoot:setPosition(cc.p(LISTVIEW_WIDTH / 2.0, listItemRootSize.height / 2.0))

local default_item = ccui.Layout:create()
default_item:setTouchEnabled(true)
default_item:setContentSize(listItemRootSize)
default_item:addChild(listItemRoot)

return default_item
end

local default_item = createDefaultListItem()
listView:setItemModel(default_item)

for i = 1, 100 do
listView:pushBackDefaultItem()
end

-- set all items layout gravity
listView:setGravity(ccui.ListViewGravity.centerVertical)

--set items margin
listView:setItemsMargin(2.0)