滑动条ControlSlider的使用

在游戏的设置界面，我们经常会看到有可以设置背景音乐和音效大小的滑动条。

那么在这篇博客中，我们就来学习滑动条ControlSlider的使用。

先来看看ControlSlider的源码：

滑动条控件的组成分为三部分——互动的背景图，滑块，划过区域的图。看下他的关键源码：

ControlSlider.cpp

 /* 

 继承自Control控件类，这个类有三个子类——ControlSlider(滑动条)，ControlButton（按钮类，这个在后面会用到），ControlSwitch（开关类）。Control类为它的子类提供了一系列的触摸响应绑定的函数。具体参考Control的源码。

 */

class ControlSlider: public Control

{

    public:

    /** 通过一个背景图片，划过区域，滑块图片名称创建一个滑动条。

     * Creates slider with a background filename, a progress filename and a

     * thumb image filename.

     */

    static ControlSlider* create(const char* bgFile, const char* progressFile, const char* thumbFile);

 

    /** 通过一个背景图片精灵，划过区域精灵，滑块图片精灵创建一个滑动条

     * Creates a slider with a given background sprite and a progress bar and a

     * thumb item.

     *

     * @see initWithSprites

     */

    static ControlSlider* create(Sprite * backgroundSprite, Sprite* pogressSprite, Sprite* thumbSprite);

    // 以上两个方法仅仅是参数不同，但是第一个其实在方法内部也是使用的精灵实现的

 

    /**

     * Creates slider with a background filename, a progress filename, a thumb

     * and a selected thumb image filename.

     */

    static ControlSlider* create(const char* bgFile, const char* progressFile, const char* thumbFile,

            const char* selectedThumbSpriteFile);

 

    /** 多了一个选中的滑块的图片，下面方法一样

     * Creates a slider with a given background sprite and a progress bar, a thumb

     * and a selected thumb .

     *

     * @see initWithSprites

     */

    static ControlSlider* create(Sprite * backgroundSprite, Sprite* pogressSprite, Sprite* thumbSprite,

            Sprite* selectedThumbSprite);

    /**

     * @js ctor

     */

    ControlSlider();

    /**

     * @js NA

     * @lua NA

     */

    virtual ~ControlSlider();

 

    /** 初始化一个Slider使用参数中的精灵，各个参数的意义见下面的注释

    * Initializes a slider with a background sprite, a progress bar and a thumb

    * item.

    *

    * @param backgroundSprite          Sprite, that is used as a background.

    * @param progressSprite            Sprite, that is used as a progress bar.

    * @param thumbSprite               Sprite, that is used as a thumb.

    */

    virtual bool initWithSprites(Sprite * backgroundSprite, Sprite* progressSprite, Sprite* thumbSprite);

 

    /** 

    * Initializes a slider with a background sprite, a progress bar and a thumb

    * item.

    *

    * @param backgroundSprite          Sprite, that is used as a background.

    * @param progressSprite            Sprite, that is used as a progress bar.

    * @param thumbSprite               Sprite, that is used as a thumb.

    * @param selectedThumbSprite       Sprite, that is used as a selected thumb.

    */

    virtual bool initWithSprites(Sprite * backgroundSprite, Sprite* progressSprite, Sprite* thumbSprite,

            Sprite* selectedThumbSprite);

 

    virtual void needsLayout();

    // 常用的API

    virtual void setMaximumValue(float val); // 设置滑动的最大值

    virtual void setEnabled(bool enabled);   // 设置能否响应

    virtual bool isTouchInside(Touch * touch); 

    Point locationFromTouch(Touch* touch);

    virtual void setValue(float val);     // 手动设置滑动条的值

    virtual void setMinimumValue(float val); // 设置最小值

    ``````

    // 更多方法请自查文档和源码 

};

他的父类Control提供了一个绑定事件的函数如下：


/**

     * Adds a target and action for a particular event to an internal dispatch 

     * table.

     * The action message may optionnaly include the sender and the event as 

     * parameters, in that order.

     * When you call this method, target is not retained.

     *

     * @param target The target object?athat is, the object to which the action 

     * message is sent. It cannot be nil. The target is not retained.

     * @param action A selector identifying an action message. It cannot be NULL.

     * @param controlEvent A control event for which the action message is sent.

     * See "CCControlEvent" for constants.

*/

void addTargetWithActionForControlEvent(Ref* target, Handler action, EventType controlEvent);

/** Kinds of possible events for the control objects. */

enum class EventType

{

       TOUCH_DOWN           = 1 << 0,    // A touch-down event in the control.

       DRAG_INSIDE          = 1 << 1,    // An event where a finger is dragged inside the bounds of the control.

       DRAG_OUTSIDE         = 1 << 2,    // An event where a finger is dragged just outside the bounds of the control.

       DRAG_ENTER           = 1 << 3,    // An event where a finger is dragged into the bounds of the control.

       DRAG_EXIT            = 1 << 4,    // An event where a finger is dragged from within a control to outside its bounds.

       TOUCH_UP_INSIDE      = 1 << 5,    // A touch-up event in the control where the finger is inside the bounds of the control.

       TOUCH_UP_OUTSIDE     = 1 << 6,    // A touch-up event in the control where the finger is outside the bounds of the control.

       TOUCH_CANCEL         = 1 << 7,    // A system event canceling the current touches for the control.

       VALUE_CHANGED        = 1 << 8      // A touch dragging or otherwise manipulating a control, causing it to emit a series of different values.

};

其中Eventype是Control的强枚举类型:这里需要使用的是VALUE_CHANGE数据变化。




我们现在来创建一个ControlSlider控件，并注册其将监听事件：

 //滑动按钮
    auto musicThumbBtn=Sprite::createWithSpriteFrameName("ThumbBtn.png");
    //滑动条背景
    auto musicBgBar=Sprite::createWithSpriteFrameName("bgBar.png");
    //滑动条前景
    auto musicProgressBar=Sprite::createWithSpriteFrameName("progressBar.png");
    //ControlSlider 滑动条 在头文件#include "cocos-ext.h"和命名空间USING_NS_CC_EXT;中
    auto musicSlider=ControlSlider::create(musicBgBar, musicProgressBar, musicThumbBtn);
    //设置滑动监听事件
    musicSlider->addTargetWithActionForControlEvents(this, cccontrol_selector(SetLayer::sliderChangerCallBack), Control::EventType::VALUE_CHANGED);//滑动时回调
    musicSlider->setPosition(760, 457);
    musicSlider->setMinimumValue(0.0);//最小滑动值
    musicSlider->setMaximumValue(100.0);//最大滑动值
    musicSlider->setMinimumAllowedValue(0.0);//实际最小滑动值
    musicSlider->setMaximumAllowedValue(100.0);//实际最大滑动值

  musicSlider->setValue(50);//当前值
    this->addChild(musicSlider)；

同过以上的代码，我们就已经创建好一个滑动条，并添加了滑动监听事件，把它叫到了父节点中，现在我们来写滑动条的回调函数sliderChangerCallBack(Ref* ref,Control::EventType type)：

滑动条的回调函数有两个参数，一个是Ref*类型，表示哪个滑动条被改变，第二个参数Control::EventType表示事件类型

void SetLayer::sliderChangerCallBack(Ref* ref,Control::EventType type)
{

//将ref转换为ControlSlider类型
    auto contrloSlider=(ControlSlider*)ref;

//获取当前滑动条的值
    auto value=contrloSlider->getValue();

.........
   
}

在回调函数中获取滑动条改变后的值并进行相关操作。