cocos2dx基礎篇(10)——開關按鈕CCControlSwitch

【嘮叨】

    開關類CCControlSwitch繼承于控件類CCControl。

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

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

        （1）開關控件CCControlSwitch 

        （2）滑塊控件CCControlSlider 

        （3）按鈕控件CCControlButton 

    本節講的是其子類其中之一：開關類CCControlSwitch。

【Demo下載】

    https://github.com/shahdza/Cocos_LearningTest/tree/master/demo_%E5%BC%80%E5%85%B3%E6%8C%89%E9%92%AECCControlSwitch 

【3.x】

    （1）去掉 “CC”

    （2）對象類 CCObject 改為 Ref

    （3）標簽類 LabelTTF 改為 Label

    （4）CCControlEvent 改為強枚舉 Control::EventType

    （5）CCControlEventValueChanged 改為 Control::EventType::VALUE_CHANGED

    （6）按鈕事件回調依舊為 cccontrol_selector ，沒有使用 CC_CALLBACK_2

    （7）關于創建函數create，必須引起注意！

        > 這是3.x的一個BUG。

//
	//v3.x會報錯，必須指定onLabel、offLabel。不能為nullptr
	create(Sprite* maskSprite, Sprite* onSprite, Sprite* offSprite, Sprite* thumbSprite);

	//v3.x版本中，必須使用這個來創建
	create(Sprite* maskSprite, Sprite* onSprite, Sprite* offSprite, Sprite* thumbSprite, Label* onLabel, Label* offLabel);
//

    （9）其他地方幾乎無變化。

【CCControlSwitch】

    開關控件CCControlSwitch，應該也是很常見的UI控件，想必大家都不陌生。比如聲音開關的控制，一些功能的啟用與禁用都需要用到開關控件。

1、CCControl主要向開關類CCControlSwitch提供了以下控件事件

//
	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 CCControlSwitch : public CCControl
{
/**
 *		創建CCControlSwitch的兩種方式
 */
	//CCControlSwitch::create("底圖","打開狀態圖","關閉狀態圖","撥動開關圖");
	//v3.x會報錯，必須指定onLabel、offLabel
	static CCControlSwitch* create(CCSprite *maskSprite, CCSprite * onSprite, CCSprite * offSprite, CCSprite * thumbSprite);

	//CCControlSwitch::create("底圖","打開狀態圖","關閉狀態圖","撥動開關圖","打開狀態文字","關閉狀態文字");
	static CCControlSwitch* create(CCSprite *maskSprite, CCSprite * onSprite, CCSprite * offSprite, CCSprite * thumbSprite, CCLabelTTF* onLabel, CCLabelTTF* offLabel);


/**
 *		設置開關狀態
 *		setOn , isOn , hasMoved , setEnabled
 */
	void setOn(bool isOn);                 //設置開關狀態
	void setOn(bool isOn, bool animated);  //設置開關狀態
	bool isOn(void) { return m_bOn; }      //獲取開關狀態
	bool hasMoved() { return m_bMoved; }   //獲取當前開關是否為手動撥動開關（區別于點擊撥動）
	virtual void setEnabled(bool enabled); //設置開關是否能操作

};
//

【代碼實戰】

1、資源圖片

    第一組開關：

    第二組開關：

2、引入文件和命名空間

//
	#include "cocos-ext.h"
	using namespace cocos2d::extension;
//

3、在HelloWorld.h中聲明控件回調函數、顯示開關的狀態Label

//
	CCLabelTTF* label;  //用于顯示開關控件的狀態ON/OFF

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

4、在HelloWorld.cpp中分別創建兩種方式的開關控件

//
//第一組開關
	CCSprite* bg1 = CCSprite::create("ControlSwith_bg.png");
	CCSprite* on1 = CCSprite::create("ControlSwith_on.png");
	CCSprite* off1 = CCSprite::create("ControlSwith_off.png");
	CCSprite* thumb1 = CCSprite::create("ControlSwith_thumb.png");
	CCControlSwitch* controlSwitch2 = CCControlSwitch::create(bg1, on1, off1, thumb1);
	controlSwitch2->setPosition( midPos - ccp(100, 100) );
	this->addChild(controlSwitch2);

	//綁定事件，當開關控件的值發生改變時觸發事件。
	controlSwitch2->addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::valueChanged), CCControlEventValueChanged);


//第二組開關
	CCSprite* bg2 = CCSprite::create("switch-mask.png");
	CCSprite* on2 = CCSprite::create("switch-off.png");
	CCSprite* off2 = CCSprite::create("switch-on.png");
	CCSprite* thumb2 = CCSprite::create("switch-thumb.png");
	CCLabelTTF* TTFon = CCLabelTTF::create("on", "Arial", 20);
	CCLabelTTF* TTFoff = CCLabelTTF::create("off", "Arial", 20);
	CCControlSwitch* controlSwitch3 = CCControlSwitch::create(bg2, on2, off2, thumb2, TTFon, TTFoff);
	controlSwitch3->setPosition( midPos - ccp(-100, 100) );
	this->addChild(controlSwitch3);
//

5、實現控件回調函數

//
	//事件響應函數，值改變時，修改label標簽的內容
	void HelloWorld::valueChanged(CCObject* sender, CCControlEvent controlEvent)
	{
	//獲取事件的傳遞者CCControlSwitch
		CCControlSwitch* controlSwitch = (CCControlSwitch*)sender;
		
	//根據開關控件的狀態，設置label標簽的內容
		if( controlSwitch->isOn() ) 
		{
			label->setString("ON");
		}
		else 
		{
			label->setString("OFF");
		}
	}
//

6、運行結果

7、分析與總結

    （1）是不是感覺第一組的按鈕有點奇怪？開關和底圖沒有完全覆蓋，另外開狀態的圖片和關狀態的圖片也沒有完全消失。呵呵

    （2）第二組開關按鈕的效果比較好，所以你應該明白為啥我選了兩組不同的圖片來創建兩種開關控件了吧？