Cocos2d-lua嵌套使用ScrollView的方案

前端之家收集整理的这篇文章主要介绍了Cocos2d-lua嵌套使用ScrollView的方案前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
  1. Cocos2d-x嵌套使用ScrollView的方案
  2. 比较典型的是皇室战争的UI设计,上下可以滚动,左右可以翻页
  3. 假设我们做一个PageView内嵌套ScrollViewUI,直接使用组件,会产生PageViewScrollView同时发生位移的问题。
  4. 经过试验,只需要在UIScrollView.cpponTouchMove
  5. 增加一句,通过_direction控制scrollview的滚动行为即可
  6. 之后,对于PageView的面板,增加一个触摸Layer,用于判断滑动的方向,如果为水平,则设置一个水平值,同时对ScrollView的面板,要透传PageViewctx,通过ctxisHorizontal来设置ScrollViewdirection以及swallowTouches的行为。ScrollView也需要一个用于触摸检测的Layer
  7. 这样可以做到与皇室战争一样的控制效果
  8. 代码大概如下
  9. MyPage.lua


  10. 查看原文:http://www.51xyyx.com/3122.html//UIScrollView.cpp onTouchMove:
  11. if(_direction == Direction::NONE)
  12. return;function MyPageViewPanel:onCreate()
  13. local pageView = ccui.PageView:create()
  14. local touchLayer = display.newLayer() -- {r=255,g=0,b=0}
  15. for i=1,3 do
  16. local myPage = MyPage:create(self)
  17. pageView:addPage(myPage)
  18. end
  19. self:addChild(pageView)
  20. self:addChild(touchLayer)
  21. touchLayer:onTouch(handler(self,self.onTouchLayer))
  22. end
  23. function MyPageViewPanel:onTouchLayer(event)
  24. local touchPos = cc.p(event.x,event.y)
  25. local touchLayer = self.touchLayer
  26. if event.name == 'began' then
  27. local p = touchLayer:convertToNodeSpace(touchPos)
  28. local size = self.touchLayerSize
  29. local intersect = cc.rectContainsPoint(cc.rect(0,0,size.width,size.height),p)
  30. if intersect then
  31. self.pageStartPos = touchPos
  32. return true
  33. end
  34. return false
  35. end
  36.  
  37. if event.name == 'moved' then
  38. if self.determined then return end
  39. local dp = cc.pSub(touchPos,self.pageStartPos)
  40. if math.abs(dp.x) < 5 and math.abs(dp.y) < 5 or self.determined then
  41. return
  42. end
  43. self.determined = true
  44. local angle = cc.pToAngleSelf(dp)
  45. angle = math.deg(angle)
  46. -- 用于ScrollView的判断
  47. self.isHorizontal = isHorizontal(angle)
  48. end
  49.  
  50. if event.name == 'ended' then
  51. self.determined = false
  52. self.isHorizontal = nil
  53. end
  54. endfunction MyPage:onCreate(ctx)
  55. self.ctx = ctx
  56. self.scrollView = ccui.ScrollView:create()
  57. self.scrollView:setDirection(0) -- 初始方向为0
  58. self.touchLayer = display.newLayer()
  59. self:addChild(self.scrollView)
  60. self:addChild(touchLayer)
  61. touchLayer:onTouch(handler(self,self.onTouchLayer))
  62. end
  63.  
  64. function MyPage:onTouchLayer(event)
  65. local touchPos = cc.p(event.x,event.y)
  66. local touchLayer = self.touchLayer
  67.  
  68. if event.name == 'began' then
  69. local p = touchLayer:convertToNodeSpace(touchPos)
  70. local size = touchLayer:getContentSize()
  71. local intersect = cc.rectContainsPoint(cc.rect(0,p)
  72. if intersect then
  73. self.beganY = touchPos.y
  74. return true
  75. end
  76. return false
  77. end
  78.  
  79. if event.name == 'moved' then
  80. -- 上层还未确定是否为需要翻页或确实为翻页操作
  81. local isHorizontal = self.ctx.isHorizontal
  82. if isHorizontal == nil or isHorizontal then
  83. if self.scrollView:getDirection() ~= 0 then
  84. self.scrollView:setDirection(0) -- 设置为NONE,不会移动
  85. self.scrollView:setSwallowTouches(false)
  86. end
  87. else
  88. if self.scrollView:getDirection() == 0 then
  89. self.scrollView:setDirection(1)
  90. self.scrollView:setSwallowTouches(true)
  91. end
  92. end
  93. end
  94.  
  95. if event.name == 'ended' then
  96. self.scrollView:setDirection(0)
  97. self.scrollView:setSwallowTouches(false)
  98. end
  99. end

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