有CCScrollView滚动视图中添加滚动条示例

Question

就像手机QQ或者微信聊天界面似的左边那条滚动条，当你滑动页面的时候滚动条就显示在当前文本的具体位置，不滑动的时候滚动条就消失，滚动条还随着文本内容的多少而发生长短变化

Answer 1

 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);
    }
}

这段代码是否可以实现？