cocos2d 详细类之EditBox 做文档查看

  cocos2dx引擎为我们提供了两类编辑框的控件：

        （1）CCTextFieldTTF（基于CCLabelTTF）

        （2）CCEditBox（基于CCControlButton）

    本节继续讲另一个编辑框控件CCEditBox吧。

【小知识】

    IME：        是指Input Method Editors，即输入法编辑器。

    placeholder：默认显示的内容。即编辑框的输入内容为空时，显示的内容。

    默认内容：   当编辑框的输入内容为空时，显示的内容。

    输入内容：   使用虚拟键盘，输入到编辑框中的内容。

【3.x】

    （1）去掉“CC”

    （2）设置虚拟键盘的编辑类型

        > EditBoxInputMode 变为强枚举 EditBox::EditBoxInputMode

1 2 3 4 5 6 7 8 9

//     SINGLE_LINE                 //开启任何文本的输入键盘（不含换行）     ANY                         //开启任何文本的输入键盘（含换行）     DECIMAL                     //开启 数字 输入类型键盘（含小数点）     PHONE_NUMBER                //开启 电话号码 输入类型键盘     EMAIL_ADDRESS               //开启 邮件地址 输入类型键盘     NUMERIC                     //开启 数字符号 输入类型键盘     URL                         //开启 URL 输入类型键盘 //

    （3）设置输入的文本类型

        > EditBoxInputFlag 变为强枚举 EditBox::EditBoxInputFlag

1 2 3 4 5 6 7

//     PASSWORD                    //密码形式     SENSITIVE                   //敏感数据输入     INITIAL_CAPS_WORD           //每个单词首字符大写，并有提示     INITIAL_CAPS_SENTENCE       //第一句首字符大写，并有提示     INTIAL_CAPS_ALL_CHARACTERS  //自动大写 //

    （4）设置虚拟键盘中return键显示的字符

        > KeyboardReturnType 变为强枚举 EditBox::KeyboardReturnType

1 2 3 4 5 6 7

//     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、引入头文件和命名空间

1 2 3 4

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

2、创建方式

1 2 3 4 5 6 7 8 9

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

1 2 3 4 5 6 7 8 9

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

4、常用操作

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

// /**  *     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键显示的字符。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

// /**  *     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。

1 2 3 4 5 6 7 8 9 10

//     //开始编辑时     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创建的编辑框，不用额外的代码处理，点击编辑框区域就可以跳出键盘，点击非编辑框区域就可以隐藏键盘。所以不需要添加屏幕的触控事件。

1 2 3 4 5 6 7 8 9

//     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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

//     //编辑框尺寸大小         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日志。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

//     //开始编辑     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”。