quick-cocos2d-x实现scrollview

前端之家收集整理的这篇文章主要介绍了quick-cocos2d-x实现scrollview前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

小注:本文使用的quick版本较低,所以很多控件需要自己写。在最新的quick版本里面已经集成了UIScrollView

这里实现的是一个简陋的scrollview,只支持单个的滑动。源码是根据网上一篇博客修改的,时间久远已经忘记出处,原作者可以私信我,我会加上原出处。谢谢

  1. -- 说明:
  2. -- 主体为scrollview,但是不实现任何代理,
  3. -- 通过触摸层self.layerContainer来检测滑动
  4. -- 然后手动调整scrollView2DidScroll事件
  5.  
  6. local UIScrollView = class("UIScrollView",function()
  7. return display.newLayer()
  8. end)
  9.  
  10. function UIScrollView:ctor(param)
  11. -- self.fileName = param.fileName
  12. self.fileName = {"ui032_8_8.png","ui032_8_9.png","ui032_8_10.png","ui001_2_01.png"}
  13.  
  14. self:setConstance()
  15. self:createScrollView()
  16. self:addItems()
  17. self:addCircles()
  18. end
  19.  
  20. -- 设置缩放系数
  21. function UIScrollView:getScale(content)
  22. -- 先判断是否有大得
  23. if content.width > display.width or content.height > self.scrollHeight then
  24. if content.width > display.width and content.height > self.scrollHeight then
  25. -- 两边都大
  26. local scaleW = display.width/content.width
  27. local scaleH = self.scrollHeight/content.height
  28.  
  29. if scaleW < scaleH then
  30. return scaleW
  31. else
  32. return scaleH
  33. end
  34.  
  35. elseif content.width > display.width then
  36. -- 只有宽大
  37. return display.width/content.width
  38. else
  39. return self.scrollHeight/content.height
  40. end
  41. else
  42. -- 两边都小
  43. local scaleW = display.width/content.width
  44. local scaleH = display.height/self.scrollHeight
  45.  
  46. if scaleW < scaleH then
  47. return scaleW
  48. else
  49. return scaleH
  50. end
  51. end
  52. end
  53.  
  54. -- 设置常量
  55. function UIScrollView:setConstance()
  56. local AdHeight = 400
  57. if display.height < 800 then
  58. AdHeight = display.height/2
  59. end
  60.  
  61. self.scrollHeight = AdHeight - 16
  62. self.scrollWidth = display.width
  63.  
  64. self.cellNum = #self.fileName
  65.  
  66. self.prevX = 0
  67. self.endX = 0
  68.  
  69. -- 不让其自动滑动
  70. self.bolTouchEnd = true
  71. end
  72.  
  73. -- 创建容器
  74. function UIScrollView:createContainer()
  75. self.layerContainer = display.newColorLayer(ccc4(255,255,0))
  76. self.layerContainer:setTouchEnabled(true)
  77. self.layerContainer:setPosition(ccp(0,0))
  78.  
  79. self.layerContainer:setTouchEnabled(true)
  80. self.layerContainer:addTouchEventListener(function(event,x,y)
  81. return self:onCellCallback(event,y)
  82. end)
  83.  
  84. self.widgetContainer = display.newColorLayer(ccc4(0,0))
  85. :align(display.LEFT_BOTTOM,0)
  86. :addTo(self.layerContainer)
  87. self.widgetContainer:setContentSize(CCSizeMake(self.scrollWidth,self.scrollHeight))
  88.  
  89. local w = self.cellNum*self.scrollWidth
  90. self.layerContainer:setContentSize(CCSizeMake(w,self.scrollHeight))
  91.  
  92. local preOffx = w
  93. local w1 = self.scrollWidth-w
  94. if w1 < 0 then
  95. w1 = 0
  96. end
  97. self.layerContainer:setPositionX(w1)
  98. end
  99.  
  100. -- 传感器
  101. function UIScrollView:onCellCallback(event,y)
  102. if event == "began" then
  103. self.prevX = x
  104. self.bolTouchEnd = false
  105. return true
  106. elseif event == "ended" then
  107. self.endX = x
  108. self.bolTouchEnd = true
  109. end
  110. end
  111.  
  112. -- 添加栏目
  113. function UIScrollView:addItems()
  114. for i=1,self.cellNum do
  115. local scrollRight = self.scrollWidth*(i-1)
  116. local textureName = self.fileName[i]
  117. local cell = display.newSprite(textureName):addTo(self.widgetContainer)
  118. :align(display.CENTER,scrollRight+self.scrollWidth/2,self.scrollHeight/2)
  119.  
  120. local size = cell:getContentSize()
  121. local scaleSize = self:getScale(size)
  122.  
  123. cell:setScale(scaleSize)
  124. end
  125. end
  126.  
  127. -- 设置滑动
  128. function UIScrollView:createScrollView()
  129. -- 设置容器相关内容
  130. self:createContainer()
  131.  
  132. -- 设置scrollView的相关操作
  133. self.scrollView = CCScrollView:create()
  134. self.scrollView:setContentSize(CCSizeMake(self.scrollWidth,self.scrollHeight)) -- 设置内容大小
  135. self.scrollView:setViewSize(CCSizeMake(self.scrollWidth,self.scrollHeight)) -- 设置可见大小
  136. self.scrollView:setPosition(ccp(0,0)) -- 设置位置
  137. self.scrollView:setContainer(self.layerContainer) -- 设置容器
  138. self.scrollView:setDirection(kCCScrollViewDirectionHorizontal) -- 设置滑动方向
  139. self.scrollView:setClippingToBounds(true) -- 设置裁剪
  140. self.scrollView:setBounceable(false) -- 设置弹性效果
  141. self.scrollView:setDelegate(this) -- 设置代理
  142. self:addChild(self.scrollView)
  143.  
  144. -- 实现代理
  145. self.scrollView:registerScriptHandler(handler(self,self.scrollView2DidScroll),CCScrollView.kScrollViewScroll)
  146. end
  147.  
  148. -- 添加小圆圈
  149. function UIScrollView:addCircles()
  150. local distance = 20
  151. local circlePosX = display.cx - (self.cellNum-1)/2*distance
  152.  
  153. -- 初始化其它的
  154. for i=1,self.cellNum do
  155. local circle = display.newSprite("res/ui024_6_1.png"):addTo(self)
  156. :align(display.CENTER,circlePosX+(i-1)*distance,60)
  157. circle:setScale(0.5)
  158. circle:setTag(100+i)
  159. end
  160.  
  161. self:getChildByTag(101):setTexture(CCTextureCache:sharedTextureCache():addImage("ui024_6_2.png"))
  162. end
  163.  
  164. -- 更新小圆圈
  165. function UIScrollView:updateCircles(x)
  166. for i=1,self.cellNum do
  167. self:getChildByTag(100+i):setTexture(CCTextureCache:sharedTextureCache():addImage("ui024_6_1.png"))
  168. end
  169.  
  170. local index = x/(-self.scrollWidth) + 1
  171. self:getChildByTag(100+index):setTexture(CCTextureCache:sharedTextureCache():addImage("ui024_6_2.png"))
  172. end
  173.  
  174. -- 代理函数
  175. function UIScrollView:scrollView2DidScroll()
  176. if self.bolTouchEnd == true then
  177. self.bolTouchEnd = false
  178. local offx = self.layerContainer:getPositionX()
  179. local minx = self.scrollWidth-self.cellNum*self.scrollWidth
  180. if offx < 0 and offx > minx then
  181. local item = -(math.abs(offx)%self.scrollWidth)
  182. local standerWidth = 0
  183. if self.endX > self.prevX then
  184. -- 向右滑动
  185. standerWidth = -self.scrollWidth*7.0/8
  186. else
  187. -- 向左滑动
  188. standerWidth = -self.scrollWidth/8
  189. end
  190. if item <= standerWidth then
  191. -- 设置滑动
  192. item = offx-item-self.scrollWidth
  193. else
  194. -- 没有滑动
  195. item = offx-item
  196. end
  197.  
  198. self:updateCircles(item)
  199.  
  200. --scrollview滑动到指定的位置
  201. self.scrollView:setContentOffset(ccp(item,0),true)
  202. end
  203. end
  204. end
  205.  
  206.  
  207. return UIScrollView

猜你在找的Cocos2d-x相关文章