在游戏关卡选择，道具店之中经常会用到类似于ScrollView的控件，之前用AndEngine引擎的时候简单的实现了一个，（AndEngine滑动菜单传送门），考虑到手头的游戏以后也会用到，就先用cocos2d-x简单的实现了一下！原理非常类似，android中的app（比如微博，qq）也是类似的原理！

1.设计思路

自定义ScrollView继承于CCLayer，固定其每页的大小（ios上假设480x320），每一页是一个子层（也是继承于CCLayer），由使用者根据需求丰富，依次水平方向添加到ScrollView中（垂直方向的原理类似）！在ScrollView中实现触摸监听，如果是滑动事件，执行滚屏的操作，并且在触摸事件完成后跳转到当前页；如果是点击事件，则根据当前页交由子层处理。

2.ScrollView类

#ifndef ScrollView_ScrollView_h
#define ScrollView_ScrollView_h#include "cocos2d.h"USING_NS_CC;// 屏幕尺寸
const float WINDOW_WIDTH = 480.0f;
const float WINDOW_HEIGHT = 320.0f;// 触摸误差
const int TOUCH_DELTA = 5;class ScrollView: public CCLayer
{
private:// 按下点CCPoint m_TouchDownPoint;// 抬起点 配合使用判断是否为点击事件CCPoint m_TouchUpPoint;// 当前触摸点CCPoint m_TouchCurPoint;private:// 总页数int m_Page;// 当前显示页int m_CurPage;private:// 存储所有页层CCArray *m_PageLayer;private:// 跳转页void goToPage();public:ScrollView();~ScrollView();virtual bool init();LAYER_NODE_FUNC(ScrollView);public:// 初始化相关virtual void onEnter();virtual void onExit();// 触摸事件相关virtual bool ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent);virtual void ccTouchMoved(CCTouch *pTouch, CCEvent *pEvent);virtual void ccTouchEnded(CCTouch *pTouch, CCEvent *pEvent);virtual void ccTouchCancelled(CCTouch *pTouch, CCEvent *pEvent);public:// 添加页void addPage(CCLayer *pPageLayer);};#endif

CCPoint 成员是为了判断触摸事件相关，

addPage(CCLayer *pLayer) 是提供的外部接口，向ScrollView中添加子层，

void goToPage() 在触摸事件完成后根据当前偏移量跳转到指定页码

CCArray *m_PageLayer 用来存储所有的子层

3.判断规则

(1) 移动事件

根据触摸的点与当前ScrollView所在位置，得到ScrollView的偏移量

void ScrollView::ccTouchMoved(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent)
{// 移动CCPoint touchPoint = CCDirector::sharedDirector()->convertToGL(pTouch->locationInView());CCPoint posPoint = CCPointMake(getPositionX() + touchPoint.x - m_TouchCurPoint.x, getPositionY());setPosition(posPoint);m_TouchCurPoint = touchPoint;
}

(2) 触摸事件完成

得到用户按下和抬起的坐标偏移量，和触摸误差作比较，如果大于触摸误差，则认为是滑动；如果小于触摸误差，则认为是点击。

如果是点击，则交由当前的子层处理

如果是滑动，则根据滑动的偏移量来决定是否滑动到哪一页

void ScrollView::ccTouchEnded(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent)
{m_TouchUpPoint = CCDirector::sharedDirector()->convertToGL(pTouch->locationInView());// 计算按下和抬起的偏移量float off = (m_TouchUpPoint.x - m_TouchDownPoint.x) * (m_TouchUpPoint.x - m_TouchDownPoint.x) + (m_TouchUpPoint.y - m_TouchDownPoint.y) * (m_TouchUpPoint.y - m_TouchDownPoint.y);if (off < (TOUCH_DELTA * TOUCH_DELTA)) {// 点击// 向子Layer发送Click消息((CCLayer*) m_PageLayer->objectAtIndex(m_CurPage))->ccTouchBegan(pTouch, pEvent);}else {// 滑动结束int offset = getPositionX() - m_CurPage * (-WINDOW_WIDTH);if (offset > WINDOW_WIDTH / 2) {// 上一页if (m_CurPage > 0) {--m_CurPage;}}else if (offset < -WINDOW_WIDTH / 2) {// 下一页if (m_CurPage < (m_Page - 1)) {++m_CurPage;}}// 执行跳转动画goToPage();}
}

4.测试

写了一个测试层TestLayer，主要用来测试接收触摸事件

bool TestLayer::ccTouchBegan(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent)
{CCLOG("I am %d", getTag());return true;
}

简单的输出一个标记，可根据需求再具体分发触摸事件

5.用法

循环了10个子层，每层随机了一个背景色，用来区别各个子层，分别加入到ScrollView对象中

bool ScrollViewScene::init()
{bool bRet = false;do {CC_BREAK_IF(!CCScene::init());ScrollView *scrollView = ScrollView::node();CCSize winSize = CCDirector::sharedDirector()->getWinSize();for (int i=0; i<10; ++i) {CCLayer *layer = TestLayer::node();layer->setAnchorPoint(CCPointZero);layer->setTag(i);scrollView->addPage(layer);}this->addChild(scrollView);bRet = true;} while (0);return bRet;
}

效果如图

示例代码下载

Cocos2d-x学习（七）：cocos2d-x中ScrollView的简单实现相关推荐

python--Flask学习(七)--利用Flask中的werkzeug.security模块加密
若将密码以明文的方式保存在数据库中是不安全的,可以使用一些如MD5的方式加密,但像这种加密方式也是存在安全隐患的,这里我们来学习一下利用Flask中的werkzeug.security模块加密. 1. ...
springboot学习(七十三) springboot中使用springdoc替换swagger(springfox)
文章目录前言一.springdoc介绍二.使用步骤 1.引入库 2. 创建一个spring配置类,添加springdoc的配置 3. 常用的swagger注解和springdoc的对应关系 4. ...
Android多媒体学习一：Android中Image的简单实例。
在多媒体应用中,Image是最基础的功能模块,接下来我们将看看在Android中是如何获取和存储Image的.Android内嵌的Image获取和存储功能,可以让我们对于整个媒体框架有个比较全面的了解 ...
python字典、列表、元祖使用场景_python学习第七讲,python中的数据类型,列表,元祖,字典,之元祖使用与介绍...
python学习第七讲,python中的数据类型,列表,元祖,字典,之元祖使用与介绍一丶元祖 1.元祖简介元祖跟列表类似.只不过是有区别的. 如下: tuple(元祖英文) 跟列表类似, 元素不能 ...
iOS手势学习UIGestureRecognizer cocos2d 手势推荐
iOS手势学习UIGestureRecognizer & cocos2d 手势推荐手势识别类型: UILongPressGestureRecognizer // 长按 UIPanGestu ...
matlab方程近似求根,第七讲MATLAB中求方程的近似根(解)教学目的学习matlab中求根命令.doc...
第七讲MATLAB中求方程的近似根(解)教学目的学习matlab中求根命令第七讲 MATLAB中求方程的近似根(解) 教学目的:学习matlab中求根命令,了解代数方程求根求解的四种方法,即图解法. ...
深度学习在智能助理中的应用
一.什么是智能助理随着智能手机和移动互联网的普及,越来越多原来发生在线下的交互场景,逐渐从线下转移到线上.人们也开始习惯通过在线沟通的方式来获取各种服务:让秘书安排出差的机票和酒店,向英语老师咨询学 ...
SpringBoot学习笔记(9)----SpringBoot中使用关系型数据库以及事务处理
在实际的运用开发中,跟数据库之间的交互是必不可少的,SpringBoot也提供了两种跟数据库交互的方式. 1. 使用JdbcTemplate 在SpringBoot中提供了JdbcTemplate模板 ...
OpenCV与图像处理学习七——传统图像分割之阈值法（固定阈值、自适应阈值、大津阈值）
OpenCV与图像处理学习七--传统图像分割之阈值法(固定阈值.自适应阈值.大津阈值) 一.固定阈值图像分割 1.1 直方图双峰法 1.2 OpenCV中的固定阈值分割二.自动阈值图像分割 2.1 ...

Cocos2d-x学习（七）：cocos2d-x中ScrollView的简单实现