cocos2d-x之CCGUI设计与实现（4）分页列表框的实现（仿IOS图标分页列表）

本篇主要介绍IOS应用图标桌面的分页效果设计，这种控件主要用于RPG等游戏的背包部分，算是很常用的了。

分页列表框暂且命名为GridBox，继承自ScrollView，拥有滚动属性和分页属性，这里简单讨论后者的实现思路。

cocos2d-x扩展提供的CCScrollView支持滑动，滑动的具体实现是这样的：

（1）  touch begin时初始化滑动的距离为0；

（2）  touch move时改变content的offset，使之随手指移动；

（3）  touch end时计算手指的滑动距离，并以此距离作为起始速度，启动schedule开始做减速运动；

（4）  schedule在速度降为SCROLL_DEACCEL_DIST以下时停止运动；

由上可知，CCScrollView并没有直接计算content的偏移量，而是根据起始速度做减速运动，而如果要让CCScrollView支持分页，输入必须是页的宽度，每次偏移为一个页宽度，所以需要提前计算content的偏移量。

       由速度可以计算出偏移量，由偏移量可以计算出速度，让我们为CCScrollView添加两个函数。

//通过距离计算速度virtual cocos2d::CCPoint calculateSpeed(cocos2d::CCSize distance);//通过速度计算距离virtual cocos2d::CCSize calculateDistance(cocos2d::CCPoint speed);

       有了这两个函数（事实上我们只需要一个），我们就可以轻松的实现分页了，哦，忘了还有个比较重大的事情，CCScrollView的回调需要大改！

class CCGUIScrollViewDelegate{public:    virtual ~CCGUIScrollViewDelegate() {}//CCMove动作停止virtual void scrollViewDidAnimateStop(CCGUIScrollView* view) {};//滚动结束virtual void scrollViewDidScrollStop(CCGUIScrollView* view) {};//CCMove动作开始virtual void scrollViewDidAnimateStart(CCGUIScrollView* view) {};//滚动开始virtual void scrollViewDidScrollStart(CCGUIScrollView* view) {};//重置virtual void scrollViewDidReset(CCGUIScrollView* view) {};//滚动中virtual void scrollViewDidScroll(CCGUIScrollView* view) {};//缩放操作virtual void scrollViewDidZoom(CCGUIScrollView* view) {};//是否移动了给定的一个偏移值virtual void scrollViewDidMoveSegment(CCGUIScrollView* view, bool up) {};};

如上，重点添加了滚动开始结束回调和Animate的开始结束回调，在滚动开始时计算速度，然后覆盖之前手指产生的速度，这样不管手指怎么滑动，最多也就滑动一页，这里不详细描述算法过程，具体实现还是需要注意很多细节的呵。