南锋

南奔万里空,脱死锋镝余

Cocos2dx-lua各种容器的使用

在Cocos2dx-lua开发中,经常用到容器。下面就介绍在开发中会用到的4种容器:ListView,scrollView,tableView,pageView

1. ListView (列表容器)使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
local MainScene = class("MainScene", cc.load("mvc").ViewBase)

function MainScene:onCreate()
-- 测试ListView
--[[
注: 1.子节点如果是RichText,或是文本信息。
设置setVerticalSpace(),高度间隔。adjustToRealHeight(),自适应高度。
2.设置子节点的锚点信息,否则 高度不对称
]]--

self.listView = ccui.ListView:create();
self.listView:setPosition(cc.p(10, 10));
self.listView:setContentSize(cc.size(1116, 550));
self.listView:setDirection(cc.SCROLLVIEW_DIRECTION_VERTICAL);
self.listView:setBounceEnabled(true);
self.listView:setItemsMargin(20)

for i = 1, 4 do
local layout = ccui.Layout:create();
layout:setContentSize(cc.size(1116, 209));
layout:setBackGroundColorType(ccui.LayoutBackGroundColorType.solid);
layout:setBackGroundColor(cc.c3b(255, 255, 255));

self.listView:pushBackCustomItem(layout);
end
self:addChild(self.listView);

end

return MainScene

2. scrollView (滚动容器)使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
local MainScene = class("MainScene", cc.load("mvc").ViewBase)

function MainScene:onCreate()

-- 测试 scrollView

local scrollView = cc.ScrollView:create()
local layerColor = cc.LayerColor:create(cc.c4b(100, 100,100, 100), 700, 600)
scrollView:setViewSize(cc.size(700, 300))
scrollView:setContainer(layerColor)
layerColor:setPosition(cc.p(0, 0))
scrollView:setPosition(cc.p(50, 50))
self:addChild(scrollView)
scrollView:setDirection(cc.SCROLLVIEW_DIRECTION_VERTICAL)--垂直滚动
scrollView:setBounceEnabled(true)
scrollView:setDelegate()
scrollView:registerScriptHandler(handler(self, self.scrollViewDidZoom) ,cc.SCROLLVIEW_SCRIPT_ZOOM)
scrollView:registerScriptHandler(handler(self, self.scrollViewDidScroll) ,cc.SCROLLVIEW_SCRIPT_SCROLL)

for i = 1, 6 do
local strFmt = string.format("num %d", i)
local label = cc.Label:createWithSystemFont(strFmt, "Arial", 32)
label:setColor(cc.c3b(255, 0, 0))
label:setPosition(cc.p(350, 600-i*100+50))
layerColor:addChild(label)
end

end

function MainScene:scrollViewDidZoom()
print("ScrollViewDidZoom")
end

function MainScene:scrollViewDidScroll()
print("ScrollViewDidScroll")
end


return MainScene

tableView 使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

local MainScene = class("MainScene", cc.load("mvc").ViewBase)

function MainScene:onCreate()

-- 测试tableView2
self.tableView2 = cc.TableView:create(cc.size(200, 200))
self.tableView2:setDirection(cc.SCROLLVIEW_DIRECTION_HORIZONTAL)
self.tableView2:setPosition(cc.p(200, 200))
self.tableView2:setDelegate()
self:addChild(self.tableView2)
self.tableView2:registerScriptHandler(handler(self, self.scrollViewDidScroll) , cc.SCROLLVIEW_SCRIPT_SCROLL)
self.tableView2:registerScriptHandler(handler(self, self.scrollViewDidZoom) , cc.SCROLLVIEW_SCRIPT_ZOOM)
self.tableView2:registerScriptHandler(handler(self, self.tableCellTouched) , cc.TABLECELL_TOUCHED)
self.tableView2:registerScriptHandler(handler(self, self.cellSizeForTable) , cc.TABLECELL_SIZE_FOR_INDEX)
self.tableView2:registerScriptHandler(handler(self, self.tableCellAtIndex) , cc.TABLECELL_SIZE_AT_INDEX)
self.tableView2:registerScriptHandler(handler(self, self.numberOfCellsInTableView) , cc.NUMBER_OF_CELLS_IN_TABLEVIEW)
self.tableView2:reloadData()
end

function MainScene:scrollViewDidScroll(view)
print("ScrollViewDidScroll")
end

function MainScene:scrollViewDidZoom(view)
print("ScrollViewDidZoom")
end

function MainScene:tableCellTouched(table, cell)
if nil == cell then
return
else
print("cell touched at index: "..cell:getIdx())
end
end

function MainScene:cellSizeForTable(table, idx)
return 60, 60
end

function MainScene:tableCellAtIndex(table, idx)
local strValue = string.format("%d", idx)
local cell = table:dequeueCell()
local label = nil
if nil == cell then
cell = cc.TableViewCell:create()
label = cc.Label:createWithSystemFont(strValue, "Arial", 32)
label:setPosition(cc.p(0, 0))
label:setAnchorPoint(cc.p(0, 0))
cell:addChild(label)
label:setTag(123)
else
label = cell:getChildByTag(123)
if label ~= nil then
label:setString(strValue)
end
end
return cell
end

function MainScene:numberOfCellsInTableView(table)
return 20
end


return MainScene

4. pageView(翻页容器) 使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
local MainScene = class("MainScene", cc.load("mvc").ViewBase)

function MainScene:onCreate()

-- 测试 pageView
local pageView = ccui.PageView:create()
--设置pageView长宽
pageView:setContentSize(600,600)
--设置是否响应触摸事件
pageView:setTouchEnabled(true)
--设置锚点
pageView:setAnchorPoint(cc.p(0.5,0.5))
--设置位置在中心位置
pageView:setPosition(display.center)

for i=1,5 do
---然后layout,每个layout保存一个page
local layout = ccui.Layout:create()
--为了演示这里做个小图片
layout:setContentSize(600,600)
layout:setPosition(0,0)
--创建一个button
local btn= ccui.Button:create("bt_qd.png","bt_qd_h.png","bt_qd.png"):setPosition(300,300)
layout:addChild(btn)
pageView:addChild(layout)---一个layout 为一个page内容 page:addPage(layout)
end
--添加pageView 到场景中
self:addChild(pageView)

--添加事件响应
pageView:addEventListener(handler(self, self.onEvent))

end

--事件响应方法
function MainScene:onEvent(sender,event)
if event == ccui.PageViewEventType.turning then
local pageNum = sender:getCurrentPageIndex()
print("is turning,this PageNum:"..pageNum)
end
end

return MainScene

以上就是Cocos2dx中用到的四种容器

+