cocos2dx基础篇(13) 编辑框之二CCEditBox

【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字样, "链接"
//

CCEditBox的父类为:按钮控件类CCControlButton、输入法代理类CCIMEDelegate

    其中CCControlButton之前是讲过的,它是一个具有许多按钮事件,且使用CCScale9Sprite作为背景图片的按钮类。而CCIMEDelegate这个类主要是为子类提供了虚拟键盘的输入功能。

    根据其继承关系,我们大致也可以猜测到CCEditBox是怎么实现的吧?如果说CCTextFieldTTF是一个动态的CCLabelTTF,那么可以将CCEditBox看做是一个动态的CCControlButton,通过不断监听输入的字符,动态设置按钮的标签内容。

    其实CCEditBox的用法和CCTectFieldTTF是非常相似的。不过主要的区别在于

使用CCEditBox创建的编辑框,不用额外的代码处理,点击编辑框区域就可以跳出键盘,点击非编辑框区域就可以隐藏键盘。而CCTectFieldTTF却需要手动处理。即父类CCIMEDelegate向子类提供的函数:attachWithIME()、detachWithIME(),对于CCEditBox而言,不需要手动进行处理。

1、引入头文件和命名空间

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

2、创建方式

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

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

4、常用操作

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

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

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

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

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

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

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

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

猜你喜欢

转载自blog.csdn.net/qq_40338728/article/details/81355311