cocos2d-x之自定义控件ScrollBar的设计

我们在使用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));}//如果要显示的内容的尺寸比视图大小小，则隐藏滑块sliderthis->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，设置位置，添加到父节点共三步就可以轻松完成。