COCOS學習筆記--Button類及其相關控件屬性

一.Button介紹

Button就是按鈕，Cocos中提供了Button類對按鈕進行相關的操作。我們看一下Button類繼承關係圖：

可以看到，Button是繼承自Widget類，Widget類就是控件類，我們所有的控件包括Button按鈕類、CheckBox複選框類、LoadingBar進度條類、Slider滑動條類等等都繼承自它。

Button按鈕控件一般都是在Cocos Studio中創建並編輯好相關屬性並在代碼中使用，此外也可以通過代碼控制調整其相關屬性。

二.通過CocosStudio創建Button控件

接下來我們就實際操作下看看Button按鈕控件具體是怎麼創建和使用的：

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

 

我們可以在Button控件的屬性欄中設置其相關屬性。比如背景樣式的圖片綁定，需要3張圖片，分別綁定按鈕的正常狀態、按下狀態和禁用狀態；還用按鈕上的文本顯示信息及字體大小等等。

 

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

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

 

三.通過代碼直接創建Button

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

//通過create()方法創建Button
auto _newButton = Button::create("Normal_Button.png", "Pressed_Button.png", "Disabled_Button.png");

//設置button title  
_newButton->setTitleText("NewButton");

//設置button title顏色
_newButton->setTitleColor(Color3B(100,100,100));

//設置button title字體大小  
_newButton->setTitleFontSize(35);

//設置button的位置  
_newButton->setPosition(Vec2(200, 200));

//設置按鈕是否可點擊
_newButton->setTouchEnabled(false);

四.爲Button添加觸摸事件

Button的主要作用當然是其具有點擊交互性，接下來我們就可以獲得Button並綁定其回調函數

1.使用前要添加命名空間：

using namespace cocos2d::ui;

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

//聲明Button回調函數
void buttonCallBack(Ref *ref,cocos2d::ui::Widget::TouchEventType type);

//實現Button回調函數
void HelloWorld::buttonCallBack(Ref *ref, Widget::TouchEventType type)
{
	switch (type){
		case Widget::TouchEventType::BEGAN:
			log("buttonCallBack!");
		default:
		break;
			}
}

可以看到，其回調函數有一個TouchEventType類型的參數，當觸發事件發生時這個回調方法會被執行，同時傳來這個參數，這個參數表示的就是此次觸發事件的類型，一共有4種：BEGAN、CANCELED、ENDED、MOVED。

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

//獲得Panel
auto _panel = (Layout *)rootNode->getChildByName("Panel_1");

//獲得Button
auto _button = (Button*)Helper::seekWidgetByName(_panel,"Button_1");

//綁定回調函數
_button->addTouchEventListener(CC_CALLBACK_2(HelloWorld::buttonCallBack,this));

我們是通過addTouchEventListener()方法來添加按鈕的回調函數的，這樣，運行程序，當我們點擊按鈕時便會觸發其觸摸事件並且執行與其綁定的回調函數，可以看到以下打印輸出：

 

 

 

以上。