CCScrollView添加滚动条和滚动背景

cocos2d-X里提供的CCScrollView里并没有提供滚动条和滚动条背景，我对它进行了一些修改，所用的cocos2d-x 版本为3.0

使用方法

   CCBarScrollView* scrollView = CCBarScrollView::create();
    scrollView->initWithViewSize((Size(280.0f,150.0f)));
    scrollView->setContentSize(Size(280,150*10.0f));
    scrollView->setDirection(cocos2d::extension::ScrollView::Direction::VERTICAL);
    scrollView->setPosition(Point(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
    scrollView->setBounceable(true);
    this->addChild(scrollView,0);
    
    auto bgImage = Scale9Sprite::create("bg_pd_item.png");
    auto barImage = Scale9Sprite::create("bg2.png");
    
    scrollView->setBarImage(bgImage, barImage);
//    scrollView->setAutoHidden(true);
    
    for (int i = 0; i < 50; i++) {
        auto sprite1 = Sprite::create("CloseNormal.png");
        sprite1->setPosition(20, 20+i*40);
        scrollView->addChild(sprite1);
    }

控件代码： 点击打开链接

class CCBarScrollView:public ScrollView
{
public:
    static CCBarScrollView* create(Size size, Node* container = NULL);
    static CCBarScrollView* create();
    
    
    
    using Node::addChild;
    void setBarImage(Scale9Sprite* barBg,Scale9Sprite* barImage);
    virtual void addChild(Node * child, int zOrder, int tag) override;
    
    
    void setContentOffset(Point offset, bool animated = false);
    
    void setAutoHidden(bool autoHidden); //设置是否自动隐藏
    
    virtual bool onTouchBegan(Touch *touch, Event *event);
    virtual void onTouchEnded(Touch *touch, Event *event);
protected:
    
    void deaccelerateScrolling(float dt);
    void updateBarPos();
    Scale9Sprite* barBg;       //滚动条背景
    Scale9Sprite* barImage;    //滚动条
    bool isAutoHidden;         //滚动条是否自动隐藏
};

设置滚动条背景和滚动条

void CCBarScrollView::setBarImage(Scale9Sprite* barBg, Scale9Sprite* barImage)
{
    
    Size contentSize = this->getContentSize();
    auto layer1 = LayerColor::create(Color4B(255, 0, 255, 255), contentSize.width, contentSize.height);
    layer1->setCascadeColorEnabled(false);
    layer1->setPosition( Point(0, 0));
    this->addChild(layer1);
    
    Size viewSize = this->getViewSize();

    this->barBg = barBg;
    
    this->barBg->setContentSize(Size(20,viewSize.height));
    this->barBg->setPosition(Point(viewSize.width - 10,viewSize.height/2));
    this->barImage = barImage;
    Layer::addChild(this->barBg);
    Layer::addChild(this->barImage);
    
    this->barImage->setContentSize(Size(20,viewSize.height*(viewSize.height/contentSize.height)));
    
    this->updateBarPos();
}

设置滚动条是否自动隐藏

void CCBarScrollView::setAutoHidden(bool autoHidden)
{
    this->isAutoHidden = autoHidden;
    
    if(this->barImage != nullptr && this->isAutoHidden == true)
    {
        this->barImage->setVisible(false);
    }
}

在父类里，addChild会把子节点加入滚动container里面，但是滚动条和背景应该都在它的父节点上，所以要重载次方法

void CCBarScrollView::addChild(Node *child, int zOrder, int tag)
{
    if (_container != child && barBg != child && barImage != child)
    {
        _container->addChild(child, zOrder, tag);
    } else
    {
        Layer::addChild(child, zOrder, tag);
    }
}

在contentOffset发生改变的时候，需要更新滚动条的位置

void CCBarScrollView::setContentOffset(Point offset, bool animated/* = false*/)
{
    if (animated)
    { //animate scrolling
        this->setContentOffsetInDuration(offset, BOUNCE_DURATION);
    }
    else
    { //set the container position directly
        if (!_bounceable)
        {
            const Point minOffset = this->minContainerOffset();
            const Point maxOffset = this->maxContainerOffset();
            
            offset.x = MAX(minOffset.x, MIN(maxOffset.x, offset.x));
            offset.y = MAX(minOffset.y, MIN(maxOffset.y, offset.y));
        }
        
        _container->setPosition(offset);
        
        if (_delegate != NULL)
        {
            _delegate->scrollViewDidScroll(this);
        }
    }

    this->updateBarPos();
//    CCLOG("CCBarScrollView::setContentOffset");
}

更新滚动条的位置函数

void CCBarScrollView::updateBarPos()
{
//    Point currentOffset = this->_container->getPosition();
    Point currentOffset = this->getContentOffset();
    Size contentSize = this->getContentSize();
    Size viewSize = this->getViewSize();
    
    Size barSize = this->barImage->getContentSize();
    Point p =Point(viewSize.width-10,barSize.height/2 + viewSize.height*(-currentOffset.y/contentSize.height));
   
//    CCLOG("barImage %f,%f,%f,%f",p.x,p.y,barSize.width,barSize.height);
//    CCLOG("currentOffset %f",currentOffset.y);
    if(p.y < barSize.height/2)
    {
        p.y = barSize.height/2;
    }
    else if(p.y + barSize.height/2 > viewSize.height)
    {
        p.y = viewSize.height- barSize.height/2;
    }
    
    this->barImage->setPosition(p);
}

滚动条在点击松开的时候，会做减速的运动，所以也要在减速函数做相应的处理

void CCBarScrollView::deaccelerateScrolling(float dt)
{
    if (_dragging)
    {
        this->unschedule(schedule_selector(CCBarScrollView::deaccelerateScrolling));
        return;
    }
    
    float newX, newY;
    Point maxInset, minInset;
    
    _container->setPosition(_container->getPosition() + _scrollDistance);
    
    if (_bounceable)
    {
        maxInset = _maxInset;
        minInset = _minInset;
    }
    else
    {
        maxInset = this->maxContainerOffset();
        minInset = this->minContainerOffset();
    }
    
    newX = _container->getPosition().x;
    newY = _container->getPosition().y;
    
    _scrollDistance     = _scrollDistance * SCROLL_DEACCEL_RATE;
    this->setContentOffset(Point(newX,newY));
    
    if ((fabsf(_scrollDistance.x) <= SCROLL_DEACCEL_DIST &&
         fabsf(_scrollDistance.y) <= SCROLL_DEACCEL_DIST) ||
        newY >= maxInset.y || newY <= minInset.y ||
        newX >= maxInset.x || newX <= minInset.x)
    {
        
        if(this->isAutoHidden)
        {
            FiniteTimeAction *faseOut;
            faseOut = FadeOut::create(0.2);
            this->barImage->runAction(faseOut);
        }

        this->unschedule(schedule_selector(CCBarScrollView::deaccelerateScrolling));
        this->relocateContainer(true);
    }

    
    
    this->updateBarPos();
}

点击事件开始和结束的处理

bool CCBarScrollView::onTouchBegan(Touch* touch, Event* event)
{
    if (!this->isVisible())
    {
        return false;
    }
    
    
    Rect frame = getViewRect();
    
    //dispatcher does not know about clipping. reject touches outside visible bounds.
    if (_touches.size() > 2 ||
        _touchMoved          ||
        !frame.containsPoint(touch->getLocation()))
    {
        CCLOG("outside visible bounds.");
        return false;
    }
    
    if (std::find(_touches.begin(), _touches.end(), touch) == _touches.end())
    {
        _touches.push_back(touch);
        //        CCLOG("_touches.push_back");
    }
    
    if (_touches.size() == 1)
    { // scrolling
        _touchPoint     = this->convertTouchToNodeSpace(touch);
        _touchMoved     = false;
        _dragging     = true; //dragging started
        _scrollDistance = Point(0.0f, 0.0f);
        _touchLength    = 0.0f;
        
        if(isAutoHidden)
        {
            FiniteTimeAction *faseIn;
            faseIn = FadeIn::create(0.2);
            this->barImage->setVisible(true);
            this->barImage->setOpacity(0);
            this->barImage->runAction(faseIn);
        }
        
        //        CCLOG("scrolling");
    }
    else if (_touches.size() == 2)
    {
        _touchPoint = (this->convertTouchToNodeSpace(_touches[0]).getMidpoint(
                                                                              this->convertTouchToNodeSpace(_touches[1])));
        
        _touchLength = _container->convertTouchToNodeSpace(_touches[0]).getDistance(
                                                                                    _container->convertTouchToNodeSpace(_touches[1]));
        
        _dragging  = false;
        this->barImage->setVisible(false);
        //        CCLOG("_dragging");
    }
    return true;
}

void CCBarScrollView::onTouchEnded(Touch* touch, Event* event)
{
    if (!this->isVisible())
    {
        return;
    }
    
    auto touchIter = std::find(_touches.begin(), _touches.end(), touch);
    bool isDeaccelerateScrolling = false;
    if (touchIter != _touches.end())
    {
        if (_touches.size() == 1 && _touchMoved)
        {
            isDeaccelerateScrolling = true;
            this->schedule(schedule_selector(CCBarScrollView::deaccelerateScrolling));
        }
        _touches.erase(touchIter);
    }
    
    if (_touches.size() == 0)
    {
        if(this->isAutoHidden && isDeaccelerateScrolling == false)
        {
            FiniteTimeAction *faseOut;
            faseOut = FadeOut::create(0.2);
            this->barImage->runAction(faseOut);
        }
        _dragging = false;
        _touchMoved = false;
    }
}