首页 > 代码库 > Lua中调用 cocos2d-x 的滑动条/滚动条 ScrollView

Lua中调用 cocos2d-x 的滑动条/滚动条 ScrollView



ScrollView

       我想玩儿过手机的朋友对滑动条都不陌生吧,(旁边: 这不是废话么????

            尴尬  那好吧,废话不多说直接开始ScrollView吧

local m_BaseNode  -- 主场景

local CreateScroll    -- 房间分级滑动视图
local CreateStageNode   -- 创建节点
local m_ScrollView              -- 滑动层变量
local m_Inner     -- 内容器
local addScrollHBtnNode   -- 添加滑动节点
local addScrollHTouchEventListener -- 滑动节点监听

local m_DataInfo = {                -- 数据表
    {png = "doudizhu", fun = function () OnDouDiZhu() end},
    {png = "yixiazai", fun = function () OnZhaJinHua() end},
    {png = "yixiazainiuniu", fun = function () OnNiuNiu() end}   
}


CreateScroll = function ( )
           print("创建滑动视图" )
           local stageStartX 150         --开始位置 
           local stageOffX = 300           -- 偏移
           local stageX = stageStartX      -- 当前stage位置
           -- 创建内容器
           m_Inner = cc.NodeRGBA:create()

           -- 创建全部 stage
           for i=1,#m_DataInfodo
               local stageNode = CreateStageNode(i, cc.size(width, height) ) 

                    -- 函数在下面这里是滑动条中单个选项图片的宽和高            

               local btn = addScrollHBtnNode(m_Inner,stageNode,    
                            m_DataInfo[i].fun,
                            stageX, 250
                            )      -- 函数再下面,将 stageNode 添加到内容器中
               stageX = stageX + stageOffX
            end
   
    -- 创建ScrollView
    m_ScrollView = cc.ScrollView:create(cc.size(900, 430), m_Inner)

    -- 设置内容器的大小
    m_ScrollView:setContentSize(cc.size(stageX - stageStartX, 380))

    -- 设置滑动的方向   0 是水平方向     1是垂直方向    2 是水平垂直都可以
    m_ScrollView:setDirection(0)
    m_ScrollView:setPosition(cc.p(65, 210))

    --将m_ScrollView添加到m_BaseNode中
    m_BaseNode:addChild(m_ScrollView)

    collectgarbage( "setpause", 100)
    collectgarbage( "setstepmul", 5000)
end

-- 创建节点函数
CreateStageNode = function (stageID, size)
     -- 创建节点
    local stageNode = CCLayer:create()
    stageNode:setContentSize(size.width, size.height)
    stageNode:setTag(stageID)
    addSprite(stageNode, m_DataInfo[stageID].png, 0, 0)
    -- 设置显示的字

       -- 在这里可以向每个节点中添加相应的信息

    -- 返回节点
    return stageNode
end

-- p : 层    name : 图片名字(plist文件中)  x y : 坐标  

functionaddSprite( p, name, x, y, a, z ,scale)

    local sf = CCSpriteFrameCache:getInstance():getSpriteFrame( name )
    local s  = CCSprite:createWithSpriteFrame( sf )
    if not s then s = CCSprite:createWithSpriteFrameName( "wrong" ) end
    if z then p:addChild( s, z ) else p:addChild( s ) end
    if x and y then s:setPosition(x, y) end

    if a then s:setAnchorPoint( a ) end
    s:setScale(scale or 1.0)
    return s

end


-- 添加滑动节点

-- p : 层   btnNode : 节点   cb : 点击后的回调函数
addScrollHBtnNode = function ( p, btnNode, cb, x, y, z, a, scale )
    local layer = CCLayer:create()
    layer:addChild(btnNode)
    btnNode:setAnchorPoint(sys.ap.topCenter)
    btnNode:setPosition({0,0})

    p:addChild(layer)
    layer:setContentSize({width=btnNode:getContentSize().width,height=btnNode:getContentSize().height})
    if a then
        layer:setAnchorPoint(a)
    else
        layer:setAnchorPoint(sys.ap.leftTop)
    end
    if x and y then layer:setPosition(x,y) end
    if cb then addScrollHTouchEventListener(layer,cb) end
    return layer
end


-- 滑动节点监听函数
addScrollHTouchEventListener = function ( btn, cb )
    -- handing touch events
    local touchBeginPoint = nil
    local touchMovePoint = nil
    local isMove = false
    local moveDis = 5
    local function onTouchBegan(touch, event)
        isMove = false
        local location = touch:getLocation()
        touchBeginPoint = {x = location.x, y = location.y}
        local s         = btn:getContentSize()
        local rect      = { x=-s.width/2, y=-s.height/2, width=s.width, height=s.height }
        local touchP    = btn:convertToNodeSpace( touchBeginPoint )
        if Point_In_Rect(rect, touchP) then
            btn:setScale(1.1)
        end
        return true
    end
    local function onTouchMove(touch, event)
        local location = touch:getLocation()
        touchMovePoint = {x = location.x, y = location.y}
        if math.abs(touchBeginPoint.x - touchMovePoint.x) > moveDis then
            isMove = true
            btn:setScale(1.0)
        end
    end
    local function onTouchEnd(touch, event)
        local location = touch:getLocation()
        touchBeginPoint = {x = location.x, y = location.y}
        local s         = btn:getContentSize()
        local rect      = { x=-s.width/2, y=-s.height/2, width=s.width, height=s.height }
        local touchP    = btn:convertToNodeSpace( touchBeginPoint )
        if Point_In_Rect(rect, touchP) and not isMove then
            if cb then
                cb()
            end
        end
        btn:setScale(1.0)
    end

    local listener = cc.EventListenerTouchOneByOne:create()
    listener:setSwallowTouches(false)  --允许消息向下流转
    listener:registerScriptHandler(onTouchBegan,cc.Handler.EVENT_TOUCH_BEGAN )
    listener:registerScriptHandler(onTouchMove,cc.Handler.EVENT_TOUCH_MOVED )
    listener:registerScriptHandler(onTouchEnd,cc.Handler.EVENT_TOUCH_ENDED )
    local eventDispatcher = btn:getEventDispatcher()
    eventDispatcher:addEventListenerWithSceneGraphPriority(listener, btn)
end

-- 斗地主回调函数
OnDouDiZhu = function ()
    print("斗地主..........")
end

-- 扎金花回调函数
OnZhaJinHua = function ()
    print("炸金花..........")
end

-- 牛牛回调函数
OnNiuNiu = function ()
    print("牛牛............")
end


旁白呢?????

旁白:( 找我干嘛???给我讲完啦??啊啊啊啊啊啊,这么点东西你要写这么多啊鄙视)


呵呵。。。。。。。。。。

说实话,开始这点东西我找了很久都没有找到,最后终于搞懂了,所以写出来给大家分享