COCOS學習筆記--複選框CheckBox及其控件屬性

一.Checkbox介紹

遊戲開發中有時我們會用到CheckBox，CheckBox就是複選框，大家應該都見過複選框，它有兩個狀態，一個勾選態，一個非勾選態，我們可以通過CheckBox在這兩個狀態間的切換來實現一些特定的判斷功能，比如是否遊戲關閉音效等。

CheckBox也和cocos提供的其他控件一樣，我們可以在Cocos Studio中創建並設置相關屬性，在代碼工程中使用；也可以之間在代碼工程中創建使用。CheckBox類提供了對複選框的相關方法，其繼承自Widget類：

 

接下來就通過實例來看下複選框CheckBox具體是如何創建和使用的：

二.通過CocosStudio創建CheckBox控件

首先用Cocos引擎創建一個空的項目並用Cocos Studio打開。我們想要創建一個CheckBox控件，直接從左面的控件欄選擇一個複選框控件拖入到當前編輯的界面中即可。不過之前的博客中也提到過，使用這些控件時一般都是先創建一個Panel基礎容器，然後再將控件添加到基礎容器中，這樣我們在代碼中可先得到基礎容器，然後通過Panel基礎容器獲得控件並對其進行操作，這樣做是爲了方便通過控制Panel來進行遊戲適配。

 

我們可以在CheckBox控件的屬性欄中設置其相關屬性。比如背景樣式的圖片綁定，也就是複選框的樣子；還有標識樣式的圖片綁定，這是指複選框上的那個“勾”的圖片，另外也可設置複選框的默認勾選狀態。

 

在Cocos Studio中創建完CheckBox控件後，我們需要保存併發布項目，具體步驟在我之前的博客中有介紹。

 

之後用VS打開我們剛剛創建的項目並運行，就可以看到我們在Cocos Studio中場景上創建的CheckBox了：

 

可以看到CheckBox有兩個狀態，默認顯示的是勾選狀態，再點擊一下切換到非勾選狀態：

 

三.通過代碼直接創建CheckBox

除了使用Cocos Studio創建出來的CheckBox控件外，我們也可以通過create()方法直接在代碼中創建CheckBox使用，並且可以設置其相關屬性：

//通過create()方法創建checkBox 
//參數：1.複選框圖片 2.對勾圖片
auto _newCheckBox = CheckBox::create("CheckBox_Background.jpg","CheckBox_Cross.jpg");

//設置CheckBox的位置    
_newCheckBox->setPosition(Vec2(200, 200));

//設置CheckBox是否可點擊  
_newCheckBox->setTouchEnabled(false);

//獲取checkbox的選中狀態
//selected 值爲true 時 checkbox 爲選中狀態, 爲false 則不會
auto bool selected  = _newCheckBox->getSelectedState()

addChild(_newCheckBox);

四.爲CheckBox添加回調函數

CheckBox具有交互性，我們可以爲其綁定回調函數：

1.首先要添加命名空間：

using namespace cocos2d::ui;

2.然後要聲明並實現回調函數：

//聲明CheckBox回調函數
void checkBoxCallback(cocos2d::Ref * ref, cocos2d::ui::CheckBox::EventType type);

//實現CheckBox回調函數
void HelloWorld::checkBoxCallback(cocos2d::Ref * ref, CheckBox::EventType type)
{
	switch (type)
	{
		case cocos2d::ui::CheckBox::EventType::SELECTED:
			log("SELECTED!");
			break;
		case cocos2d::ui::CheckBox::EventType::UNSELECTED:
			log("UNSELECTED!");
			break;
		default:
			break;
	}
}

可以看到，其回調函數有一個EventType類型的參數，當點擊複選框時這個回調方法會被執行，同時傳來這個參數，這個參數有2種類型SELECTED和UNSELECTED，分別表示複選框的選中和未選中，注意這兩種類型爲點擊複選框後其所切換至的狀態。

3.最後通過Panel獲得CheckBox並對其綁定回調函數即可：

//獲得基礎容器panel層
auto _panel = (Layout *)rootNode->getChildByName("Panel_1");

//通過panel獲得checkbox
auto _checkBox = (CheckBox*)Helper::seekWidgetByName(_panel,"CheckBox_1");

//綁定回調函數
_checkBox->addEventListener(CC_CALLBACK_2(HelloWorld::checkBoxCallback,this));

當複選框爲勾選態，點擊後切換成非勾選態，EventType==UNSELECTED，

打印輸出如下：

 

當複選框爲非勾選態，點擊後切換成勾選態，EventType==SELECTED，

打印輸出如下：

 

 

 

以上。