本篇主要介绍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的开始结束回调,在滚动开始时计算速度,然后覆盖之前手指产生的速度,这样不管手指怎么滑动,最多也就滑动一页,这里不详细描述算法过程,具体实现还是需要注意很多细节的呵。