cocos2d详细 类之CCControlSlider

 滑块类CCControlSlider继承于控件类CCControl。

    控件类CCControl主要向子类提供了一系列的控件触发事件。当子控件触发相关的事件后，就会执行相关的控件事件回调函数。这与之前讲的CCMenu中的菜单按钮回调是类似的。

    控件类CCControl主要有三个子类：

        （1）开关控件CCControlSwitch

        （2）滑块控件CCControlSlider

        （3）按钮控件CCControlButton

    本节讲的是其子类其中之一：滑块类CCControlSlider。

【3.x】

    （1）去掉 “CC”

    （2）对象类 CCObject 改为 Ref

    （3）CCControlEvent 改为强枚举 Control::EventType

    （4）CCControlEventValueChanged 改为 Control::EventType::VALUE_CHANGED

    （5）按钮事件回调依旧为 cccontrol_selector ，没有使用 CC_CALLBACK_2

    （6）其他地方几乎无变化。

---

【CCControlSlider】

    滑块控件CCControlSlider，应该也是很常见的UI控件，想必大家都不陌生。

    比如调节音量的大小：

1、CCControl主要向滑块类CCControlSlider提供了以下控件事件

1 2 3

//     CCControlEventValueChanged //当控件的值发生改变时触发。 //

2、绑定控件事件的方法

1 2 3 4 5 6 7 8 9

//     //绑定控件事件     //addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::valueChanged), CCControlEventValueChanged);     void addTargetWithActionForControlEvents(CCObject* target, SEL_CCControlHandler action, CCControlEvent controlEvents);            //删除控件事件     //removeTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::valueChanged), CCControlEventValueChanged);     void removeTargetWithActionForControlEvents(CCObject* target, SEL_CCControlHandler action, CCControlEvent controlEvents); //

3、需要引用一下的文件及命名空间

1 2 3 4

//     #include "cocos-ext.h"              //包含cocos-ext.h头文件     using namespace cocos2d::extension; //引用cocos2d::extension命名空间 //

4、常用操作

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

// class CCControlSlider: public CCControl { /**  *     创建CCControlSlider的两种方式  */     //用CCSprite精灵创建滑块控件     //create("滑块背景图", "划过区域图", "滑块图");     static CCControlSlider* create(CCSprite* backgroundSprite, CCSprite* pogressSprite, CCSprite* thumbSprite);       //直接用图片资源名创建，省去了创建精灵的步骤     //实际上，在其内部依旧是调用上面的create函数创建CCSprite精灵     //create("滑块背景图", "划过区域图", "滑块图");     static CCControlSlider* create(const char* bgFile, const char* progressFile, const char* thumbFile);     /**  *     属性设置  *     setValue ,   *     setMinimumValue , setMaximumValue  *     setMinimumAllowedValue , setMaximumAllowedValue ,  *     setBackgroundSprite , setProgressSprite , setThumbSprite  */     float setValue() | getValue(); //设置当前滑块的值     float setMinimumValue() | getMinimumValue(); //设置滑块最小值     float setMaximumValue() | getMaximumValue(); //设置滑块最大值     float setMinimumAllowedValue() |　setMinimumAllowedValue(); //设置允许滑动的最小值     float setMaximumAllowedValue() | setMaximumAllowedValue(); //设置允许滑动的最大值         //设置滑块的背景图、划过区域图、滑块图     //CC_SYNTHESIZE_RETAIN为宏定义：除了创建了set/get以外，还用了retain来保留内存资源。     CC_SYNTHESIZE_RETAIN(CCSprite*, m_backgroundSprite, BackgroundSprite);     CC_SYNTHESIZE_RETAIN(CCSprite*, m_progressSprite, ProgressSprite);     CC_SYNTHESIZE_RETAIN(CCSprite*, m_thumbSprite, ThumbSprite); }; //

5、滑块的值、最值、允许最值解析

    假设滑块的属性值设置如下：

        Value = 40;

        MinimumValue = 0;         MaximumValue = 100;

        MinimumAllowedValue = 20; MaximumAllowedValue = 80;

    那么滑块只能在Allowed的最小值和最大值之间滑动，即[20,80]的数值之间滑动。

---

【代码实战】

1、资源图片

            为何上传的PNG图片好像在博文上显示就变样了呢？说好的透明背景呢？

    

2、引入文件和命名空间

1 2 3 4

//     #include "cocos-ext.h"              //包含cocos-ext.h头文件     using namespace cocos2d::extension; //引用cocos2d::extension命名空间 //

3、在HelloWorld.h中声明控件回调函数、显示滑块数值的Label

1 2 3 4 5

//     CCLabelTTF* label; //显示滑块数值的Label       void valueChanged(CCObject* sender, CCControlEvent controlEvent); //当值改变时触发的控件事件 //

4、在HelloWorld.cpp中创建滑块控件，并绑定ValueChanged控件事件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

// //创建显示Slider值的标签     label = CCLabelTTF::create("50.0", "Arial", 32);     label->setPosition( midPos + ccp(0, 100) );     this->addChild(label);     //创建滑块控件CCControlSlider     CCControlSlider* slider = CCControlSlider::create("sliderTrack.png", "sliderProgress.png", "sliderThumb.png");     slider->setPosition( midPos );     this->addChild(slider);       //设置属性     slider->setMinimumValue(0);         //设置滑块最小值     slider->setMaximumValue(100);       //设置滑块最大值     slider->setMinimumAllowedValue(20); //设置允许滑动的最小值     slider->setMaximumAllowedValue(80); //设置允许滑动的最大值     slider->setValue(50);               //设置当前滑块的值       //绑定事件，当滑块的值改变时触发控件事件     slider->addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::valueChanged), CCControlEventValueChanged); //

5、实现控件回调函数

1 2 3 4 5 6 7 8 9 10 11 12 13 14

//     //事件响应函数，值改变时，修改label标签的内容     void HelloWorld::valueChanged(CCObject* sender, CCControlEvent controlEvent)     {         //获取事件委托者：滑块控制CCControlSlider         CCControlSlider* slider = (CCControlSlider*)sender;           //修改label的值，显示滑块的当前值         //sprintf为C语言中的字符串格式转换，这里将float转换为字符串         char str[50];         sprintf(str, "%f", slider->getValue() );  //字符串格式转换         label->setString(str);     } //

6、运行结果

7、分析与总结

        滑块只能在Allowed的最值之间滑动。

        当然最值不一定要设置0~100，也可以设置其他的值，要看是什么用途了。