溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
【嘮叨】
前面我們講了精靈貼圖、標簽、菜單、按鈕。感覺似乎少了點什么？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
// 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”。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
