Cocos Studio及ListView使用简介

Cocos Studio版本：v2.3.2

首先把需要用到的素材拷贝到项目文件夹res下，这里新建了一个imgs文件夹，将本次用到的素材拷贝到res/imgs/下，路径里不要包含中文。打开Cocos Studio后新建一个项目，在选择项目类型界面可以看到没有空项目可选，所以随便选择了一个示例，下一步后可以编辑项目名称，项目路径，点击完成之后可以看到生成的示例。因为不需要用到这些所以在左下角的资源窗口中，将所有的素材删除，可以选择移除也可以选择删除到回收站，然后选中ccs右键在菜单中选择“导入资源”，

在选择窗口中找到imgs文件夹后导入。导入资源之后，新建文件，可以新建Scene、Layer、Node、Plist、Scene3D、Skeleton，Scene不能编辑大小

大小和左上选择的分辨率一致，所以需要提前选择好分辨率，而Layer可以编辑大小

新建一个Layer，然后可以编辑这个界面，如果将一张图片直接拖到画布上，那么创建的是一个Sprite，也可以在控件窗口中拖一个ImageView，然后将图片拖到右侧ImageView的图片资源中，具体使用什么基础对象、控件、容器根据需求来选择。

在这个Layer中加入了一个ListView和Button，可以很清楚的看到它们之间的父子节点关系。选中ListView可以看到右侧的属性区域下可见性，交互性，位置、尺寸等选项，而且可给ListView添加背景图片，并对图片进行九宫格调整，这样比代码来设置方便了很多。

接下来编辑好Layer后要导出这个文件

因为之前已经将用到的所有资源放在了res/imgs/下，所以选择“仅发布项目文件”，再设置发布路径，需要完整的路径，发布到项目文件夹的res/下的一个位置，格式默认是二进制式的csb文件，如果安装了Lua插件，可以导出成Lua文件。设置完之后进行发布

点击确定之后，可以在之前设置的发布路径下看到导出的Layer.csb文件。

下面在代码中使用csb

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

function MainScene:ctor()
    self:enableNodeEvents()
    self.root = cc.CSLoader:createNode('res/Layer.csb')
end

function MainScene:onEnter()
    local _size = cc.Director:getInstance():getWinSize()
    local sp=cc.Sprite:create('res/HelloWorld.png')
    self:addChild(sp)
    sp:setPosition(_size.width/2,_size.height/2)
    self:createUI()
end

function MainScene:createUI()
    local _size = cc.Director:getInstance():getWinSize()

    local _widget = tolua.cast(self.root,'Widget')

    local function close(sender,event)
        if event == ccui.TouchEventType.ended then
            print('---close---')  
        end
    end
    local Button_1 = ccui.Helper:seekWidgetByName(_widget,'Button_1')
    Button_1:addTouchEventListener(close)

    local function btnClicked(sender,_type)
        print('--btn click--')
    end
    local btn = ccui.Button:create('res/DS07.png','res/DS08.png','res/DS09.png')
    self:addChild(btn)
    btn:setPosition(_size.width/3,_size.height/3)
    btn:addTouchEventListener(btnClicked)

    local function btnClicked2(sender,_type)
        print('--btn2 click--')
    end
    local btn2 = ccui.Button:create('res/DS10.png','res/DS11.png','res/DS12.png')
    self:addChild(btn2)
    btn2:setPosition(_size.width/3,_size.height/4.5)
    btn2:addTouchEventListener(btnClicked2)

    self:setListView()
    self:addChild(self.root)
end

function MainScene:setListView()
    local _widget = tolua.cast(self.root,'Widget')

    local list = ccui.Helper:seekWidgetByName(_widget,'ListView_1')
    local panel = ccui.Helper:seekWidgetByName(list,'Panel_1')
    panel:setVisible(false)
    local Image_1 = ccui.Helper:seekWidgetByName(panel,'Image_1')

    local sp = Image_1:getChildByName('ic_egyviper_blue_1')
    sp:setVisible(false)

    local function change(sender,_type)
        if _type == ccui.TouchEventType.ended then
            sender:loadTexture('res/imgs/Cn21.png',0)
        end
    end
    local Image_5 = ccui.Helper:seekWidgetByName(panel,'Image_5')
    Image_5:setTouchEnabled(true)
    Image_5:addTouchEventListener(change)

    for i=1,10 do
        local _panel = panel:clone()
        list:pushBackCustomItem(_panel)
    end

    local b = 1
    local d = 0
    local chs = list:getChildren()
    local function show()
        local item = chs[b]
        item:setVisible(true)
        b = b + 1
    end
    local function scrolling()
        d = d + 100*(1/11)
        list:scrollToPercentVertical(d,0.5,false)
    end
    local delay1 = cc.DelayTime:create(0.2)
    local delay2 = cc.DelayTime:create(0.5)
    local seq = cc.Sequence:create(delay1,cc.CallFunc:create(show),delay2,cc.CallFunc:create(scrolling))
    list:runAction(cc.Repeat:create(seq,11))

    local function test(sender,_type)
        if _type == 1 then
           local index = sender:getCurSelectedIndex()
           print("--index--",index)
        end
    end
    list:addEventListener(test)
end

return MainScene

这段代码实现的效果是