cocos2d-x lua 中 ListView scrollView tableView pageView 使用例子

1. ListView 使用

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

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:setBounceable(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

3. tableView 使用

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

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