cocos2dx之自定义控件ScrollBar的设计

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

时间：2015-01-13

作者：Sharing_Li

转载出处：http://blog.csdn.net/sharing_li/article/details/42685321

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

我们在使用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,TableView * tableView,SclBarDirection dir);
	bool myInit(Scale9Sprite * bar_bg,Scale9Sprite * bar_slider,TableView * tableView,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,Scale9Sprite * bar_slider,TableView * tableView,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

时间： 2024-10-18 18:57:17

cocos2dx之自定义控件ScrollBar的设计的相关文章

WPF自定义控件(2)——图表设计[1]

0.讲点废话 除了仪表盘控件比较常用外,还有图表也经常使用,同样网上也有非常强大的图表控件,有收费的(DVexpress),也有免费的.但我们平时在使用时,只想简单地绘一个图,控件库里面的许多功能我们都用不到,没必要使用那么功能丰富的控件,以提高程序运行的效率和减小程序的占用空间.同时,我们自己如果能够绘制图表出来,对于程序的移植,也非常方便.对于大部分平台,相信设计方法是不会变的. 1.图表整体设计 简单来看一个图表的组成,一般由4个部分组成,坐标轴,刻度和刻度值,绘图区域(添加数据点和绘制曲

cocos2dx之抽奖界面与获奖概率的设计(一)

**************************************************************************** 时间:2015-02-01 作者:Sharing_Li 转载出处:http://blog.csdn.net/sharing_li/article/details/43268877 **************************************************************************** 在不同游戏中

摘一些自己设计的QSS（一）

QScrollBar:vertical { background: #444444; width: 19px; margin: 20px 0 20px 0; } QScrollBar::handle:vertical { background: #777777; border: 1px solid #444444; border-radius: 2px; min-height: 19px; } QScrollBar::handle:vertical:hover { background: #99

cocos2d-x博客网站推荐和牛逼的教程

Cocos2d-x网站列表 CocoaChina(官方网站,不解释)www.cocoachina.com/ 泰然网(貌似最近有很多不错的文章,不过早期的文章质量一般)www.ityran.com/ Cocos2d-x博客列表 老G的小屋  www.goldlion.blog.51cto.com/ 小满的专栏   www.blog.csdn.net/bill_man/article/details/7341028 子龙山人  www.zilongshanren.com/ 红孩儿的游戏编程之路  w

【cocos2d-js官方文档】十八、Cocos2d-JS v3.0中的属性风格API

1. 新的API风格 我们直接来看看你可以如何使用Cocos2d-JS v3.0: 以前的API 新的API node.setPosition(x, y); node.x = x; node.y = y; node.setRotation(r); node.rotation = r; 如表格中可以看到的,设置position属性的函数调用在3.0版中会被替换为直接的对象属性存取.不仅仅是示例中的x,y和rotation,几乎所有节点类型中关于属性存取的函数都会被替换为直接的对象属性访问.具体的属

CreateWindowEx和CreateWindow的区别

CreateWindowEx 函数功能:该函数创建一个具有扩展风格的重叠式窗口.弹出式窗口或子窗口,其他与 CreateWindow函数相同.关于创建窗口和其他参数的内容,请参看CreateWindowEx. 函数原型:HWND CreateWindowEx(DWORD dwExStle,LPCTSTR IpClassName,LPCTSTR lpWindowName,DWORD dwStyle,int x,int y,int nWidth,int nHeight,HWND hWndParent

【玖哥乱弹】神通广大的JavaScript

一切可以用 JavaScript 编写的程序,最终都会使用 JavaScript 编写 --Atwood 2007 就在前几天"JavaScript是世界上最好的语言"这句话火了,PHP的地位遭受了前所未有的挑战.JavaScript到底有何神通,能登上世界上最好的语言的宝座? JavaScript是诞生于1995年的一种直译式脚本语言,原名Mocha.JavaScript是一种动态类型.弱类型.基于原型的语言,内置支持类型.JavaScript具备简单灵活和跨平台的优势,会成为解决大

cocos2d学习资源收集

    在知乎上看到的某个关于<自学 cocos2d 游戏开发应该按什么步骤进行?>这个问题的某个答案,感觉应该很不错,可以先收藏下来,以后需要了再回来看看~ Cocos2d-x网站列表 CocoaChina(官方网站,不解释) 泰然网(貌似最近有很多不错的文章,不过早期的文章质量一般) Cocos2d-x博客列表 老G的小屋 小满的专栏 子龙山人 红孩儿的游戏编程之路 Cocosdev 黑米GameDev街区 优秀cocos2d-x源码 Code4app 代码仓库 cocos2d-x与ios

Vs自定义控件设计第一例（直线控件的设计）

目录 一. 杨老师是个热情的人 二. 开始喽 三. 还需要些解释什么吗 四. OK了吗 五.最终代码 一.杨老师是个热情的人 我们的项目开源有一段时间了,我一直以为我有一个很不错的胸怀把自己花了很多精力做出来的项目贡献出来了,我以为同学们会很开心,会像“一个饥饿的人看到面包”一样的扑到了我的项目代码上面快乐的研究起来,但是事实上我们的群里面却异常的冷清.我想应该是大家都还在研究代码来不及说话或者是不爱说话吧,直到今天杨老师给我打电话,说了一些情况,似乎是说大家还不太懂数据库等等,我才知道是我错了