转自:http://blog.csdn.net/zcp1216/article/details/40426179
ScrollView 滚动视图
看看效果图:
代码:
- -- 来一个sprite 当容器背景
- local scrollViewBack = cc.Sprite:create("image/back2.png")
- scrollViewBack:setAnchorPoint(0,0)
- local scrollView = cc.ScrollView:create()
- scrollView:setPosition(winSize.width/2-500,winSize.height/2-200)
- self:addChild(scrollView)
- -- setContentSize 和 setContainer 都是 设置真实区域的大小(也可以理解为容器大小) 包括不可见部分
- -- setContainer: 设置容器,可以根据一个node设置背景内容和真实区域的大小,没有设置的情况下 默认是个node(大小貌似是200*200)
- scrollView:setContainer(scrollViewBack)
- -- setContentSize: 设置大小,不改变容器本身内容,但是设置了真实区域的大小
- scrollView:setContentSize(cc.size(1920,640))
- scrollView:setViewSize(cc.size(1000,400)) --设置可见部分的大小
- scrollView:setBounceable(false) --设置是否回弹
- for i=1, 5 do
- local img = cc.Sprite:create("image/"..tostring(i)..".png")
- img:setPosition(220*(i-1)+500,200)
- scrollView:addChild(img)
- end
- --设置 滑动 方向
- scrollView:setDirection(cc.SCROLLVIEW_DIRECTION_HORIZONTAL)
- -- cc.SCROLLVIEW_DIRECTION_NONE
- -- cc.SCROLLVIEW_DIRECTION_HORIZONTAL<span style="white-space:pre"> --水平
- -- cc.SCROLLVIEW_DIRECTION_VERTICAL<span style="white-space:pre"> --垂直
- -- cc.SCROLLVIEW_DIRECTION_BOTH
- local function scrollViewEvent()
- --print("滚动")
- -- 可以获取当前滑动的百分
- -- <span style="font-family: Arial, Helvetica, sans-serif;">滑动量 --两种写法</span>
- --local offsetX = scrollView:getContainer():getPositionX()
- local offsetX = scrollView:getContentOffset().x
- -- 总长度 - 可视长度 --两种写法
- --local lenth = scrollView:getContainer():getContentSize().width - scrollView:getViewSize().width
- local lenth = scrollView:getContentSize().width - scrollView:getViewSize().width
- print( offsetX / lenth * -100)
end
scrollView:setDelegate() --开启代理 没开启则回调无效
--设置回调
--设置滚动时候回调scrollView:registerScriptHandler(scrollViewEvent,cc.SCROLLVIEW_SCRIPT_SCROLL)
还有一些其他的接口:
- -- 设置内容的偏移 参数2 是否开启动画
- -- setContentOffset(cc.p(x,y), bool animated)
- -- 设置内容的偏移 参数2 时间
- -- setContentOffsetInDuration(Vec2 offset, float dt)
- -- getContentOffset()
- -- 设置缩放 参数 缩放比例 是否开启动画 (设置缩放不知道是bug还没修正还是自己代码没写对,没有效果)
- -- setZoomScale(float s) 参数 缩放比例
- -- setZoomScale(float s, bool animated) 参数 缩放比例 是否开启动画
- -- setZoomScaleInDuration(float s, float dt )参数 缩放比例 动画时间
- -- local function scrollViewEvent2()
- --print("ZOOM")
- -- end
- -- 设置回调
- -- 设置缩放时候回调
- -- scrollView:registerScriptHandler(scrollViewEvent2,cc.SCROLLVIEW_SCRIPT_ZOOM)