cocos2dx[2.x](6)--滑塊控件CCControlSlider

【嘮叨】

滑塊類CCControlSlider繼承於控件類CCControl。

控件類CCControl主要向子類提供了一系列的控件觸發事件。當子控件觸發相關的事件後，就會執行相關的控件事件回調函數。這與之前講的CCMenu中的菜單按鈕回調是類似的。

控件類CCControl主要有三個子類：

    （1）開關控件CCControlSwitch

    （2）滑塊控件CCControlSlider

    （3）按鈕控件CCControlButton

本節講的是其子類其中之一：滑塊類CCControlSlider。

【Demo下載】

https://github.com/shahdza/Cocos_LearningTest/tree/master/demo_%E6%BB%91%E5%9D%97%E6%8E%A7%E4%BB%B6CCControlSlider

【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提供了以下控件事件
CCControlEventValueChanged //當控件的值發生改變時觸發。

2、綁定控件事件的方法

    //綁定控件事件
    //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、需要引用一下的文件及命名空間

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

4、常用操作

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、引入文件和命名空間

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

3、在HelloWorld.h中聲明控件回調函數、顯示滑塊數值的Label

    CCLabelTTF* label; //顯示滑塊數值的Label

    void valueChanged(CCObject* sender, CCControlEvent controlEvent); //當值改變時觸發的控件事件

4、在HelloWorld.cpp中創建滑塊控件，並綁定ValueChanged控件事件

//創建顯示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、實現控件回調函數

    //事件響應函數，值改變時，修改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，也可以設置其他的值，要看是什麼用途了。
    轉載網址：http://blog.51cto.com/shahdza/1542634