cocos2dx基礎(chǔ)篇(14)——編輯框之一CCTextFieldTTF

【嘮叨】

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

    cocos2dx引擎為我們提供了兩類(lèi)編輯框的控件：

        （1）CCTextFieldTTF（基于CCLabelTTF）

        （2）CCEditBox（基于CCControlButton）

    本節(jié)就先講述一下CCTextFieldTTF吧。

【致謝】

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

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

【小知識(shí)】

    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)容：   使用虛擬鍵盤(pán)，輸入到編輯框中的內(nèi)容。

【Demo下載】

    https://github.com/shahdza/Cocos_LearningTest/tree/master/demo_%E6%96%87%E6%9C%AC%E6%A1%86%E4%B9%8B%E4%B8%80CCTextFieldTTF 

【3.x】

    （1）去掉“CC”

    （2）增加 alpha透明度值 ：參數(shù)中的 Color3B 變?yōu)?/strong> Color4B

    （3）setColor(const ccColor3B&) 改為 setTextColor(const Color4B&)

    （4）CCLabelTTF 改為 Label

    （4）其他3.x的變化：如觸摸事件等等……也隨之發(fā)生變化

【CCTextFieldTTF】

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

    可見(jiàn)，CCTextFieldTTF的父類(lèi)為：字體標(biāo)簽類(lèi)CCLabelTTF、輸入法代理類(lèi)CCIMEDelegate。

    其中CCLabelTTF之前是講過(guò)的，它是一個(gè)用于顯示文字的標(biāo)簽類(lèi)。而CCIMEDelegate這個(gè)類(lèi)主要是為子類(lèi)提供了虛擬鍵盤(pán)的輸入功能。

    根據(jù)其繼承關(guān)系，我們大致也可以猜測(cè)到CCTextFieldTTF是怎么實(shí)現(xiàn)的吧？這個(gè)估計(jì)就是一個(gè)動(dòng)態(tài)的 CCLabelTTF ，通過(guò)不斷監(jiān)聽(tīng)輸入的字符，動(dòng)態(tài)設(shè)置標(biāo)簽的內(nèi)容。

    接下來(lái)就來(lái)講講它的使用方法吧！

1、創(chuàng)建方式

    注意：CCTextFieldTTF的創(chuàng)建不是使用create，而是textFieldWithPlaceHolder。

//
class CC_DLL CCTextFieldTTF : public CCLabelTTF, public CCIMEDelegate

/**
 *		創(chuàng)建CCTextFieldTTF的兩種方式
 *		textFieldWithPlaceHolder
 */
	//placeholder：默認(rèn)內(nèi)容。即輸入為空時(shí)顯示的內(nèi)容。
	//fontName：   字體資源名。
	//fontSize：   字體大小。
	//編輯框的大小為：CCLabelTTF的大小。且在輸入的過(guò)程中，若內(nèi)容超過(guò)編輯框的大小，會(huì)自動(dòng)擴(kuò)展。
	static CCTextFieldTTF* textFieldWithPlaceHolder(const char* placeholder, const char* fontName, float fontSize);


	//placeholder：默認(rèn)內(nèi)容。即編輯框的輸入內(nèi)容為空時(shí)，顯示的內(nèi)容。
	//dimensions： 編輯框的尺寸大小。
	//alignment：  文本內(nèi)容的對(duì)齊方式。
		//kCCTextAlignmentLeft      左對(duì)齊
		//kCCTextAlignmentCenter    居中，默認(rèn)方式
		//kCCTextAlignmentRight     右對(duì)齊
	//編輯框的大小固定，不可擴(kuò)展。
	static CCTextFieldTTF* textFieldWithPlaceHolder(const char* placeholder, const CCSize& dimensions, CCTextAlignment alignment, const char*fontName, float fontSize);


/**
 *		創(chuàng)建方式舉例
 */
	CCTextFieldTTF::textFieldWithPlaceHolder("Please Click Me!", "Marker Felt", 24);
	CCTextFieldTTF::textFieldWithPlaceHolder("Please Click Me!", CCSizeMake(100,100), CCTextAlignment::kCCTextAlignmentCenter, "Marker Felt", 24);
//

2、常用操作

    委托代理對(duì)象、字符個(gè)數(shù)、默認(rèn)內(nèi)容及字體顏色、輸入內(nèi)容及字體顏色。

//
/**
 *		屬性設(shè)置
 *		setDelegate , getCharCount , 
 *		setPlaceHolder , setColorSpaceHolder ,
 *		setString , setColor
 */
	//設(shè)置編輯框的委托代理對(duì)象，一般為this
	//并且CCLayer必需要繼承代理接口類(lèi)CCTextFieldDelegate。
	CC_SYNTHESIZE(CCTextFieldDelegate*, m_pDelegate, Delegate);

	//獲取字符個(gè)數(shù)，只讀get
	CC_SYNTHESIZE_READONLY(int, m_nCharCount, CharCount);

	//設(shè)置編輯框默認(rèn)內(nèi)容。即輸入為空時(shí)顯示的內(nèi)容
	virtual void setPlaceHolder(const char * text);
	virtual const char* getPlaceHolder();

	//設(shè)置編輯框默認(rèn)內(nèi)容的字體顏色
	virtual void setColorSpaceHolder(const ccColor3B& color);
	virtual const ccColor3B& getColorSpaceHolder();

	//設(shè)置編輯框輸入內(nèi)容
	virtual void setString(const char *text);
	virtual const char* getString();

	//設(shè)置編輯框輸入內(nèi)容的字體顏色
	virtual void setColor(const ccColor3B& color);
	virtual const ccColor3B& setColor();
//

3、父類(lèi)CCIMEDelegate向子類(lèi)提供的函數(shù)

    實(shí)現(xiàn)虛擬鍵盤(pán)的輸入功能。

//
	virtual bool attachWithIME(); //開(kāi)啟虛擬鍵盤(pán)，并允許輸入。
	virtual bool detachWithIME(); //關(guān)閉虛擬鍵盤(pán)，并停止輸入。

	//textFieldTTF->attachWithIME();
//

4、事件委托代理接口類(lèi)CCTextFieldDelegate

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

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

//
	//當(dāng)用戶(hù)啟動(dòng)虛擬鍵盤(pán)時(shí)的回調(diào)函數(shù)
	//啟用鍵盤(pán)false; 不啟用鍵盤(pán)true
	virtual bool onTextFieldAttachWithIME(CCTextFieldTTF* sender)

	//當(dāng)用戶(hù)關(guān)閉虛擬鍵盤(pán)時(shí)的回調(diào)函數(shù)
	//關(guān)閉鍵盤(pán)false; 不關(guān)閉鍵盤(pán)true
	virtual bool onTextFieldDetachWithIME(CCTextFieldTTF* sender)

	//當(dāng)用戶(hù)輸入時(shí)的回調(diào)函數(shù)
	//允許輸入字符false; 不允許輸入字符true
	virtual bool onTextFieldInsertText(CCTextFieldTTF* sender, const char* text, int nLen)

	//當(dāng)用戶(hù)刪除文字時(shí)的回調(diào)函數(shù)
	//允許刪除字符false; 不允許刪除字符true
	virtual bool onTextFieldDeleteBackward(CCTextFieldTTF* sender, const char* delText, int nLen)
//

5、使用技巧

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

    （2）通過(guò)通過(guò)觸碰事件Touch，判斷觸點(diǎn)是否觸碰到編輯框內(nèi)部，來(lái)決定是否開(kāi)啟虛擬鍵盤(pán)。觸碰到內(nèi)部，就開(kāi)啟；觸碰到外部，就關(guān)閉。

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

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

    （1）讓HelloWorld類(lèi)繼承cocos2d::CCTextFieldDelegate，重寫(xiě)事件偵聽(tīng)函數(shù)。并在HelloWorld類(lèi)中開(kāi)啟觸控事件。

    記得在onEnter和onExit中注冊(cè)和注銷(xiāo)觸控事件哦！

//
	class HelloWorld : public cocos2d::CCLayer,cocos2d::CCTextFieldDelegate
	{
		virtual bool onTextFieldAttachWithIME(CCTextFieldTTF* sender);                                 //當(dāng)用戶(hù)啟動(dòng)虛擬鍵盤(pán)的時(shí)候的回調(diào)函數(shù)
		virtual bool onTextFieldDetachWithIME(CCTextFieldTTF* sender);                                 //當(dāng)用戶(hù)關(guān)閉虛擬鍵盤(pán)的時(shí)候的回調(diào)函數(shù)
		virtual bool onTextFieldInsertText(CCTextFieldTTF* sender, const char* text, int nLen);        //當(dāng)用戶(hù)輸入的時(shí)候的回調(diào)函數(shù)
		virtual bool onTextFieldDeleteBackward(CCTextFieldTTF* sender, const char* delText, int nLen); //當(dāng)用戶(hù)刪除文字的時(shí)候的回調(diào)函數(shù)

		//開(kāi)啟觸控
		virtual bool ccTouchBegan(CCTouch* touch, CCEvent* event);
		virtual void ccTouchMoved(CCTouch* touch, CCEvent* event);
		virtual void ccTouchEnded(CCTouch* touch, CCEvent* event);
		virtual void onEnter();
		virtual void onExit();
	};
//

    （2）在init()中創(chuàng)建編輯框CCTextFieldTTF，并給與Tag標(biāo)記為tag = 1。

//
	CCTextFieldTTF* textFieldTTF = CCTextFieldTTF::textFieldWithPlaceHolder("please input", "Marker Felt", 24);
	//CCTextFieldTTF* textFieldTTF = CCTextFieldTTF::textFieldWithPlaceHolder("please input", CCSize(100,100), CCTextAlignment::kCCTextAlignmentCenter, "Arial", 20);
	textFieldTTF->setPosition( midPos );
	this->addChild(textFieldTTF, 0, 1); //tag標(biāo)記1

	//設(shè)置編輯框的委托代理對(duì)象
	textFieldTTF->setDelegate(this);
//

    （3）編寫(xiě)觸控事件回調(diào)函數(shù)。根據(jù)觸點(diǎn)位置，判斷開(kāi)啟或關(guān)閉虛擬鍵盤(pán)的輸入功能。

//
	bool HelloWorld::ccTouchBegan(CCTouch* touch, CCEvent* event)
	{
		CCLOG("ccTouchBegan");
		return true;
	}

	void HelloWorld::ccTouchMoved(CCTouch* touch, CCEvent* event)
	{
		CCLOG("ccTouchMoved");
	}

	void HelloWorld::ccTouchEnded(CCTouch* touch, CCEvent* event)
	{
		CCLOG("ccTouchEnded");

	//獲取觸點(diǎn)
		CCPoint pos = touch->getLocation();

	//獲取textFieldTTF所在的矩形區(qū)域rect
		CCTextFieldTTF* textFieldTTF = (CCTextFieldTTF*)this->getChildByTag(1);
		float x = textFieldTTF->getPositionX() - textFieldTTF->getContentSize().width/2;
		float y = textFieldTTF->getPositionY() - textFieldTTF->getContentSize().height/2;
		float width = textFieldTTF->getContentSize().width;
		float height = textFieldTTF->getContentSize().height;
		CCRect rect = CCRectMake(x, y, width, height);

	//判斷觸點(diǎn)是否觸摸到編輯框內(nèi)部
		if( rect.containsPoint(pos) ) {
			CCLOG("attachWithIME");
			textFieldTTF->attachWithIME(); //開(kāi)啟虛擬鍵盤(pán)
		}else {
			CCLOG("detachWithIME");
			textFieldTTF->detachWithIME(); //關(guān)閉虛擬鍵盤(pán)
		}
	}
//

    （4）編寫(xiě)編輯框事件的回調(diào)函數(shù)。

            當(dāng)啟用虛擬鍵盤(pán)，開(kāi)始輸入時(shí)，放大字體大小，并改變字體顏色。

            當(dāng)關(guān)閉虛擬鍵盤(pán)，停止輸入時(shí)，還原字體大小，并改變字體顏色。

//
	//當(dāng)用戶(hù)啟動(dòng)虛擬鍵盤(pán)的時(shí)候的回調(diào)函數(shù)
	bool HelloWorld::onTextFieldAttachWithIME(CCTextFieldTTF* sender)
	{
		//事件處理
		sender->setFontSize(30);              //字體放大為30
		sender->setColor(ccYELLOW);           //內(nèi)容顏色: ***
		sender->setColorSpaceHolder(ccWHITE); //默認(rèn)內(nèi)容顏色: 白色

		return false;                         //啟用鍵盤(pán)。若不啟用鍵盤(pán)return true;
	}

	//當(dāng)用戶(hù)關(guān)閉虛擬鍵盤(pán)的時(shí)候的回調(diào)函數(shù)
	bool HelloWorld::onTextFieldDetachWithIME(CCTextFieldTTF* sender)
	{
		//事件處理
		sender->setFontSize(24);             //字體大小還原為24
		sender->setColor(ccORANGE);          //內(nèi)容顏色: 橘黃
		sender->setColorSpaceHolder(ccGRAY); //默認(rèn)內(nèi)容顏色: 灰色

		return false;                        //關(guān)閉鍵盤(pán)。若不關(guān)閉鍵盤(pán)return true;
	}

	//當(dāng)用戶(hù)輸入的時(shí)候的回調(diào)函數(shù)
	bool HelloWorld::onTextFieldInsertText(CCTextFieldTTF* sender, const char* text, int nLen)
	{
		//事件處理
		CCLOG("CharCount: %d", sender->getCharCount());

		return false; //輸入字符。若不允許輸入字符return true;
	}

	//當(dāng)用戶(hù)刪除文字的時(shí)候的回調(diào)函數(shù)
	bool HelloWorld::onTextFieldDeleteBackward(CCTextFieldTTF* sender, const char* delText, int nLen)
	{
		return false; //刪除字符。若不允許刪除字符return true;
	}
//

    運(yùn)行結(jié)果：

    分析與總結(jié)：

    （1）若編輯框中未輸入任何字符時(shí)，文本顯示的是默認(rèn)內(nèi)容“please input”。而當(dāng)編輯框中有輸入內(nèi)容時(shí)，文本顯示的是輸入內(nèi)容。

    （2）編輯框的尺寸大小，會(huì)根據(jù)輸入的內(nèi)容大小，自動(dòng)進(jìn)行擴(kuò)展。

    （3）輸入內(nèi)容后，可以通過(guò)回車(chē)鍵（Enter）結(jié)束輸入。可以通過(guò)回退鍵（BackSpace）刪除字符。

    （4）最最關(guān)鍵的問(wèn)題是：說(shuō)好的虛擬鍵盤(pán)呢？為什么是用電腦鍵盤(pán)輸入的。好吧，因?yàn)閃in32沒(méi)有虛擬鍵盤(pán)，要是想看虛擬鍵盤(pán)的效果，就需要移植到手機(jī)上。

    手機(jī)上的運(yùn)行截圖如下：

    看到虛擬鍵盤(pán)，是不是很激動(dòng)呀激動(dòng)呀！