Cocostudio學習筆記（2） Button + CheckBox

Cocostudio學習筆記（2） Button + CheckBox

這篇記錄了兩個控制項的使用流程：Button 和 CheckBox。

----------------------------------------------------------------------------------------------------------------------------

Button

---------------------------------------------------------------------------------------------------------------------------

昨天好不容易讓cocostudio排好的圖片資源在cocos2dx工程中跑起來了，其實也就是一個按鈕。
說到按鈕，那我這次就要讓按鈕點擊後實現對應的功能，如按下去後會發生什麼什麼。
這個有以下幾個步驟：
1、從cocostudio產生的.json檔案中提取資源；
2、在提取出來的資源套件裡找到我們要用的按鈕button；
3、添加按鈕對應的回呼函數

下面就說下如何?吧：（友情提示：請完整看完整篇博文在敲代碼）
1、用這段代碼提取資源，這個前面已經有說過了

auto UI = GUIReader::getInstance()->widgetFromJsonFile("HelloUI_1.Json");this->addChild(UI);

這裡有點要補充的， 雖然說C++11後用auto就可以自動將UI轉成對應的類型，但是我們畢竟都還是菜鳥，能不取巧就不取巧，這裡的UI到底是個什麼類型的變數呢？點進去看後才發現是： cocos2d::ui::Widget* 類型的。所以實際上我們的操作應該是：

cocos2d::ui::Widget UI = GUIReader::getInstance()->widgetFromJsonFile("HelloUI_1.json");

不過我發現用cocos2d::ui這樣寫好長好麻煩啊有木有，於是就在檔案上聲明了範圍：

using namespace cocos2d::ui;

恩，這樣就方便多了

2、接下來是找到資源中的按鈕。我在cocostudio中將按鈕命名為“Button_1”，所以我就通過這個名字找到該按鈕。

Button* closeBt = static_cast<Button*>(Helper::seekWidgetByName(UI,"Button_1"));

看完這行代碼我感覺又有一些東西要解釋了：
首先這裡用到的類名是Button,而不是我們在cocos2dx中常用的Menu；其次是Helper這貨又是什麼碗糕？點進源碼看下（其實看上面代碼也就知道了），它就是用來尋找資源裡對應的控制項，它的尋找方式有三種，如下：

static Widget* seekWidgetByTag(Widget* root, int tag);//通過tag找到該控制項static Widget* seekWidgetByName(Widget* root, const char* name);//通過名稱找到該控制項static Widget* seekActionWidgetByActionTag(Widget* root, int tag);//通過tag找到該動作

上面三行代碼的注釋還算清楚，我就不多說了，最後一個是通過tag找到動作，其實我沒怎麼理解，等以後試過了再說吧。

3、既然是按鈕，那麼肯定會有回呼函數，只是Button對應的回呼函數可與Menu的不一樣咯。
我們都知道Menu對應的會調函數格式是這樣的：

void menuCallback(Ref* sender);

而Button對應的回呼函數格式是這樣的：

void menuCallback(Ref* sender,TouchEventType type);

也就是多了個 TouchEventType這個類型的參數嘛，那麼， TouchEventType這貨是什麼玩意呢？到UIWidget.h源檔案中看看：

typedef enum{    TOUCH_EVENT_BEGAN,    TOUCH_EVENT_MOVED,    TOUCH_EVENT_ENDED,    TOUCH_EVENT_CANCELED}TouchEventType;

從枚舉可以看出TouchEventType有四種類型，和cocos2dx觸摸回調對應的onTouchBegan等很像啊有木有。
我們暫時別管這個TouchEventType，先定義下這個回呼函數,如下：

void HelloWorld::m_callback(Ref* sender,TouchEventType type){CCLOG("haah");}

運行程式，點擊按鈕後發現"haah"會跳出兩次，多點了幾次發現了規律， 原來是你剛點下去的那一刻會彈出一條"haah",當你點擊結束離開Button也會彈出一條"haah"。這種效果現任不是我們想要的， 畢竟一夫一妻制是法定的。因此，TouchEventType終於派上用場。從上面我們已經知道TouchEventType有四種類型，下面我們就用switch case判斷它對應的是哪種類型，然後做相應的操作。

void HelloWorld::m_callback(Ref* sender,TouchEventType type){switch(type){case TOUCH_EVENT_BEGAN:CCLOG("touch began");break;case TOUCH_EVENT_ENDED:CCLOG("touch ended");break;}}

運行看下效果：點擊按鈕，然後再放開，分別輸出下面兩局：
touch began
touch ended

4、最後再提示下，也是最重要的提示，那就是標頭檔千萬別忘了加了。我也不再多說要加啥標頭檔，總之將下面這堆東西放進去就對了：

#include "editor-support/cocostudio/CCSGUIReader.h"#include "cocostudio/CocoStudio.h"#include "ui/CocosGUI.h"

奇怪，我這裡只是在做筆記，怎麼寫得風格就跟在寫部落格似的...

----------------------------------------------------------------------------------------------------------------------------

CheckBox

---------------------------------------------------------------------------------------------------------------------------

接下來看看CheckBox這個控制項。之前在cocos2dx上也有實現過於checkBox類似的功能，不過那是用一個Menu與兩張圖片來實現的。由此可見我是多麼的單純。

1 、建立一個新的cocostudio工程。拉一個CheckBox控制項到情境中，修改name 為“CheckBox",最後匯出工程到cocos2dx項目Resources目錄下。

2、在cocos2dx中載入cocostudio的.json檔案

cocos2d::ui::Widget* checkLayout = GUIReader::getInstance()->widgetFromJsonFile("CheckBoxUi_1.json");this->addChild(checkLayout,2);

運行，沒有問題。

3、提取layout中的checkBox控制項，挪動它的位置（這次我學到經驗了。直接到test中看checkBox的API介面）

CheckBox* checkBox = static_cast<CheckBox*>(Helper::seekWidgetByName(checkLayout,"CheckBox"));checkBox->setPosition(Point(400,300));4、下面進入UICheckBox.h中看下checkBox的源碼。有下面這些API//建立一個checkBoxstatic CheckBox* create();static CheckBox* create(const std::string& backGround,const std::string& backGroundSeleted,const std::string& cross,const std::string& backGroundDisabled,const std::string& frontCrossDisabled,TextureResType texType = UI_TEX_TYPE_LOCAL);void setSelectedState(bool selected);//設定checkBox的狀態，true為選中打鉤狀態，false為未選中狀態bool getSelectedState();//擷取checkBox的狀態virtual std::string getDescription() const override;//擷取widget（CheckBox）在.json中的 name，例如上面的”CheckBox“//add a call back function would called when checkbox is selected or unselected.void addEventListenerCheckBox(Ref* target,SEL_SelectedStateEvent selector);//添加回呼函數

5、下面自己建立一個checkBox。代碼如下：

CheckBox* checkBox2 = CheckBox::create("check_box_normal.png",//未選中時的顯示圖片"check_box_normal_press.png",//點擊checkBox後觸摸沒有鬆開時的圖片"check_box_active.png",//選中時的顯示圖片"check_box_normal_disable.png",//從選中到未選中切換過程中，觸摸沒有鬆開時的顯示圖片"check_box_active_disable.png");checkBox2->setPosition(Point(200,200));this->addChild(checkBox2,2);//添加回呼函數checkBox2->addEventListenerCheckBox(this,checkboxselectedeventselector(HelloWorld::checkBoxCallback));

下面看下回呼函數：

void HelloWorld::checkBoxCallback(Ref* sender,CheckBoxEventType type){CCLOG("haha");}

運行程式後發現，點擊checkBox，checkBox從未選中到選中狀態時，輸入一個"haha"，再點擊，checkBox從選中到未選中時又輸出一次"haha".
上面屬於最普通的測試，下面嘗試驗高端東西，看看回呼函數的第二個參數： CheckBoxEventType type。先看CheckBoxEventType 都有哪些類型：

typedef enum{    CHECKBOX_STATE_EVENT_SELECTED,    CHECKBOX_STATE_EVENT_UNSELECTED}CheckBoxEventType;

還好只有兩種狀態，我深深的鬆了口氣（要不然checkBox還能有幾種狀態？！）。下面用switch case判斷當下屬於哪種狀態，然後做相應的處理：

void HelloWorld::checkBoxCallback(Ref* sender,CheckBoxEventType type){//CCLOG("haha");switch (type){case CHECKBOX_STATE_EVENT_SELECTED:CCLOG("selected");//選中時響應break;case CHECKBOX_STATE_EVENT_UNSELECTED:CCLOG("unselected");//未選中時響應break;default:break;}}

恩，就是這樣子啦，很容易的說。

睡覺去了，我果然不適合熬夜！

尊重原創，轉載請註明來源：http://blog.csdn.net/star530/article/details/37362781