滑动条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();

.........
   
}

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