登入介面一個帳號/密碼輸入框或者主角命名框是少不了的。這節就來了解一下點九圖的輸入框的使用。這裡只是介紹基礎知識，並不進行平臺的移植，也不處理跨平臺可能出現的問題。

1.點九圖CCScale9Sprite

1.1.概述

點九圖做過移動開發的肯定不會陌生。採用的是PNG點9圖，PNG點9圖可以自適應各種環境，同時保持伸縮不變形。移動端的UI基本上都是按這個來做的。點9圖的製作很簡單，用Android SDK的tool下的draw9patch.bat就可以製作。左為原理圖，右為效果圖。

1.2.使用

cocos2d-x採用CCScale9Sprite來處理點九圖，CCScale9Sprite為擴充套件類，所以在使用前需加入如下宣告。

#include "cocos-ext.h"
USING_NS_CC_EXT;

		CCScale9Sprite* confirmnormal=CCScale9Sprite::create("btn_style_alert_dialog_button_normal.9.png");//normal態
		confirmnormal->setContentSize(CCSizeMake(100,70));//設定大小
		CCScale9Sprite* confirmpressd=CCScale9Sprite::create("btn_style_alert_dialog_button_pressed.9.png");//pressd態
		confirmpressd->setContentSize(CCSizeMake(100,70));//設定大小
		CCMenuItemSprite* menuitem=CCMenuItemSprite::create(confirmnormal,confirmpressd,this,menu_selector(TestLayer::btncallback));
		CCMenu* menu=CCMenu::create(menuitem,NULL);//建立menu
		menu->setPosition(visibleSize.width/2,visibleSize.height/2);
		this->addChild(menu);
 

2.輸入框CCEditBox

2.1.概述

CCEditBox也是cocos2d-x的擴充套件類，所以和上面一樣要進行標頭檔案包含和名稱空間宣告。另外由於要監控輸入框的各種狀態，所以還必須實現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) = 0;
 

2.2.使用

在TestLayer.cpp的init()中建立編輯框。

//bool TestLayer::init()
CCSize visibleSize=CCDirector::sharedDirector()->getVisibleSize();
		
pEditBox = CCEditBox::create(CCSizeMake(250,50), CCScale9Sprite::create("login_edit_normal.9.png"));
pEditBox->setPosition(ccp(visibleSize.width/2, visibleSize.height*3/4));
pEditBox->setFontColor(ccRED);//設定字型顏色
pEditBox->setPlaceHolder("please input:");//設定預置文字
pEditBox->setMaxLength(8);//設定最大長度

//      kEditBoxInputModeAny:         開啟任何文字的輸入鍵盤,包括換行
//      kEditBoxInputModeEmailAddr:   開啟 郵件地址 輸入型別鍵盤
//      kEditBoxInputModeNumeric:     開啟 數字符號 輸入型別鍵盤
//      kEditBoxInputModePhoneNumber: 開啟 電話號碼 輸入型別鍵盤
//      kEditBoxInputModeUrl:         開啟 URL 輸入型別鍵盤
//      kEditBoxInputModeDecimal:     開啟 數字 輸入型別鍵盤，允許小數點
//      kEditBoxInputModeSingleLine:  開啟任何文字的輸入鍵盤,不包括換行
pEditBox->setInputMode(kEditBoxInputModeAny);//設定輸入型別

//kEditBoxInputFlagPassword:				密碼形式輸入
//kEditBoxInputFlagSensitive:				敏感資料輸入、儲存輸入方案且預測自動完成
//kEditBoxInputFlagInitialCapsWord:			每個單詞首字母大寫,並且伴有提示
//kEditBoxInputFlagInitialCapsSentence:		第一句首字母大寫,並且伴有提示
//kEditBoxInputFlagInitialCapsAllCharacters:所有字元自動大寫
pEditBox->setInputFlag(kEditBoxInputFlagPassword);//設定輸入標誌位

//      kKeyboardReturnTypeDefault:  預設使用鍵盤return 型別
//      kKeyboardReturnTypeDone:     預設使用鍵盤return型別為“Done”字樣
//      kKeyboardReturnTypeSend:     預設使用鍵盤return型別為“Send”字樣	
//      kKeyboardReturnTypeSearch:   預設使用鍵盤return型別為“Search”字樣
//      kKeyboardReturnTypeGo:       預設使用鍵盤return型別為“Go”字樣
pEditBox->setReturnType(kKeyboardReturnTypeDone);//設定返回型別
pEditBox->setDelegate(this);//當前類繼承CCEditBoxDelegate類
addChild(pEditBox);

void TestLayer::editBoxEditingDidBegin(CCEditBox *editBox)
{
	CCLOG("start edit");
}
void TestLayer::editBoxEditingDidEnd(CCEditBox *editBox)
{
	CCLOG("end edit");
}
void TestLayer::editBoxReturn(CCEditBox *editBox)
{
	CCLOG("editbox return");
}
void TestLayer::editBoxTextChanged(CCEditBox *editBox, const std::string &text)
{
	CCLOG("text changed");
}

3.結合點九圖按鈕的使用，效果圖如下：

4.原始碼下載