【唠叨】

前面我们讲了精灵贴图、标签、菜单、按钮。感觉似乎少了点什么？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"usingnamespacecocos2d::extension;//

2、创建方式

////create('编辑框大小','按钮正常背景','按钮按下背景','按钮禁用背景');staticCCEditBox*create(constCCSize&size,CCScale9Sprite*pNormal9SpriteBg,CCScale9Sprite*pPressed9SpriteBg=NULL,CCScale9Sprite*pDisabled9SpriteBg=NULL);//举例：//CCSizeeditBoxSize=CCSizeMake(300,60);//CCEditBox*editBoxName=CCEditBox::create(editBoxSize,CCScale9Sprite::create("green_edit.png"));//

3、委托代理

////设置编辑框的委托代理对象，一般为this//并且CCLayer必需要继承代理接口类CCEditBoxDelegate。voidsetDelegate(CCEditBoxDelegate*pDelegate);CCEditBoxDelegate*getDelegate();//举例：/editBoxName->setDelegate(this);//

4、常用操作

设置默认内容，输入内容，字体资源名、大小、颜色，最大字符数，编辑框尺寸大小。

///***setPlaceHolder,setPlaceholderFont,*setText,setFont,setMaxLength,*setPreferredSize*///设置编辑框的默认内容。即当输入内容为空时，显示的内容。voidsetPlaceHolder(constchar*pText);constchar*getPlaceHolder(void);//设置默认内容的字体//pFontName字体资源名//fontSize字体大小//color字体颜色voidsetPlaceholderFont(constchar*pFontName,intfontSize);voidsetPlaceholderFontName(constchar*pFontName);voidsetPlaceholderFontSize(intfontSize);voidsetPlaceholderFontColor(constccColor3B&color);//设置编辑框的输入内容setTextvoidsetText(constchar*pText);constchar*getText(void);//设置输入内容的字体//pFontName字体资源名//fontSize字体大小//color字体颜色voidsetFont(constchar*pFontName,intfontSize);voidsetFontName(constchar*pFontName);voidsetFontSize(intfontSize);voidsetFontColor(constccColor3B&color);//输入字符控制，允许输入的最大字符长度voidsetMaxLength(intmaxLength);intgetMaxLength();//设置编辑框大小voidsetPreferredSize(CCSizesize);//

5、设置编辑框的模式类型

虚拟键盘的类型、文本类型、虚拟键盘中return键显示的字符。

///***setInputMode,*setInputFlag,*setReturnType*///设置虚拟键盘的编辑类型EditBoxInputMode//kEditBoxInputModeSingleLine//开启任何文本的输入键盘（不含换行）//kEditBoxInputModeAny//开启任何文本的输入键盘（含换行）//kEditBoxInputModeDecimal//开启数字输入类型键盘（含小数点）//kEditBoxInputModePhoneNumber//开启电话号码输入类型键盘//kEditBoxInputModeEmailAddr//开启邮件地址输入类型键盘//kEditBoxInputModeNumeric//开启数字符号输入类型键盘//kEditBoxInputModeUrl//开启URL输入类型键盘voidsetInputMode(EditBoxInputModeinputMode);//设置输入的文本类型EditBoxInputFlag//kEditBoxInputFlagPassword//密码形式//kEditBoxInputFlagSensitive//敏感数据输入//kEditBoxInputFlagInitialCapsWord//每个单词首字符大写，并有提示//kEditBoxInputFlagInitialCapsSentence//第一句首字符大写，并有提示//kEditBoxInputFlagInitialCapsAllCharacters//自动大写voidsetInputFlag(EditBoxInputFlaginputFlag);//设置虚拟键盘中return键显示的字符//kKeyboardReturnTypeDefault//默认类型,"←"//kKeyboardReturnTypeDone//Done字样,"确定"//kKeyboardReturnTypeSend//Send字样,"发送"//kKeyboardReturnTypeSearch//Search字样,"搜索"//kKeyboardReturnTypeGo//Go字样,"链接"voidsetReturnType(KeyboardReturnTypereturnType);//

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

CCEditBoxDelegate类主要是用来侦听CCEditBox的使用状态，并设置事件的回调响应函数。

使用方法：在创建CCEditBox类的CCLayer类中，让CCLayer继承CCEditBoxDelegate，并重写如下四个事件回调响应函数。

整个编辑框的编辑过程为：开始编辑 => 文字改变 => 结束编辑 => 返回return。

////开始编辑时virtualvoideditBoxEditingDidBegin(CCEditBox*editBox);//结束编辑时virtualvoideditBoxEditingDidEnd(CCEditBox*editBox);//编辑框文字改变时virtualvoideditBoxTextChanged(CCEditBox*editBox,conststd::string&text);//触发return后virtualvoideditBoxReturn(CCEditBox*editBox);//

7、使用技巧

（1）创建CCEditBox后，设置编辑框的委托代理对象为当前CCLayer层，即setDelegate(this)。只有这样，继承于CCEditBoxDelegate的CCLayer就可以响应编辑框的事件，并执行回调函数。

（2）通过重写CCEditBoxDelegate的四个回调函数，来对编辑框的不同状态事件进行处理。

【代码实战】

代码来源于cocos2dx的官方项目TestCpp中。

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

字体：

编辑框按钮图片：

2、继承cocos2d::CCEditBoxDelegate，重写事件侦听函数

与CCTextFieldTTF不同的是：使用CCEditBox创建的编辑框，不用额外的代码处理，点击编辑框区域就可以跳出键盘，点击非编辑框区域就可以隐藏键盘。所以不需要添加屏幕的触控事件。

//classHelloWorld:publiccocos2d::CCLayer,CCEditBoxDelegate{virtualvoideditBoxEditingDidBegin(CCEditBox*editBox);//开始编辑virtualvoideditBoxEditingDidEnd(CCEditBox*editBox);//结束编辑virtualvoideditBoxTextChanged(CCEditBox*editBox,conststd::string&text);//编辑框文字改变virtualvoideditBoxReturn(CCEditBox*editBox);//触发return后的回调函数}//

3、在init()中创建三个编辑框CCEditBox

分别代表：用户名、密码、邮箱。并设置编辑框的相关属性，以及编辑框的模式类型。

////编辑框尺寸大小CCSizeeditBoxSize=CCSizeMake(mysize.width-100,60);//用户名editBoxNameCCEditBox*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/PaintBoy.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);//委托代理对象thiseditBoxName->setDelegate(this);//密码editBoxPasswordCCEditBox*editBoxPassword=CCEditBox::create(editBoxSize,CCScale9Sprite::create("orange_edit.png"));editBoxPassword->setPosition(midPos);this->addChild(editBoxPassword);//属性设置editBoxPassword->setFont("fonts/MarkerFelt.ttf",30);editBoxPassword->setFontColor(ccGREEN);editBoxPassword->setPlaceHolder("Password:");editBoxPassword->setMaxLength(6);//限制字符长度//模式设置editBoxPassword->setInputFlag(kEditBoxInputFlagPassword);editBoxPassword->setReturnType(kKeyboardReturnTypeDone);//委托代理对象thiseditBoxPassword->setDelegate(this);//邮箱editBoxEmailCCEditBox*editBoxEmail=CCEditBox::create(editBoxSize,CCScale9Sprite::create("yellow_edit.png"));editBoxEmail->setPosition(ccp(mysize.width/2,mysize.height/4));this->addChild(editBoxEmail);//属性设置editBoxEmail->setFont("fonts/MarkerFelt.ttf",30);editBoxEmail->setPlaceHolder("Email:");//模式类型设置editBoxEmail->setInputMode(kEditBoxInputModeEmailAddr);editBoxEmail->setReturnType(kKeyboardReturnTypeSend);//委托代理对象thiseditBoxEmail->setDelegate(this);//

4、编写编辑框事件的回调函数

在控制台输出LOG日志。

////开始编辑voidHelloWorld::editBoxEditingDidBegin(CCEditBox*editBox){CCLog("editBox%pDidBegin!",editBox);}//结束编辑voidHelloWorld::editBoxEditingDidEnd(CCEditBox*editBox){CCLog("editBox%pDidEnd!",editBox);}//编辑框内容改变voidHelloWorld::editBoxTextChanged(CCEditBox*editBox,conststd::string&text){CCLog("editBox%pTextChanged,text:%s",editBox,text.c_str());}//触发return返回voidHelloWorld::editBoxReturn(CCEditBox*editBox){CCLog("editBox%pwasreturned!",editBox);}//

5、运行结果

因为在win32下，无法开启虚拟键盘。所以我将其移植到android上进行测试。

6、分析与总结

（1）用户名我输入的是“dh”，按return键后，自动变成了大写“DH”。

（2）在输入密码时，显示的是“●”。并且长度限制为6位字符，超过六位后，就拒绝输入了。

（3）不知道大家有没有注意虚拟键盘的右下角的return键有什么变化。是不是每次的打开的虚拟键盘上的return键都不一样呢？“←”，“Done”，“Send”。