Cocos2dx-lua中ListView、ScrollView、TableView、PageView的使用详解 | 南锋

南锋

南奔万里空，脱死锋镝余

Cocos2dx-lua中ListView、ScrollView、TableView、PageView的使用详解

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 5.3k 阅读时长 ≈ 5 分钟

在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中用到的四种容器

+