使用 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)