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

26 篇文章 0 订阅
10 篇文章 0 订阅

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


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值