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