cocos2dx[2.x](10)--編輯框之二CCEditBox

【嘮叨】

前面我們講了精靈貼圖、標籤、菜單、按鈕。感覺似乎少了點什麼？UI控件裏是不是應該還有一個很重要的控件——編輯框。在手機網遊中，啓動遊戲，過了開場動畫後，基本上顯示的第一個界面應該就是遊戲的登錄界面了吧。輸入用戶名、密碼什麼的，這些都是需要藉助編輯框來實現輸入的。點擊文本，彈出虛擬鍵盤，輸入賬號密碼，點擊登錄。

cocos2dx引擎爲我們提供了兩類編輯框的控件：

    （1）CCTextFieldTTF（基於CCLabelTTF）
    （2）CCEditBox（基於CCControlButton）

本節繼續講另一個編輯框控件CCEditBox吧。

【致謝】
http://gl.paea.cn/contents/c040eacbea6a6eef.html
http://blog.csdn.net/crayondeng/article/details/12175367

【小知識】

IME：        是指Input Method Editors，即輸入法編輯器。
placeholder：默認顯示的內容。即編輯框的輸入內容爲空時，顯示的內容。
默認內容：   當編輯框的輸入內容爲空時，顯示的內容。
輸入內容：   使用虛擬鍵盤，輸入到編輯框中的內容。

【Demo下載】
https://github.com/shahdza/Cocos_LearningTest/tree/master/demo_%E7%BC%96%E8%BE%91%E6%A1%86%E4%B9%8B%E4%BA%8CCCEditBox

【3.x】

（1）去掉“CC”
（2）設置虛擬鍵盤的編輯類型
    > EditBoxInputMode 變爲強枚舉 EditBox::EditBoxInputMode

1
2
3
4
5
6
7
8
9
//
SINGLE_LINE //開啓任何文本的輸入鍵盤（不含換行）
ANY //開啓任何文本的輸入鍵盤（含換行）
DECIMAL //開啓 數字 輸入類型鍵盤（含小數點）
PHONE_NUMBER //開啓 電話號碼 輸入類型鍵盤
EMAIL_ADDRESS //開啓 郵件地址 輸入類型鍵盤
NUMERIC //開啓 數字符號 輸入類型鍵盤
URL //開啓 URL 輸入類型鍵盤
//
（3）設置輸入的文本類型

    > EditBoxInputFlag 變爲強枚舉 EditBox::EditBoxInputFlag

    PASSWORD                    //密碼形式
    SENSITIVE                   //敏感數據輸入
    INITIAL_CAPS_WORD           //每個單詞首字符大寫，並有提示
    INITIAL_CAPS_SENTENCE       //第一句首字符大寫，並有提示
    INTIAL_CAPS_ALL_CHARACTERS  //自動大寫

（4）設置虛擬鍵盤中return鍵顯示的字符
    > KeyboardReturnType 變爲強枚舉 EditBox::KeyboardReturnType

    DEFAULT                     //默認類型, "←"
    DONE                        //Done字樣, "確定"
    SEND                        //Send字樣, "發送"
    SEARCH                      //Search字樣, "搜索"
    GO                          //Go字樣, "鏈接"

（5）其他變化不大。

【CCEditBox】

讓我們先看一下CCEditBox的繼承關係：

可見，CCEditBox的父類爲：按鈕控件類CCControlButton、輸入法代理類CCIMEDelegate。

其中CCControlButton之前是講過的，它是一個具有許多按鈕事件，且使用CCScale9Sprite作爲背景圖片的按鈕類。而CCIMEDelegate這個類主要是爲子類提供了虛擬鍵盤的輸入功能。

根據其繼承關係，我們大致也可以猜測到CCEditBox是怎麼實現的吧？如果說CCTextFieldTTF是一個動態的CCLabelTTF，那麼可以將CCEditBox看做是一個動態的CCControlButton，通過不斷監聽輸入的字符，動態設置按鈕的標籤內容。

其實CCEditBox的用法和CCTectFieldTTF是非常相似的。不過主要的區別在於

使用CCEditBox創建的編輯框，不用額外的代碼處理，點擊編輯框區域就可以跳出鍵盤，點擊非編輯框區域就可以隱藏鍵盤。而CCTectFieldTTF卻需要手動處理。即父類CCIMEDelegate向子類提供的函數：attachWithIME()、detachWithIME()，對於CCEditBox而言，不需要手動進行處理。

接下來就來講講它的使用方法吧！

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

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

2、創建方式

    //create('編輯框大小', '按鈕正常背景', '按鈕按下背景', '按鈕禁用背景');
    static CCEditBox* create(const CCSize& size, CCScale9Sprite* pNormal9SpriteBg, 
        CCScale9Sprite* pPressed9SpriteBg = NULL, CCScale9Sprite* pDisabled9SpriteBg = NULL);

    //舉例：
    //CCSize editBoxSize = CCSizeMake(300, 60);
    //CCEditBox* editBoxName = CCEditBox::create(editBoxSize, CCScale9Sprite::create("green_edit.png"));

3、委託代理

    //設置編輯框的委託代理對象，一般爲this
    //並且CCLayer必需要繼承代理接口類CCEditBoxDelegate。
    void setDelegate(CCEditBoxDelegate* pDelegate);
    CCEditBoxDelegate* getDelegate();

    //舉例：
    /editBoxName->setDelegate(this);

4、常用操作

設置默認內容，輸入內容，字體資源名、大小、顏色，最大字符數，編輯框尺寸大小。

/**
 *     setPlaceHolder , setPlaceholderFont ,
 *     setText , setFont , setMaxLength , 
 *     setPreferredSize
 */
    //設置編輯框的默認內容。即當輸入內容爲空時，顯示的內容。
    void setPlaceHolder(const char* pText);
    const char* getPlaceHolder(void);

    //設置默認內容的字體
    //      pFontName   字體資源名
    //      fontSize    字體大小
    //      color       字體顏色
    void setPlaceholderFont(const char* pFontName, int fontSize);
    void setPlaceholderFontName(const char* pFontName);
    void setPlaceholderFontSize(int fontSize);
    void setPlaceholderFontColor(const ccColor3B& color);


    //設置編輯框的輸入內容setText
    void setText(const char* pText);
    const char* getText(void);

    //設置輸入內容的字體
    //      pFontName   字體資源名
    //      fontSize    字體大小
    //      color       字體顏色
    void setFont(const char* pFontName, int fontSize);
    void setFontName(const char* pFontName);
    void setFontSize(int fontSize);
    void setFontColor(const ccColor3B& color);


    //輸入字符控制，允許輸入的最大字符長度
    void setMaxLength(int maxLength);
    int getMaxLength();


    //設置編輯框大小
    void setPreferredSize(CCSize size);

5、設置編輯框的模式類型

虛擬鍵盤的類型、文本類型、虛擬鍵盤中return鍵顯示的字符。

/**
 *     setInputMode ,
 *     setInputFlag ,
 *     setReturnType
 */
    //設置虛擬鍵盤的編輯類型EditBoxInputMode
    //      kEditBoxInputModeSingleLine                     //開啓任何文本的輸入鍵盤（不含換行）
    //      kEditBoxInputModeAny                            //開啓任何文本的輸入鍵盤（含換行）
    //      kEditBoxInputModeDecimal                        //開啓 數字 輸入類型鍵盤（含小數點）
    //      kEditBoxInputModePhoneNumber                    //開啓 電話號碼 輸入類型鍵盤
    //      kEditBoxInputModeEmailAddr                      //開啓 郵件地址 輸入類型鍵盤
    //      kEditBoxInputModeNumeric                        //開啓 數字符號 輸入類型鍵盤
    //      kEditBoxInputModeUrl                            //開啓 URL 輸入類型鍵盤
    void setInputMode(EditBoxInputMode inputMode);


    //設置輸入的文本類型EditBoxInputFlag
    //      kEditBoxInputFlagPassword                       //密碼形式
    //      kEditBoxInputFlagSensitive                      //敏感數據輸入
    //      kEditBoxInputFlagInitialCapsWord                //每個單詞首字符大寫，並有提示
    //      kEditBoxInputFlagInitialCapsSentence            //第一句首字符大寫，並有提示
    //      kEditBoxInputFlagInitialCapsAllCharacters       //自動大寫
    void setInputFlag(EditBoxInputFlag inputFlag);


    //設置虛擬鍵盤中return鍵顯示的字符
    //      kKeyboardReturnTypeDefault                      //默認類型, "←"
    //      kKeyboardReturnTypeDone                         //Done字樣, "確定"
    //      kKeyboardReturnTypeSend                         //Send字樣, "發送"
    //      kKeyboardReturnTypeSearch                       //Search字樣, "搜索"
    //      kKeyboardReturnTypeGo                           //Go字樣, "鏈接"
    void setReturnType(KeyboardReturnType returnType);

6、事件委託代理接口類CCEditBoxDelegate

CCEditBoxDelegate類主要是用來偵聽CCEditBox的使用狀態，並設置事件的回調響應函數。
使用方法：在創建CCEditBox類的CCLayer類中，讓CCLayer繼承CCEditBoxDelegate，並重寫如下四個事件回調響應函數。
整個編輯框的編輯過程爲：開始編輯 => 文字改變 => 結束編輯 => 返回return。

    //開始編輯時
    virtual void editBoxEditingDidBegin(CCEditBox* editBox);
    //結束編輯時
    virtual void editBoxEditingDidEnd(CCEditBox* editBox);
    //編輯框文字改變時
    virtual void editBoxTextChanged(CCEditBox* editBox, const std::string& text);
    //觸發return後
    virtual void editBoxReturn(CCEditBox* editBox);

7、使用技巧

（1）創建CCEditBox後，設置編輯框的委託代理對象爲當前CCLayer層，即setDelegate(this)。只有這樣，繼承於CCEditBoxDelegate的CCLayer就可以響應編輯框的事件，並執行回調函數。
（2）通過重寫CCEditBoxDelegate的四個回調函數，來對編輯框的不同狀態事件進行處理。

【代碼實戰】

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

1、用到的資源：（在TestCpp項目中可以找到）

        字體：             

編輯框按鈕圖片：

2、繼承cocos2d::CCEditBoxDelegate，重寫事件偵聽函數

與CCTextFieldTTF不同的是：使用CCEditBox創建的編輯框，不用額外的代碼處理，點擊編輯框區域就可以跳出鍵盤，點擊非編輯框區域就可以隱藏鍵盤。所以不需要添加屏幕的觸控事件。

    class HelloWorld : public cocos2d::CCLayer,CCEditBoxDelegate
    {
        virtual void editBoxEditingDidBegin(CCEditBox* editBox);                      //開始編輯
        virtual void editBoxEditingDidEnd(CCEditBox* editBox);                        //結束編輯
        virtual void editBoxTextChanged(CCEditBox* editBox, const std::string& text); //編輯框文字改變
        virtual void editBoxReturn(CCEditBox* editBox);                               //觸發return後的回調函數
    }

3、在init()中創建三個編輯框CCEditBox

分別代表：用戶名、密碼、郵箱。並設置編輯框的相關屬性，以及編輯框的模式類型。

    //編輯框尺寸大小
        CCSize editBoxSize = CCSizeMake(mysize.width - 100, 60);


    //用戶名editBoxName
        CCEditBox* editBoxName = CCEditBox::create(editBoxSize, CCScale9Sprite::create("green_edit.png"));
        editBoxName->setPosition( ccp(mysize.width/2, mysize.height*3/4) );
        this->addChild(editBoxName);

        //屬性設置
        editBoxName->setFontName("fonts/Paint Boy.ttf");
        editBoxName->setFontSize(20);
        editBoxName->setFontColor(ccRED);
        editBoxName->setPlaceHolder("Name:");
        editBoxName->setPlaceholderFontColor(ccWHITE);
        editBoxName->setMaxLength(8); //限制字符長度

        //模式類型設置
        editBoxName->setInputMode(kEditBoxInputModeSingleLine);
        editBoxName->setInputFlag(kEditBoxInputFlagInitialCapsAllCharacters);
        editBoxName->setReturnType(kKeyboardReturnTypeDefault);

        //委託代理對象this
        editBoxName->setDelegate(this);


    //密碼editBoxPassword
        CCEditBox* editBoxPassword = CCEditBox::create(editBoxSize, CCScale9Sprite::create("orange_edit.png"));
        editBoxPassword->setPosition( midPos );
        this->addChild(editBoxPassword);

        //屬性設置
        editBoxPassword->setFont("fonts/Marker Felt.ttf", 30);
        editBoxPassword->setFontColor(ccGREEN);
        editBoxPassword->setPlaceHolder("Password:");
        editBoxPassword->setMaxLength(6); //限制字符長度

        //模式設置
        editBoxPassword->setInputFlag(kEditBoxInputFlagPassword);
        editBoxPassword->setReturnType(kKeyboardReturnTypeDone);

        //委託代理對象this
        editBoxPassword->setDelegate(this);


    //郵箱editBoxEmail
        CCEditBox* editBoxEmail = CCEditBox::create(editBoxSize, CCScale9Sprite::create("yellow_edit.png"));
        editBoxEmail->setPosition( ccp(mysize.width/2, mysize.height/4) );
        this->addChild(editBoxEmail);

        //屬性設置
        editBoxEmail->setFont("fonts/Marker Felt.ttf", 30);
        editBoxEmail->setPlaceHolder("Email:");

        //模式類型設置
        editBoxEmail->setInputMode(kEditBoxInputModeEmailAddr);
        editBoxEmail->setReturnType(kKeyboardReturnTypeSend);

        //委託代理對象this
        editBoxEmail->setDelegate(this);

4、編寫編輯框事件的回調函數

在控制檯輸出LOG日誌。

    //開始編輯
    void HelloWorld::editBoxEditingDidBegin(CCEditBox* editBox)
    {
        CCLog("editBox %p DidBegin !", editBox);
    }

    //結束編輯
    void HelloWorld::editBoxEditingDidEnd(CCEditBox* editBox)
    {
        CCLog("editBox %p DidEnd !", editBox);
    }

    //編輯框內容改變
    void HelloWorld::editBoxTextChanged(CCEditBox* editBox, const std::string& text)
    {
        CCLog("editBox %p TextChanged, text: %s ", editBox, text.c_str());
    }

    //觸發return返回
    void HelloWorld::editBoxReturn(CCEditBox* editBox)
    {
        CCLog("editBox %p was returned !",editBox);
    }

5、運行結果

    因爲在win32下，無法開啓虛擬鍵盤。所以我將其移植到android上進行測試。

6、分析與總結

（1）用戶名我輸入的是“dh”，按return鍵後，自動變成了大寫“DH”。

（2）在輸入密碼時，顯示的是“●”。並且長度限制爲6位字符，超過六位後，就拒絕輸入了。

（3）不知道大家有沒有注意虛擬鍵盤的右下角的return鍵有什麼變化。是不是每次的打開的虛擬鍵盤上的return鍵都不一樣呢？“←”，“Done”，“Send”。

轉載網址：http://blog.51cto.com/shahdza/1544213