cocos2dx基礎(chǔ)篇(15)——編輯框之二CCEditBox

【嘮叨】

    前面我們講了精靈貼圖、標(biāo)簽、菜單、按鈕。感覺似乎少了點(diǎn)什么？UI控件里是不是應(yīng)該還有一個(gè)很重要的控件——編輯框。在手機(jī)網(wǎng)游中，啟動游戲，過了開場動畫后，基本上顯示的第一個(gè)界面應(yīng)該就是游戲的登錄界面了吧。輸入用戶名、密碼什么的，這些都是需要借助編輯框來實(shí)現(xiàn)輸入的。點(diǎn)擊文本，彈出虛擬鍵盤，輸入賬號密碼，點(diǎn)擊登錄。

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

        （1）CCTextFieldTTF（基于CCLabelTTF）

        （2）CCEditBox（基于CCControlButton）

    本節(jié)繼續(xù)講另一個(gè)編輯框控件CCEditBox吧。

【致謝】

    http://gl.paea.cn/contents/c040eacbea6a6eef.html

    http://blog.csdn.net/crayondeng/article/details/12175367

【小知識】

    IME：        是指Input Method Editors，即輸入法編輯器。

    placeholder：默認(rèn)顯示的內(nèi)容。即編輯框的輸入內(nèi)容為空時(shí)，顯示的內(nèi)容。

    默認(rèn)內(nèi)容：   當(dāng)編輯框的輸入內(nèi)容為空時(shí)，顯示的內(nèi)容。

    輸入內(nèi)容：   使用虛擬鍵盤，輸入到編輯框中的內(nèi)容。

【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）設(shè)置虛擬鍵盤的編輯類型

        > EditBoxInputMode 變?yōu)閺?qiáng)枚舉 EditBox::EditBoxInputMode

//
	SINGLE_LINE                 //開啟任何文本的輸入鍵盤（不含換行）
	ANY                         //開啟任何文本的輸入鍵盤（含換行）
	DECIMAL                     //開啟 數(shù)字 輸入類型鍵盤（含小數(shù)點(diǎn)）
	PHONE_NUMBER                //開啟 電話號碼 輸入類型鍵盤
	EMAIL_ADDRESS               //開啟 郵件地址 輸入類型鍵盤
	NUMERIC                     //開啟 數(shù)字符號 輸入類型鍵盤
	URL                         //開啟 URL 輸入類型鍵盤
//

    （3）設(shè)置輸入的文本類型

        > EditBoxInputFlag 變?yōu)閺?qiáng)枚舉 EditBox::EditBoxInputFlag

//
	PASSWORD                    //密碼形式
	SENSITIVE                   //敏感數(shù)據(jù)輸入
	INITIAL_CAPS_WORD           //每個(gè)單詞首字符大寫，并有提示
	INITIAL_CAPS_SENTENCE       //第一句首字符大寫，并有提示
	INTIAL_CAPS_ALL_CHARACTERS  //自動大寫
//

    （4）設(shè)置虛擬鍵盤中return鍵顯示的字符

        > KeyboardReturnType 變?yōu)閺?qiáng)枚舉 EditBox::KeyboardReturnType

//
	DEFAULT                     //默認(rèn)類型, "←"
	DONE                        //Done字樣, "確定"
	SEND                        //Send字樣, "發(fā)送"
	SEARCH                      //Search字樣, "搜索"
	GO                          //Go字樣, "鏈接"
//

    （5）其他變化不大。

【CCEditBox】

    讓我們先看一下CCEditBox的繼承關(guān)系：

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

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

    根據(jù)其繼承關(guān)系，我們大致也可以猜測到CCEditBox是怎么實(shí)現(xiàn)的吧？如果說CCTextFieldTTF是一個(gè)動態(tài)的CCLabelTTF，那么可以將CCEditBox看做是一個(gè)動態(tài)的CCControlButton，通過不斷監(jiān)聽輸入的字符，動態(tài)設(shè)置按鈕的標(biāo)簽內(nèi)容。

    其實(shí)CCEditBox的用法和CCTectFieldTTF是非常相似的。不過主要的區(qū)別在于

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

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

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

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

2、創(chuàng)建方式

//
	//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、委托代理

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

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

4、常用操作

    設(shè)置默認(rèn)內(nèi)容，輸入內(nèi)容，字體資源名、大小、顏色，最大字符數(shù)，編輯框尺寸大小。

//
/**
 *		setPlaceHolder , setPlaceholderFont ,
 *		setText , setFont , setMaxLength , 
 *		setPreferredSize
 */
	//設(shè)置編輯框的默認(rèn)內(nèi)容。即當(dāng)輸入內(nèi)容為空時(shí)，顯示的內(nèi)容。
	void setPlaceHolder(const char* pText);
	const char* getPlaceHolder(void);

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


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

	//設(shè)置輸入內(nèi)容的字體
	//		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();


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

5、設(shè)置編輯框的模式類型

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

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

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


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

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

    CCEditBoxDelegate類主要是用來偵聽CCEditBox的使用狀態(tài)，并設(shè)置事件的回調(diào)響應(yīng)函數(shù)。

    使用方法：在創(chuàng)建CCEditBox類的CCLayer類中，讓CCLayer繼承CCEditBoxDelegate，并重寫如下四個(gè)事件回調(diào)響應(yīng)函數(shù)。

    整個(gè)編輯框的編輯過程為：開始編輯 => 文字改變 => 結(jié)束編輯 => 返回return。

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

7、使用技巧

    （1）創(chuàng)建CCEditBox后，設(shè)置編輯框的委托代理對象為當(dāng)前CCLayer層，即setDelegate(this)。只有這樣，繼承于CCEditBoxDelegate的CCLayer就可以響應(yīng)編輯框的事件，并執(zhí)行回調(diào)函數(shù)。

    （2）通過重寫CCEditBoxDelegate的四個(gè)回調(diào)函數(shù)，來對編輯框的不同狀態(tài)事件進(jìn)行處理。

【代碼實(shí)戰(zhàn)】

    代碼來源于cocos2dx的官方項(xiàng)目TestCpp中。

1、用到的資源：（在TestCpp項(xiàng)目中可以找到）

            字體：             

            編輯框按鈕圖片：      

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

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

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

3、在init()中創(chuàng)建三個(gè)編輯框CCEditBox

    分別代表：用戶名、密碼、郵箱。并設(shè)置編輯框的相關(guān)屬性，以及編輯框的模式類型。

//
	//編輯框尺寸大小
		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);

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

		//模式類型設(shè)置
		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);

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

		//模式設(shè)置
		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);

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

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

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

4、編寫編輯框事件的回調(diào)函數(shù)

    在控制臺輸出LOG日志。

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

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

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

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

5、運(yùn)行結(jié)果

        因?yàn)樵趙in32下，無法開啟虛擬鍵盤。所以我將其移植到android上進(jìn)行測試。

6、分析與總結(jié)

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

    （2）在輸入密碼時(shí)，顯示的是“●”。并且長度限制為6位字符，超過六位后，就拒絕輸入了。

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