cocos2dx之自定义控件ScrollBar的设计

分类：Cocos2d-x作者：编程之家用户

****************************************************************************

时间：2015-01-13

作者：Sharing_Li

转载出处：http://www.jb51.cc/article/p-asmvisks-rx.html

****************************************************************************

我们在使用cocos2dx的TableView和ScrollView的时候，如果要显示的内容非常多，我们不方便确认当前浏览的内容处于什么位置，也不方便快速浏览。这时我们需要一个滚动条来帮忙，但cocos2dx里面没有这个控件，所以呢，这里我给大家设计了一个滚动条控件ScrollBar，可以非常方便的使用。讲解之前，先看看效果图吧：

看了效果图之后，我们来确认下功能需求：

1、通过滑动TableView或ScrollView，右边的滑块也跟着滑动；

2、TableView或ScrollView滑到底时，右边的滑块也滑到底了；

3、当点击右边的滑块滑动时，左边的TableView或ScrollView也跟着滑动；

4、滑块滑到底时，TableView或ScrollView也滑到底了；

5、当点击右边的滑块背景时，即示例黄色部分，TableView或ScrollView和滑块都跟者滑动；

6、当TableView或ScrollView的内容动态增加时，滑块的大小也动态改变；

7、控件水平和垂直都可以使用，示例只展示了垂直效果，水平同理；

大致的功能就这么多啦，那么就来看看代码怎么写吧，我们定义一个类ScrollBar：

ScrollBar.h头文件

#ifndef _SCROLL__BAR__H_
#define _SCROLL__BAR__H_

#include "cocos2d.h"
#include "cocos-ext.h"

USING_NS_CC;
USING_NS_CC_EXT;

enum SclBarDirection
{
	DIR_NODIR = 0,DIR_VERTICAL,DIR_HORIZENTAL,};

class ScrollBar : public cocos2d::Layer
{
public:
	ScrollBar();
	~ScrollBar();
	/**
	* 因为九宫图不能缩小到比实际图片要小，所以传入的图片的实际大小要足够小，否则slider的大小会有问题
	*/
	static ScrollBar * create(Scale9Sprite * bar_bg,Scale9Sprite * bar_slider,TableView * tableView,SclBarDirection dir);
	static ScrollBar * create(const char * bar_bgFile,const char * bar_sliderFile,SclBarDirection dir);
	bool myInit(Scale9Sprite * bar_bg,SclBarDirection dir);

protected:
	virtual bool onTouchBegan(Touch* touch,Event* pEvent);
	virtual void onTouchMoved(Touch *pTouch,Event *pEvent);
	virtual void onTouchEnded(Touch *pTouch,Event *pEvent);

	virtual void update(float dt) override;
	/**
	* 动态改变slider的大小
	*/
	void updateSlider();

private:
	TableView * m_pTarget;
	Scale9Sprite * m_pBg;
	Scale9Sprite * m_pSlider;
	SclBarDirection m_direction;
	Size m_preContentSize;
	Size m_viewSize;
	bool m_sliderTouched;
	Vec2 m_firstTouch;
	Vec2 m_sliderCurPos;
	Vec2 m_targetCurPos;
};

#endif


代码中已给出了部分注释，我们用了九宫图Scale9Sprite来显示滑块和滑块背景图片，因为Scale9Sprite在缩放时，图片效果很好，不会因为拉伸而使得图片效果变质。值得注意的是，如果你的图片的实际大小是size这么大，那么Scale9Sprite不能缩小到比size小，而相反的会放大。所以传入的图片要足够的小，下面再来看看具体的实现：

首先初始化数据：

/**
* 初始化各个数据
*/
bool ScrollBar::myInit(Scale9Sprite * bar_bg,SclBarDirection dir)
{
	if (!Layer::init())
	{
		return false;
	}
	
	m_pBg = bar_bg;
	m_pSlider = bar_slider;
	m_pTarget = tableView;
	m_direction = dir;
	m_preContentSize = m_pTarget->getContainer()->getContentSize();
	m_viewSize = m_pTarget->getViewSize();
	
	if (m_direction == DIR_VERTICAL)
	{
		m_pBg->setContentSize(Size(m_pBg->getContentSize().width,m_viewSize.height));
		m_pBg->setPosition(Vec2(m_pBg->getContentSize().width / 2,0));
		m_pSlider->setPositionX(m_pBg->getContentSize().width / 2);
	} 
	else if (m_direction == DIR_HORIZENTAL)
	{
		m_pBg->setContentSize(Size(m_viewSize.width,m_pBg->getContentSize().height));
		m_pBg->setPosition(Vec2(0,-m_pBg->getContentSize().height / 2));
		m_pSlider->setPositionY(-m_pBg->getContentSize().height / 2);
	}
	
	this->addChild(m_pBg,0);

	this->updateSlider();

	this->addChild(m_pSlider,1);

	this->scheduleUpdate();

	auto listenerT = EventListenerTouchOneByOne::create();
	listenerT->onTouchBegan = CC_CALLBACK_2(ScrollBar::onTouchBegan,this);
	listenerT->onTouchMoved = CC_CALLBACK_2(ScrollBar::onTouchMoved,this);
	listenerT->onTouchEnded = CC_CALLBACK_2(ScrollBar::onTouchEnded,this);
	listenerT->setSwallowTouches(false);
	Director::getInstance()->getEventDispatcher()->addEventListenerWithSceneGraphPriority(listenerT,this);

	return true;
}

我们来看看updateSlider函数如何改变滑块slider的大小：

void ScrollBar::updateSlider()
{
	float ratio = 0.0;
	if (m_direction == DIR_VERTICAL)
	{
		 ratio = m_viewSize.height / m_preContentSize.height;
		 m_pSlider->setContentSize(Size(m_pSlider->getContentSize().width,m_viewSize.height * ratio));
	} 
	else if (m_direction == DIR_HORIZENTAL)
	{
		ratio = m_viewSize.width / m_preContentSize.width;
		m_pSlider->setContentSize(Size(m_viewSize.width * ratio,m_pSlider->getContentSize().height));
	}
	//如果要显示的内容的尺寸比视图大小小，则隐藏滑块slider
	this->setVisible( !(ratio >= 1) );
}

我弄了一个定时器，来监听TableView或ScrollView的滑动，即偏移：

void ScrollBar::update(float dt)
{
	//判断当前内容是否有增减，因为内容的增减会影响ContenSize,从而修改slider的大小
	auto curContentSize = m_pTarget->getContainer()->getContentSize();
	if ( !(fabsf(curContentSize.height - m_preContentSize.height) <= 0.00001)  || 
		!(fabsf(curContentSize.width - m_preContentSize.width) <= 0.00001) )
	{
		m_preContentSize = curContentSize;
		this->updateSlider();
	}

	//设置slider的位置
	if (m_direction == DIR_VERTICAL)
	{
		//调整滑块的位置
		auto curOffset = m_pTarget->getContentOffset() + (m_preContentSize - m_viewSize) / 2;
		auto sliderOffset = curOffset.y / (m_viewSize.height - curContentSize.height) * 
			(m_viewSize.height - m_pSlider->getContentSize().height);
		//判断滑块是否滑出界限
		if (fabsf(sliderOffset) > (m_viewSize.height - m_pSlider->getContentSize().height) / 2)
		{
			return ;
		}
		m_pSlider->setPositionY(sliderOffset);
	}
	else if (m_direction == DIR_HORIZENTAL)
	{
		auto curOffset = m_pTarget->getContentOffset() - (m_preContentSize - m_viewSize) / 2;
		auto sliderOffset = -curOffset.x / (m_viewSize.width - curContentSize.width) * 
			(m_viewSize.width - m_pSlider->getContentSize().width);
		if (fabsf(sliderOffset) > (m_viewSize.width - m_pSlider->getContentSize().width) / 2)
		{
			return ;
		}
		m_pSlider->setPositionX(sliderOffset);
	}
}

注意的是：TableView或ScrollView的可滑动大小和滑块的可滑动大小不一样，所以二者要想同步的话，要成比例滑动。

再来看看滑块的滑动以及滑块背景点击这一块的实现：

先看看onTouchBegan：

bool ScrollBar::onTouchBegan(Touch* touch,Event* pEvent)
{
	m_sliderCurPos = m_pSlider->getPosition();
	m_targetCurPos = m_pTarget->getContentOffset();
	auto touchPoint = touch->getLocation();
	m_firstTouch = touchPoint;
	//将触摸点转为在当前子层下的坐标
	touchPoint = this->convertToNodeSpace(touchPoint);
	//只响应点击了滑块背景的触摸
	if (!m_pBg->getBoundingBox().containsPoint(touchPoint))
	{
		return false;
	}
	//如果先点击了滑块，则设置标志
	if (m_pSlider->getBoundingBox().containsPoint(touchPoint))
	{
		m_sliderTouched = true;
	}
	else//如果没有点击滑块，则点击的是滑块背景图
	{
		if (m_direction == DIR_VERTICAL)
		{
			//通过调整m_pTarget的偏移，从而调整了滑块slider的位置，因为update函数会一直监听m_pTarget的偏移
			auto offset = touchPoint.y - m_sliderCurPos.y;
			if (touchPoint.y <= 0)
			{
				offset += m_pSlider->getContentSize().height / 2;
			} 
			else
			{
				offset -= m_pSlider->getContentSize().height / 2;
			}
			auto newOff = m_targetCurPos.y + offset / (m_pSlider->getContentSize().height - m_viewSize.height) 
				* (m_preContentSize.height - m_viewSize.height);
			m_pTarget->setContentOffset(Vec2(0,newOff));
		}
		else if (m_direction == DIR_HORIZENTAL)
		{
			auto offset = touchPoint.x - m_sliderCurPos.x;
			if (touchPoint.x <= 0)
			{
				offset += m_pSlider->getContentSize().width / 2;
			} 
			else
			{
				offset -= m_pSlider->getContentSize().width / 2;
			}
			auto newOff = m_targetCurPos.x + offset / (m_viewSize.width - m_pSlider->getContentSize().width) 
				* (m_preContentSize.width - m_viewSize.width);
			m_pTarget->setContentOffset(Vec2(newOff,0));
		}
	}
	return true;
}

这里有一点要注意的时，我么不需要在触摸函数中修改滑块的位置，因为我们通过修改ScrollView或TableView的偏移，从而间接地改变了滑块的位置，所以我们只需要正确的设置好ScrollView或TableView的位置就可以了，update函数会帮我们解决滑块的位置。

再来看看onTouchMoved：

void ScrollBar::onTouchMoved(Touch *pTouch,Event *pEvent)
{
	//只响应点击了滑块的移动
	if (m_sliderTouched)
	{
		auto offPos = pTouch->getLocation() - m_firstTouch;
		if (m_direction == DIR_VERTICAL)
		{
			//通过调整m_pTarget的偏移，从而调整了滑块slider的位置，因为update函数会一直监听m_pTarget的偏移
			auto newOff = m_sliderCurPos.y + offPos.y;
			//判断滑块是否滑出界限
			if (fabsf(newOff) > (m_viewSize.height - m_pSlider->getContentSize().height) / 2)
			{
				(newOff < 0 ? (newOff = (m_pSlider->getContentSize().height - m_viewSize.height) / 2) : 
					(newOff = (m_viewSize.height - m_pSlider->getContentSize().height) / 2));
			}
			newOff -= m_sliderCurPos.y;
			m_pTarget->setContentOffset(Vec2(0,m_targetCurPos.y + newOff / (m_pSlider->getContentSize().height - m_viewSize.height) 
				* (m_preContentSize.height - m_viewSize.height)));
		}
		else if (m_direction == DIR_HORIZENTAL)
		{
			auto newOff = m_sliderCurPos.x + offPos.x;
			if (fabsf(newOff) > (m_viewSize.width - m_pSlider->getContentSize().width) / 2)
			{
				(newOff < 0 ? (newOff = (m_pSlider->getContentSize().width - m_viewSize.width) / 2) : 
					(newOff = (m_viewSize.width - m_pSlider->getContentSize().width) / 2));
			}
			newOff -= m_sliderCurPos.x;
			m_pTarget->setContentOffset(Vec2(m_targetCurPos.x + newOff / (m_viewSize.width - m_pSlider->getContentSize().width) 
				* (m_preContentSize.width - m_viewSize.width),0));
		}
	}
}

最后，我们看看onTouchEnded：

void ScrollBar::onTouchEnded(Touch *pTouch,Event *pEvent)
{
	m_sliderTouched = false;
}


很简单，就一句，还原下滑块slider的触摸状态就可以了。到这里，自定义控件ScrollBar已经实现了。那么我们在来看看在代码中如何使用ScrollBar。同样也很简单，看下面的示例：

m_tableView = TableView::create(this,viewSize);
	m_tableView->ignoreAnchorPointForPosition(false);
	m_tableView->setAnchorPoint(Vec2(0.5,0.5));
	m_tableView->setPosition(Vec2(viewSize.width / 2,viewSize.height / 2));
	m_tableView->setDirection(ScrollView::Direction::VERTICAL);
	m_tableView->setDelegate(this);
	m_tableView->setVerticalFillOrder(TableView::VerticalFillOrder::TOP_DOWN);
	m_tableView->reloadData();
	pView->addChild(m_tableView);

	auto scrollBar_vr = ScrollBar::create("scrollbar/vr_slider_bg.png","scrollbar/vr_slider.png",m_tableView,DIR_VERTICAL);
	scrollBar_vr->setPosition(Vec2(viewSize.width,viewSize.height / 2));
	pView->addChild(scrollBar_vr,2);

创建你的TablewView或ScrollView后，只需要创建ScrollBar，设置位置，添加到父节点共三步就可以轻松完成。

这次的内容就讲完了，有疑惑的可以留言。

Demo资源下载出：http://download.csdn.net/detail/sharing_li/8359125

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

如何使用CCRenderTexture创建动态纹理 Cocos2d-x 2 1 4
    本文实践自 RayWenderlich、Ali Hafizji 的文章《How To Create Dynamic Textures with CCRenderTexture in Cocos2D 2.X》，文中使用Cocos2D，我在这里使用Cocos2D-x 2.1.4进行学习和移植。在这篇文章，将会学习到如何创建实时纹理、如何用Gimp创建无缝拼接纹
Cocos-code-ide使用入门学习
Cocos-code-ide使用入门学习地点：杭州滨江邮箱：appdevzw@163.com微信公众号：HopToad 欢迎转载，转载标注出处：http://blog.csdn.netotbaron/article/details/424343991.  软件准备 下载地址：http://cn.cocos2d-x.org/download 2.  简介2.1         引用C
Cocos2D-x-3.0 编译(Win7)
第一次開始用手游引擎挺激动！！！进入正题。下载资源1：从Cocos2D-x官网上下载，进入网页http://www.cocos2d-x.org/download，点击Cocos2d-x以下的Download  v3.0，保存到自定义的文件夹2：从python官网上下载。进入网页https://www.python.org/downloads/，我当前下载的是3.4.0（当前最新
Cocos2d-x 2 0 在Windows平台下的使用
    Cocos2d-x是一款强大的基于OpenGLES的跨平台游戏开发引擎，易学易用，支持多种智能移动平台。官网地址：http://cocos2d-x.org/当前版本：2.0    有很多的学习资料，在这里我只做为自己的笔记记录下来，错误之处还请指出。在VisualStudio2008平台的编译：1.下载当前稳
quick-cocos2d-x实例之挑战记忆极限设计文档
1.  来源 QuickV3sample项目中的2048样例游戏，以及最近《最强大脑》娱乐节目。将2048改造成一款挑战玩家对数字记忆的小游戏。邮箱：appdevzw@163.com微信公众号：HopToadAPK下载地址：http://download.csdn.net/detailotbaron/8446223源码下载地址：http://download.csdn.net/
Cocos2d-x 3 X CMake MinGW版本编译运行
   Cocos2d-x3.x已经支持使用CMake来进行构建了，这里尝试以QtCreatorIDE来进行CMake构建。Cocos2d-x3.X地址：https://github.com/cocos2d/cocos2d-x1.打开QtCreator，菜单栏→"打开文件或项目..."，打开cocos2d-x目录下的CMakeLists.txt文件；2.弹出CMake向导，如下图所示：设置
vs 2013 编译cocos2d-x-3.9
 下载地址：链接:https://pan.baidu.com/s/1IkQsMU6NoERAAQLcCUMcXQ提取码:p1pb下载完成后，解压进入build目录使用vs2013打开工程设置平台工具集，打开设置界面设置： 点击开始编译等待编译结束编译成功在build文件下会出现一个新文件夹Debug.win32，里面就是编译
cocos2d-x游戏开发系列教程-超级玛丽01-前言
分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！http://www.captainbed.net前言上次用象棋演示了cocos2dx的基本用法，但是对cocos2dx并没有作深入的讨论，这次以超级马里奥的源代码为线索，我们一起来学习超级马里奥的实
Cocos2d-x CCControlPotentiometer之圆形音量button及特效
1. 圆形音量button事实上作者的本意应该是叫做“电位计button”。可是我觉得它和我们的圆形音量button非常像，所以就这么叫它吧~先看效果：好了，不多解释，本篇到此为止。（旁白： 噗。就这样结束了？）啊才怪~我们来看看代码：[cpp] viewplaincopyprint?CCContro
Cocos2d-x入门教程二简单的静态显示对象
原文链接：http://www.cnblogs.com/physwf/archive/2013/04/26/3043912.html为了进一步深入学习贯彻Cocos2d，我们将自己写一个场景类，但我们不会走的太远，凡是都要循序渐进，哪怕只前进一点点，那也至少是前进了，总比贪多嚼不烂一头雾水的好。在上一节中我们建
cocos2d-x中CCScale9Sprite的另一种实现
2019独角兽企业重金招聘Python工程师标准>>>cocos2d2.0之后加入了一种九宫格的实现，主要作用是用来拉伸图片，这样的好处在于保留图片四个角不变形的同时，对图片中间部分进行拉伸，来满足一些控件的自适应（PS: 比如包括按钮，对话框，最直观的形象就是ios里的短信气泡了），这就要求图
Cocos2d-x v2.2.2版本+Win7+VS2010环境搭建
原文链接：http://www.cnblogs.com/linji/p/3599478.html1.环境和工具准备Win7VS2010/2012，至于2008v2版本之后似乎就不支持了。 2.安装pythonv.2.0版本之前是用vs模板创建工程的，到vs2.2之后就改用python创建了。到python官网下载版本2.7.5的，然后
Ubuntu14.04+eclipse下cocos2d-x3.0正式版环境的搭建
环境:ubuntu14.04adt-bundle-linux-x86_64android-ndk-r9d-linux-x86_64cocos2d-x-3.0正式版apache-ant1.9.3python2.7(ubuntu自带)加入环境变量exportANDROID_SDK_ROOT=/home/yangming/adt-bundle-linux/sdkexportPATH=${PATH}:/$ANDROID_SDK_ROOTools/export
分别基于WIN32 API界面编程和Cocos2d-x实现的两个版本FlappyBird游戏
1开发背景游戏程序设计涉及了学科中的各个方面，鉴于目的在于学习与进步，本游戏《FlappyBird》采用了两个不同的开发方式来开发本款游戏，一类直接采用win32底层API来实现，另一类采用当前火热的cocos2d-x游戏引擎来开发本游戏。2需求分析2.1数据分析本项目要开发的是一款游
Cocos2d-x 开发小记二：控件
原文链接：http://www.cnblogs.com/linji/p/3599912.html//纯色色块控件（锚点默认左下角）CCLayerColor*ccc=CCLayerColor::create(ccc4(255,0,0,128),200,100);//渐变色块控件CCLayerGradient*ccc=CCLayerGradient::create(ccc4(255,0,0,
Cocos2d-x 开发小记一：基本动作
原文链接：http://www.cnblogs.com/linji/p/3599488.html//载入一张图片CCSprite*leftDoor=CCSprite::create("loading/door.png");leftDoor->setAnchorPoint(ccp(1,0.5));//设置锚点为右边中心点leftDoor->setPosition(ccp(240,160));/
买Cocos2d-x视频课程送纸质图书
为了答谢广大学员对智捷课堂以及关老师的支持，现购买51CTO学院关老师的Cocos2d-x课程之一可以送智捷课堂编写图书一本（专题可以送3本）。一、Cocos2d-x课程列表：1、Cocos2d-x入门与提高视频教程__Part22、Cocos2d-x数据持久化与网络通信__Part33、Cocos2d-x架构设计与性能优化内存优
‎Cocos2d-x 学习笔记(11.10) Spawn
Spawn让多个action同时执行。Spawn有多种不同的create方法，最终都调用了createWithTwoActions(FiniteTimeAction*action1,FiniteTimeAction*action2)方法。createWithTwoActions调用initWithTwoActions方法：对两个action变量初始化：_one=action1;_two=action2;如果两个a
quick-cocos2d-x-develop资源打包环境安装
需要环境：php,luajit.昨天在cygwin上安装php和luajit环境，这真特么是一个坑。建议不要用虚拟环境安装打包环境，否则可能会出现各种莫名问题。折腾了一下午，最终将环境转向linux。其中，luajit的安装脚本已经在quick-cocos2d-x-develop/bin/中，直接luajit_install.sh即可。我的lin
Cocos2d-x 3.0心得01－图片载入与混合模式
v3.0相对v2.2来说，最引人注意的。应该是对触摸层级的优化。和lambda回调函数的引入（嗯嗯，不枉我改了那么多类名。话说，每次cocos2dx大更新。总要改掉一堆类名函数名）。这些特性应该有不少人研究了，所以今天说点跟图片有关的东西。v3.0在载入图片方面也有了非常大改变，仅仅只是
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot