cocos2dx之自定义控件ScrollBar的设计，cocos2dxscrollbar
****************************************************************************
时间：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
http://www.bkjia.com/Androidjc/943175.htmlwww.bkjia.comtruehttp://www.bkjia.com/Androidjc/943175.htmlTechArticlecocos2dx之自定义控件ScrollBar的设计，cocos2dxscrollbar **************************************************************************** 时间： 2015-01-13 作者： Sharing...
