cocos2dx基礎篇(13)——按鈕控件CCControlButton

【嘮叨】

    按鈕類CCControlButton繼承于控件類CCControl。

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

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

        （1）開關控件CCControlSwitch 

        （2）滑塊控件CCControlSlider 

        （3）按鈕控件CCControlButton 

    本節講的是其子類其中之一：按鈕類CCControlButton。

【致謝】

    http://gl.paea.cn/contents/22933f46650c8213.html

【Demo下載】

    https://github.com/shahdza/Cocos_LearningTest/tree/master/demo_%E6%8C%89%E9%92%AE%E6%8E%A7%E4%BB%B6CCControlButton 

【3.x】

    （1）去掉 “CC”

    （2）對象類 CCObject 改為 Ref

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

    （4）按鈕狀態 CCControlState 改為強枚舉 Control::State

//
	NORMAL            //正常
	HIGH_LIGHTED      //高亮（即在內部觸摸狀態下）
	DISABLED          //禁用
	SELECTED          //選中
//

    （5）按鈕事件 CCControlEvent 改為強枚舉 Control::EventType

//
	TOUCH_DOWN        //剛剛開始觸摸按鈕時
	DRAG_INSIDE       //在內部拖動時（保持觸摸狀態下）
	DRAG_OUTSIDE      //在外部拖動時（保持觸摸狀態下）
	DRAG_ENTER        //拖動剛進入內部時（保持觸摸狀態下）
	DRAG_EXIT         //拖動剛離開內部時（保持觸摸狀態下）
	TOUCH_UP_INSIDE   //在內部抬起手指（保持觸摸狀態下）
	TOUCH_UP_OUTSIDE  //在外部抬起手指（保持觸摸狀態下）
	TOUCH_CANCEL      //取消觸點
//

    （6）其他變化不大。

【CCControlButton】

    按鈕控件CCControlButton，想必大家對這個再熟悉不過了吧？每個游戲基本都會用到按鈕。

    一個按鈕不僅有幾種不同的按鈕狀態，而且還有一些按鈕事件。另外按鈕控件CCControlButton使用的背景圖片是點九圖CCScale9Sprite，可以使得按鈕在變大的情況下，盡量保持棱角不失真。

1、按鈕狀態CCControlState

//
	CCControlStateNormal            //正常
	CCControlStateHighlighted       //高亮（即在內部觸摸狀態下）
	CCControlStateDisabled          //禁用
	CCControlStateSelected          //選中
//

2、按鈕事件CCControlEvent

//
	CCControlEventTouchDown                 //剛剛開始觸摸按鈕時
	CCControlEventTouchDragInside           //在內部拖動時（保持觸摸狀態下）
	CCControlEventTouchDragOutside          //在外部拖動時（保持觸摸狀態下）
	CCControlEventTouchDragEnter            //拖動剛進入內部時（保持觸摸狀態下）
	CCControlEventTouchDragExit             //拖動剛離開內部時（保持觸摸狀態下）
	CCControlEventTouchUpInside             //在內部抬起手指（保持觸摸狀態下）
	CCControlEventTouchUpOutside            //在外部抬起手指（保持觸摸狀態下）
	CCControlEventTouchCancel               //取消觸點
//

3、綁定按鈕事件的方法

//
	//綁定控件事件
	addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::touchDownAction), CCControlEventTouchDown);
	void addTargetWithActionForControlEvents(CCObject* target, SEL_CCControlHandler action, CCControlEvent controlEvents);
	  
	//刪除控件事件
	//removeTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::touchDownAction), CCControlEventTouchDown);
	void removeTargetWithActionForControlEvents(CCObject* target, SEL_CCControlHandler action, CCControlEvent controlEvents);
//

4、需要引用的頭文件及命名空間

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

5、常用操作如下

//
class CCControlButton : public CCControl
{
/**
 *		創建CCControlButton的三種方法
 */
	//使用點九圖CCScale9Sprite，按鈕中不帶標簽CCLabel
	static CCControlButton* create(CCScale9Sprite* sprite);

	//使用標簽label，可以是CCLabelTTF、CCLabelBMFont
	static CCControlButton* create(CCNode* label, CCScale9Sprite* backgroundSprite);

	//title：標簽內容
	//fontName：字體資源，如 "Arial"
	//fontSize：字體大小，默認 12
	//內部創建的標簽為CCLabelTTF
	static CCControlButton* create(std::string title, const char* fontName, float fontSize);


/**
 *		屬性設置1（在當前CCControlState下）
 *		getCurrentTitle , getCurrentTitleColor ,
 *		TitleLabel , BackgroundSprite , PreferredSize
 */
	//當前顯示的標簽內容，只讀getCurrentTitle
	CC_SYNTHESIZE_READONLY(CCString*, m_currentTitle, CurrentTitle);

	//當前顯示的標簽內容顏色，只讀getCurrentTitleColor
	CC_SYNTHESIZE_READONLY_PASS_BY_REF(ccColor3B, m_currentTitleColor, CurrentTitleColor);

	//設置當前CCControlState下的標簽，set/get
	CC_SYNTHESIZE_RETAIN(CCNode*, m_titleLabel, TitleLabel);

	//設置當前CCControlState下的背景精靈，set/get
	CC_SYNTHESIZE_RETAIN(CCScale9Sprite*, m_backgroundSprite, BackgroundSprite);

	//設置按鈕大小，若標簽label大小大于按鈕，將自動擴展，set/get。
	//不過經過我的測試：設置了，反而按鈕大小被固定了。沒有按照label的大小進行自動伸展了。
	CC_PROPERTY(CCSize, m_preferredSize, PreferredSize);


/**
 *		屬性設置2（在指定CCControlState下）
 *		setTitleLabelForState , setTitleForState , setTitleColorForState , 
 *		setTitleTTFForState , setTitleTTFSizeForState , 
 *		setTitleBMFontForState , 
 *		setBackgroundSpriteForState , setBackgroundSpriteFrameForState , getBackgroundSpriteForState
 */
	//設置在指定CCControlState下的 字體標簽
	//若未設置標簽,默認為CCButtonStateNormal狀態的字體標簽
	//字體標簽可以是CCLabelTTF、CCLabelBMFont
	virtual void setTitleLabelForState(CCNode* label, CCControlState state);
	virtual CCNode* getTitleLabelForState(CCControlState state);


	//設置在指定CCControlState下的 標簽內容
	//若未設置標簽，默認返回CCButtonStateNormal狀態的標簽內容
	virtual void setTitleForState(CCString* title, CCControlState state);
	virtual CCString* getTitleForState(CCControlState state);


	//設置在指定CCControlState下的 標簽顏色
	virtual void setTitleColorForState(ccColor3B color, CCControlState state);
	virtual const ccColor3B getTitleColorForState(CCControlState state);

//###############################################################################

	//設置在指定CCControlState下的 標簽為CCLabelTTF
	//fntFile為字體資源名，如 "Arial"
	virtual void setTitleTTFForState(const char* fntFile, CCControlState state);
	virtual const char* getTitleTTFForState(CCControlState state);


	//設置在指定CCControlState下的 CCLabelTTF標簽的字體大小
	virtual void setTitleTTFSizeForState(float size, CCControlState state);
	virtual float getTitleTTFSizeForState(CCControlState state);

//###############################################################################

	//設置在指定CCControlState下的 標簽為CCLabelBMFont
	//fntFile為字體資源名，如 *.fnt
	virtual void setTitleBMFontForState(const char* fntFile, CCControlState state);
	virtual const char * getTitleBMFontForState(CCControlState state);

//###############################################################################

	//使用點九圖CCScale9Sprite，設置在指定CCControlState下的 背景精靈
	virtual void setBackgroundSpriteForState(CCScale9Sprite* sprite, CCControlState state);


	//使用精靈幀CCSpriteFrame，設置在指定CCControlState下的 背景精靈
	//其實在內部實現的代碼，實際上是利用精靈幀spriteFrame創建了點九圖CCScale9Sprite作為背景精靈
	virtual void setBackgroundSpriteFrameForState(CCSpriteFrame* spriteFrame, CCControlState state);


	//獲取在指定CCControlState下的 背景圖
	virtual CCScale9Sprite* getBackgroundSpriteForState(CCControlState state);


/**
 *		繼承于父類
 */
	virtual void setEnabled(bool enabled);     //是否啟用
	virtual void setSelected(bool enabled);    //是否選中
	virtual void setHighlighted(bool enabled); //是否高亮
};
//

【代碼實戰】

    代碼來源于cocos2dx的官方項目TestCpp中。

1、按鈕背景（正常、高亮）

2、引入頭文件和命名空間

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

3、在HelloWorld.h中聲明按鈕事件的回調函數、顯示按鈕狀態的Label

//
	CCLabelTTF* displayLabel; //顯示按鈕狀態的label
	void touchDownAction(CCObject* sender, CCControlEvent controlEvent);        //剛剛開始觸摸按鈕時
	void touchDragInsideAction(CCObject* sender, CCControlEvent controlEvent);  //在內部拖動時（保持觸摸狀態下）
	void touchDragOutsideAction(CCObject* sender, CCControlEvent controlEvent); //在外部拖動時（保持觸摸狀態下）
	void touchDragEnterAction(CCObject* sender, CCControlEvent controlEvent);   //拖動剛進入內部時（保持觸摸狀態下）
	void touchDragExitAction(CCObject* sender, CCControlEvent controlEvent);    //拖動剛離開內部時（保持觸摸狀態下）
	void touchUpInsideAction(CCObject* sender, CCControlEvent controlEvent);    //在內部抬起手指（保持觸摸狀態下）
	void touchUpOutsideAction(CCObject* sender, CCControlEvent controlEvent);   //在外部抬起手指（保持觸摸狀態下）
	void touchCancelAction(CCObject* sender, CCControlEvent controlEvent);      //取消觸點
//

4、在HelloWorld.cpp的init中創建按鈕，并綁定按鈕事件

//
	bool HelloWorld::init()
	{
		if ( !CCLayer::init() )
		{
			return false;
		}

	//獲取可視區域尺寸大小
		CCSize mysize = CCDirector::sharedDirector()->getVisibleSize();
	//獲取可視區域的原點位置
		CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();
	//屏幕正中心位置
		CCPoint midPos = ccp(mysize.width/2, mysize.height/2);


	//顯示按鈕狀態的標簽displayLabel
		displayLabel = CCLabelTTF::create("No Event", "Marker Felt", 32);
		displayLabel->setPosition( midPos + ccp(0, 100) );
		this->addChild(displayLabel);


	//按鈕中的背景精靈CCScale9Sprite
		CCScale9Sprite* bgNormal = CCScale9Sprite::create("btnNormal.png");           //正常背景
		CCScale9Sprite* bgHighlighted = CCScale9Sprite::create("btnHighlighted.png"); //高亮背景

	//按鈕中的標簽CCLabelTTF
		CCLabelTTF* titleNormal = CCLabelTTF::create("Button is Normal !", "Marker Felt", 30);
		CCLabelTTF* titleHighlighted = CCLabelTTF::create("Button is Highlighted !", "Marker Felt", 30);


	//創建按鈕CCControlButton
		CCControlButton* btn = CCControlButton::create(titleNormal, bgNormal);
		btn->setPosition( midPos );
		this->addChild(btn);

	//設置按鈕高亮時的狀態
		btn->setTitleLabelForState(titleHighlighted, CCControlStateHighlighted);    //高亮標簽
		btn->setTitleColorForState(ccRED, CCControlStateHighlighted);               //紅色
		btn->setBackgroundSpriteForState(bgHighlighted, CCControlStateHighlighted); //高亮背景

		//寫了這句話，反而大小被固定了。沒有按照label的大小進行自動伸展了
		//btn->setPreferredSize( CCSizeMake(120,40) );

	//綁定事件，用于顯示按鈕狀態
		btn->addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::touchDownAction), CCControlEventTouchDown);               //剛剛開始觸摸按鈕時
		btn->addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::touchDragInsideAction), CCControlEventTouchDragInside);   //在內部拖動時（保持觸摸狀態下）
		btn->addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::touchDragOutsideAction), CCControlEventTouchDragOutside); //在外部拖動時（保持觸摸狀態下）
		btn->addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::touchDragEnterAction), CCControlEventTouchDragEnter);     //拖動剛進入內部時（保持觸摸狀態下）
		btn->addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::touchDragExitAction), CCControlEventTouchDragExit);       //拖動剛離開內部時（保持觸摸狀態下）
		btn->addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::touchUpInsideAction), CCControlEventTouchUpInside);       //在內部抬起手指（保持觸摸狀態下）
		btn->addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::touchUpOutsideAction), CCControlEventTouchUpOutside);     //在外部抬起手指（保持觸摸狀態下）
		btn->addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::touchCancelAction), CCControlEventTouchCancel);           //取消觸點

		return true;
	}
//

5、實現按鈕事件的回調函數

//
	//剛剛開始觸摸按鈕時
	void HelloWorld::touchDownAction(CCObject *senderz, CCControlEvent controlEvent)
	{
		displayLabel->setString("Touch Down");
	}

	//在內部拖動時（保持觸摸狀態下）
	void HelloWorld::touchDragInsideAction(CCObject *sender, CCControlEvent controlEvent)
	{
		displayLabel->setString("Drag Inside");
	}

	//在外部拖動時（保持觸摸狀態下）
	void HelloWorld::touchDragOutsideAction(CCObject *sender, CCControlEvent controlEvent)
	{
		displayLabel->setString("Drag Outside");
	}

	//拖動剛進入內部時（保持觸摸狀態下）
	void HelloWorld::touchDragEnterAction(CCObject *sender, CCControlEvent controlEvent)
	{
		displayLabel->setString("Drag Enter");
	}

	//拖動剛離開內部時（保持觸摸狀態下）
	void HelloWorld::touchDragExitAction(CCObject *sender, CCControlEvent controlEvent)
	{
		displayLabel->setString("Drag Exit");
	}

	//在內部抬起手指（保持觸摸狀態下）
	void HelloWorld::touchUpInsideAction(CCObject *sender, CCControlEvent controlEvent)
	{
		displayLabel->setString("Touch Up Inside.");
	}

	//在外部抬起手指（保持觸摸狀態下）
	void HelloWorld::touchUpOutsideAction(CCObject *sender, CCControlEvent controlEvent)
	{
		displayLabel->setString("Touch Up Outside.");
	}

	//取消所有觸摸
	void HelloWorld::touchCancelAction(CCObject *sender, CCControlEvent controlEvent)
	{
		displayLabel->setString("Touch Cancel");
	}
//

6、運行結果

7、分析與總結

    （1）本來一個這么小的按鈕圖片，這么變這么大了呢？這是因為當標簽CCLabelTTF的大小大于按鈕大小時，按鈕就會自動進行伸展。

    （2）我明明設置了高亮狀態下，標簽為titleHighlighted，且其標簽內容應該顯示“Button is Highlighted ! ”才對呀，為什么還是“Button is Normal”？。。。好吧，這個問題我也不知道。不過字體顏色，和按鈕的背景精靈圖確實是換掉了。

    （3）至于按鈕事件：

        CCControlEventTouchDragEnter     //拖動剛進入內部時（保持觸摸狀態下）

        CCControlEventTouchDragExit      //拖動剛離開內部時（保持觸摸狀態下）

        不知道大家有沒有觀察到呢？因為只有在正好進入或離開按鈕內部時才看得到效果，手一抖就變成DragInside或DragOutside了。