cocos2dx 实现不一样的ScrollView

原来在公司被迫加班加点赶工，用lua实现的版本：http://www.cnblogs.com/mmc1206x/p/4146911.html

后来因我个人的需要, 用C++实现了一个版本.

蓦然回首, lua那版不忍直视, 设计拙劣, 代码拙劣, 当然, 这都归咎于那时的我太年轻.

效果图

ScrollView.h

 #pragma once
 
 #include "Base.h"
 
 class ScrollView : public ccNode {
 public:
     struct Param {
         float scale;
         float width;
         float height;
         float itemWidth;
         float itemHeight;
         float anchorY;
         std::function<void(ccNode *)> enterHandler;
         std::function<void(ccNode *)> leaveHandler;
         Param()
             : scale()
             , width()
             , height()
             , itemWidth()
             , itemHeight()
             , anchorY(0.5f)
             , enterHandler([](ccNode *){})
             , leaveHandler([](ccNode *){})
         {
 
         }
     };
 public:
     virtual void addChild(ccNode *pNode) override;
     virtual void removeChild(ccNode *pNode, bool cleanup = true) override;
 
     void gotoIndex(int index)
     {
         _touchIdx = index;
         runUpdate();
     }
 
     ccNode *getActiveNode()
     {
         return getNode(_activeIdx);
     }
 
     ccNode *getTouchNode()
     {
         return getNode(_touchIdx);
     }
 
     ccNode *getNode(u_int index)
     {
         auto &childs = getChildren();
         return index < (u_int)childs.size()
             ? childs.at(index) : nullptr;
     }
 
     float getNodeOffset(u_int index)
     {
         auto offset = getNodePos(index);
         auto max = getRight();
         auto min = getLeft();
         if (offset <= max && offset >= min)
         {
             offset -= (max - offset) * (_param.scale - );
         }
         else if (offset < min)
         {
             offset -= (max - min) * (_param.scale - );
         }
         return offset;
     }
 private:
     bool onTouchBegan(ccTouch *pTouch, ccEvent *pEvent);
     void onTouchMoved(ccTouch *pTouch, ccEvent *pEvent);
     void onTouchEnded(ccTouch *pTouch, ccEvent *pEvent);
     void onTouchCancelled(ccTouch *pTouch, ccEvent *pEvent);
     bool moveChilds(float diff);
     u_int getNodeIdx(const ccVec2 &worldPoint);
     virtual void update(float dt) override;
 
     void setActive(u_int index)
     {
         auto pOldNode = getActiveNode();
         auto pNewNode = getNode(index);
         MMC_ASSERT(pNewNode != nullptr);
         if (pOldNode != pNewNode)
         {
             _activeIdx = index;
             if (pOldNode != nullptr)
             {
                 _param.leaveHandler(pOldNode);
             }
             _param.enterHandler(pNewNode);
         }
     }
 
 private:
     float getNodePos(u_int index)
     {
         return _param.itemWidth * index + _offset;
     }
 
     float getRight()
     {
         ;
     }
 
     float getLeft()
     {
         return getRight() - _param.itemWidth;
     }
 
     bool isActive(u_int index)
     {
         auto offset = getNodePos(index);
         return offset <= getRight() && offset >= getLeft();
     }
 
     void stopUpdate()
     {
         unscheduleUpdate();
     }
 
     void runUpdate()
     {
         scheduleUpdate();
     }
 
 private:
     ScrollView();
     ~ScrollView();
     void mmcInit(const Param &param);
 
     friend ScrollView *utils::createCocos<ScrollView>(const Param &);
 
 private:
     ccEventListenerTouchOneByOne *_listener;
     Param _param;
     float _offset;
     int _activeIdx;
     int _touchIdx;
     int _tick;
 };

ScrollView.cpp

 #include "ScrollView.h"
 
 ScrollView::ScrollView()
     : _listener(nullptr)
     , _activeIdx(INVALID_VALUE)
     , _touchIdx(INVALID_VALUE)
     , _offset()
 {
 }
 
 ScrollView::~ScrollView()
 {
 }
 
 void ScrollView::mmcInit(const Param &param)
 {
     if (!Node::init())
     {
         MMC_ASSERT(false);
     }
     _listener = ccEventListenerTouchOneByOne::create();
     _listener->onTouchBegan = CC_CALLBACK_2(ScrollView::onTouchBegan, this);
     _listener->onTouchMoved = CC_CALLBACK_2(ScrollView::onTouchMoved, this);
     _listener->onTouchEnded = CC_CALLBACK_2(ScrollView::onTouchEnded, this);
     _listener->onTouchCancelled = CC_CALLBACK_2(ScrollView::onTouchCancelled, this);
     _listener->setSwallowTouches(true);
     getEventDispatcher()->addEventListenerWithSceneGraphPriority(_listener, this);
     _offset = ;
     _param = param;
     runUpdate();
 }
 
 void ScrollView::addChild(ccNode *pNode)
 {
     auto childCount = getChildrenCount();
     auto offset = getNodeOffset(childCount);
     pNode->setPositionX(offset);
     pNode->setAnchorPoint(ccVec2(0.5f, _param.anchorY));
     if (_activeIdx == INVALID_VALUE && _touchIdx == INVALID_VALUE)
     {
         _touchIdx = childCount;
         runUpdate();
     }
     Node::addChild(pNode);
 }
 
 void ScrollView::removeChild(Node *pNode, bool cleanup)
 {
     auto pActive = getActiveNode();
     if (pActive == pNode)
     {
         _activeIdx = INVALID_VALUE;
     }
     auto pTouch = getTouchNode();
     if (pTouch == pNode)
     {
         _touchIdx = INVALID_VALUE;
     }
     Node::removeChild(pNode, cleanup);
 }
 
 bool ScrollView::onTouchBegan(ccTouch *pTouch, ccEvent *pEvent)
 {
     const auto &size = getContentSize();
     const auto &touchRect = ccRect(
         _param.width * -0.5f,
         _param.height * -_param.anchorY,
         _param.width, _param.height);
     const auto &worldPoint = pTouch->getLocation();
     const auto &localPoint = convertToNodeSpace(worldPoint);
     auto isTouch = touchRect.containsPoint(localPoint);
     if (isTouch)
     {
         _tick = clock();
         stopUpdate();
     }
     return isTouch;
 }
 
 void ScrollView::onTouchMoved(ccTouch *pTouch, ccEvent *pEvent)
 {
     auto diffOffset = pTouch->getDelta().x;
     auto nowtick = clock();
     auto difftick = nowtick - _tick;
 #ifdef WIN32
     ;
 #else
      / ;
 #endif
     _tick = nowtick;
     _touchIdx = _activeIdx - offsetIndex;
     if (_touchIdx >= getChildrenCount())
     {
         _touchIdx = getChildrenCount() - ;
     }
     )
     {
         _touchIdx = ;
     }
     moveChilds(diffOffset);
 }
 
 void ScrollView::onTouchEnded(ccTouch *pTouch, ccEvent *pEvent)
 {
     const auto &beg = pTouch->getStartLocation();
     const auto &end = pTouch->getLocation();
     const auto &delta = beg.getDistance(end);
     )
     {
         _touchIdx = getNodeIdx(end);
     }
     runUpdate();
 }
 
 void ScrollView::onTouchCancelled(ccTouch *pTouch, ccEvent *pEvent)
 {
 
 }
 
 void ScrollView::update(float dt)
 {
     auto pMoveNode = getTouchNode();
     if (pMoveNode == nullptr)
     {
         pMoveNode = getActiveNode();
     }
 
     if (pMoveNode != nullptr)
     {
         auto nowOffset = pMoveNode->getPositionX();
         auto newOffset = nowOffset * 0.1f;
         if (!moveChilds(-newOffset))
         {
             pMoveNode = nullptr;
         }
     }
 
     if (pMoveNode == nullptr)
     {
         stopUpdate();
     }
 }
 
 bool ScrollView::moveChilds(float diff)
 {
     _offset += diff;
     auto scaleLength = _param.itemWidth * _param.scale / ;
     auto &childs = getChildren();
     ; i != childs.size(); ++i)
     {
         auto pChild = childs.at(i);
         auto offset = getNodeOffset(i);
          > _param.width)
         {
             pChild->setVisible(false);
         }
         else
         {
             auto newScale = ( - std::abs(offset) / getRight()) * _param.scale;
             ) newScale = ;
             if (newScale > _param.scale) newScale = _param.scale;
             pChild->setScale(newScale);
             pChild->setVisible(true);
             pChild->setPositionX(offset);
             if (isActive(i))
             {
                 setActive(i);
             }
         }
     }
     return std::abs(diff) >= 0.1f;
 }
 
 u_int ScrollView::getNodeIdx(const ccVec2 &worldPoint)
 {
     const auto &localPoint = convertToNodeSpace(worldPoint);
     const auto &childs = getChildren();
     ccRect rect;
     ; i != childs.size(); ++i)
     {
         rect.origin.x = getNodeOffset(i) - _param.itemWidth / ;
         rect.origin.y = -_param.anchorY * _param.itemHeight;
         rect.size.width = _param.itemWidth;
         rect.size.height = _param.itemHeight;
         if (rect.containsPoint(localPoint))
         {
             return i;
         }
     }
     return INVALID_VALUE;
 }

这么简洁且通俗易懂的代码, 我想就不用填注释了吧.

这个版本的实现思路要比原来的更简洁.

去掉了所谓的惯性控制对象,

去掉了N多变量,

优化了一些接口.

原来,

快速滑动会激发惯性, 当惯性停止时, 再调整位置, 这里用到2个定时器, 一个用于控制惯性, 一个用于调整位置;

单击锁定放在子节点的Touch里响应, 因此要注册很多EventListener;

没有直接锁定功能, 貌似因为设计的问题, 无法加上这个功能, 年代久远, 懒得考察;

以及一堆让现在的我无法忍受的代码.

现在,

取消单独定时器, 所有计时操作都在Node::update里处理, 节能减排;

单击锁定由一个EventListener处理, 节能减排;

可以直接锁定某个子节点;

两者最大的区别应该在于惯性的处理,

老板的根据滑动速度, 计算惯性速度, 然后等待惯性消失, 之后再调整位置, 这个过程很**.

新版的处理很巧妙, 通过滑动速度, 计算出将被锁定的节点, 之后直接锁定, 对接口的重用要好很多, 并且思路, 实现都很简洁.

下载 DEMO, 猛戳这里!!!

转载请注明出处!