Cocos2d-x3.1中EditBox使用

EditBox用来完成登陆框的设计，但是一个坏处是不能进行相对布局。源码如下：

//.h
class EditBox
: public ControlButton
, public IMEDelegate
{
public:
    enum class KeyboardReturnType  //按键响应类型
    {
        DEFAULT,
        DONE,
        SEND,
        SEARCH,
        GO
    };
    
    /**
     * \brief The EditBox::InputMode defines the type of text that the user is allowed
     * to enter.
     */
    enum class InputMode  //输入数据类型
    {
        /**
         * The user is allowed to enter any text, including line breaks.
         */
        ANY, //任何数据
        
        /**
         * The user is allowed to enter an e-mail address.
         */
        EMAIL_ADDRESS,//邮件地址
        
        /**
         * The user is allowed to enter an integer value.
         */
        NUMERIC,//数字
        
        /**
         * The user is allowed to enter a phone number.
         */
        PHONE_NUMBER,//电话号码
        
        /**
         * The user is allowed to enter a URL.
         */
        URL,//网址
        
        /**
         * The user is allowed to enter a real number value.
         * This extends kEditBoxInputModeNumeric by allowing a decimal point.
         */
        DECIMAL,//小数
        
        /**
         * The user is allowed to enter any text, except for line breaks.
         */
        SINGLE_LINE,//单行输入
    };
    
    /**
     * \brief The EditBox::InputFlag defines how the input text is displayed/formatted.
     */
    enum class InputFlag//输入Flag
    {
        /**
         * Indicates that the text entered is confidential data that should be
         * obscured whenever possible. This implies EDIT_BOX_INPUT_FLAG_SENSITIVE.
         */
        PASSWORD,//密码
        
        /**
         * Indicates that the text entered is sensitive data that the
         * implementation must never store into a dictionary or table for use
         * in predictive, auto-completing, or other accelerated input schemes.
         * A credit card number is an example of sensitive data.
         */
        SENSITIVE,//各种卡号
        
        /**
         * This flag is a hint to the implementation that during text editing,
         * the initial letter of each word should be capitalized.
         */
        INITIAL_CAPS_WORD,//每个单词首字母大写
        
        /**
         * This flag is a hint to the implementation that during text editing,
         * the initial letter of each sentence should be capitalized.
         */
        INITIAL_CAPS_SENTENCE, //每句话首字母大写
        
        /**
         * Capitalize all characters automatically.
         */
        INTIAL_CAPS_ALL_CHARACTERS,//
    };
    
    /**
     * create a edit box with size.
     * @return An autorelease pointer of EditBox, you don't need to release it only if you retain it again.
     */只有使用retain才需要执行release
    static EditBox* create(const Size& size, Scale9Sprite* pNormal9SpriteBg, Scale9Sprite* pPressed9SpriteBg = NULL, Scale9Sprite* pDisabled9SpriteBg = NULL);
    //第一个参数EditBox的Size，第二、三、四个参数是一个Scale9Sprite，第三、四个参数默认值为NULL
    /**
     * Constructor.
     * @js ctor
     */
    EditBox(void);
    
    /**
     * Destructor.
     * @js NA
     * @lua NA
     */
    virtual ~EditBox(void);

    /**
     * Init edit box with specified size. This method should be invoked right after constructor.
     * @param size The size of edit box.
     *///使用Size和Scale9Sprite对象初始化
    bool initWithSizeAndBackgroundSprite(const Size& size, Scale9Sprite* pNormal9SpriteBg);
    
    /**
     * Gets/Sets the delegate for edit box.
     * @lua NA
     *///设置委托：<span style="font-family: Arial, sans-serif; font-size: 14px; line-height: 24px; color: rgb(99, 140, 11);">委托</span><span style="color: rgb(67, 67, 67); font-family: Arial, sans-serif; font-size: 14px; line-height: 24px;">（</span><span style="font-family: Arial, sans-serif; font-size: 14px; line-height: 24px; color: rgb(99, 140, 11);">Delegate</span><span style="color: rgb(67, 67, 67); font-family: Arial, sans-serif; font-size: 14px; line-height: 24px;">）是面向对象的回调方法，</span><span style="font-family: Arial, sans-serif; font-size: 14px; line-height: 24px; color: rgb(99, 140, 11);">委托</span><span style="color: rgb(67, 67, 67); font-family: Arial, sans-serif; font-size: 14px; line-height: 24px;">提供了一个单一的对象来接收所有的事件消息。</span><span style="font-family: Arial, sans-serif; font-size: 14px; line-height: 24px; color: rgb(99, 140, 11);">委托</span><span style="color: rgb(67, 67, 67); font-family: Arial, sans-serif; font-size: 14px; line-height: 24px;">对象可以存储、操作、响应、转播相关的消息等等。
</span>    void setDelegate(EditBoxDelegate* pDelegate);
    /**
     * @js NA
     * @lua NA
     */
    EditBoxDelegate* getDelegate();
    
#if CC_ENABLE_SCRIPT_BINDING
    /**
     * Registers a script function that will be called for EditBox events.
     *
     * This handler will be removed automatically after onExit() called.
     * @code
     * -- lua sample
     * local function editboxEventHandler(eventType)
     *     if eventType == "began" then
     *         -- triggered when an edit box gains focus after keyboard is shown
     *     elseif eventType == "ended" then
     *         -- triggered when an edit box loses focus after keyboard is hidden.
     *     elseif eventType == "changed" then
     *         -- triggered when the edit box text was changed.
     *     elseif eventType == "return" then
     *         -- triggered when the return button was pressed or the outside area of keyboard was touched.
     *     end
     * end
     *
     * local editbox = EditBox:create(Size(...), Scale9Sprite:create(...))
     * editbox = registerScriptEditBoxHandler(editboxEventHandler)
     * @endcode
     *
     * @param handler A number that indicates a lua function.
     * @js NA
     * @lua NA
     */
    void registerScriptEditBoxHandler(int handler);
    
    /**
     * Unregisters a script function that will be called for EditBox events.
     * @js NA
     * @lua NA
     */
    void unregisterScriptEditBoxHandler(void);
    /**
     * get a script Handler
     * @js NA
     * @lua NA
     */
    int  getScriptEditBoxHandler(void){ return _scriptEditBoxHandler ;}
    
#endif // #if CC_ENABLE_SCRIPT_BINDING
    
    /**
     * Set the text entered in the edit box.
     * @param pText The given text.
     */
    void setText(const char* pText);
    
    /**
     * Get the text entered in the edit box.
     * @return The text entered in the edit box.
     */
    const char* getText(void);
	
	/**
	 * Set the font.
	 * @param pFontName The font name.
	 * @param fontSize The font size.
	 */
	void setFont(const char* pFontName, int fontSize);
    
	/**
	 * Set the font name.
	 * @param pFontName The font name.
	 */
	void setFontName(const char* pFontName);
    
    /**
	 * Set the font size.
	 * @param fontSize The font size.
	 */
	void setFontSize(int fontSize);
    
    /**
     * Set the font color of the widget's text.
     */
    void setFontColor(const Color3B& color);
    
	/**
	 * Set the placeholder's font.
	 * @param pFontName The font name.
	 * @param fontSize The font size.
	 *///设置占位符字体
	void setPlaceholderFont(const char* pFontName, int fontSize);
    
    /**
	 * Set the placeholder's font name.
	 * @param pFontName The font name.
	 */
	void setPlaceholderFontName(const char* pFontName);
    
    /**
	 * Set the placeholder's font size.
	 * @param fontSize The font size.
	 */
	void setPlaceholderFontSize(int fontSize);
    
    /**
     * Set the font color of the placeholder text when the edit box is empty.
     * Not supported on IOS.
     *///占位符字体颜色
    void setPlaceholderFontColor(const Color3B& color);
    
    /**
     * Set a text in the edit box that acts as a placeholder when an
     * edit box is empty.
     * @param pText The given text.
     *///占位符内容
    void setPlaceHolder(const char* pText);
    
    /**
     * Get a text in the edit box that acts as a placeholder when an
     * edit box is empty.
     *///获取占位符内容
    const char* getPlaceHolder(void);
    
    /**
     * Set the input mode of the edit box.
     * @param inputMode One of the EditBox::InputMode constants.
     *///设置输入模式，在上面定义的enum
    void setInputMode(InputMode inputMode);
    
    /**
     * Sets the maximum input length of the edit box.
     * Setting this value enables multiline input mode by default.
     * Available on Android, iOS and Windows Phone.
     *
     * @param maxLength The maximum length.
     *///设置最大长度
    void setMaxLength(int maxLength);
    
    /**
     * Gets the maximum input length of the edit box.
     *
     * @return Maximum input length.
     *///获取最大长度
    int getMaxLength();
    
    /**
     * Set the input flags that are to be applied to the edit box.
     * @param inputFlag One of the EditBox::InputFlag constants.
     *///设置输入Flag
    void setInputFlag(InputFlag inputFlag);
    
    /**
     * Set the return type that are to be applied to the edit box.
     * @param returnType One of the EditBox::KeyboardReturnType constants.
     *///设置键盘返回
    void setReturnType(EditBox::KeyboardReturnType returnType);
    
    /* override functions *///重载类
    virtual void setPosition(const Vec2& pos) override;
    virtual void setVisible(bool visible) override;
    virtual void setContentSize(const Size& size) override;
	virtual void setAnchorPoint(const Vec2& anchorPoint) override;
    /**
     * @js NA
     * @lua NA
     */
    virtual void visit(Renderer *renderer, const Mat4 &parentTransform, bool parentTransformUpdated) override;
    /**
     * @js NA
     * @lua NA
     */
	virtual void onEnter(void) override;
    /**
     * @js NA
     * @lua NA
     */
    virtual void onExit(void) override;
    /**
     * @js NA
     * @lua NA
     */
    virtual void keyboardWillShow(IMEKeyboardNotificationInfo& info) override;
    /**
     * @js NA
     * @lua NA
     */
    virtual void keyboardDidShow(IMEKeyboardNotificationInfo& info) override;
    /**
     * @js NA
     * @lua NA
     */
    virtual void keyboardWillHide(IMEKeyboardNotificationInfo& info) override;
    /**
     * @js NA
     * @lua NA
     */
    virtual void keyboardDidHide(IMEKeyboardNotificationInfo& info) override;
    
    /* callback funtions
     * @js NA
     * @lua NA
     */
    void touchDownAction(Ref *sender, Control::EventType controlEvent);
    
protected:
    void updatePosition(float dt);
    EditBoxImpl*      _editBoxImpl;
    EditBoxDelegate*  _delegate;
    
    InputMode    _editBoxInputMode;
    InputFlag    _editBoxInputFlag;
    EditBox::KeyboardReturnType  _keyboardReturnType;
    
    std::string _text;
    std::string _placeHolder;
    
    std::string _fontName;
    std::string _placeholderFontName;
    
    int _fontSize;
    int _placeholderFontSize;
    
    Color3B _colText;
    Color3B _colPlaceHolder;
    
    int   _maxLength;
    float _adjustHeight;
#if CC_ENABLE_SCRIPT_BINDING
    int   _scriptEditBoxHandler;
#endif
};

NS_CC_EXT_END

使用实例

//.h
#include "cocos2d.h"
#include "ui/CocosGUI.h"
#include "extensions/cocos-ext.h"
USING_NS_CC;
using namespace ui;

class EditBoxTest : public Layout, public cocos2d::extension::EditBoxDelegate
{
public:
    EditBoxTest();
    virtual ~EditBoxTest();
    void toExtensionsMainLayer(cocos2d::Ref *sender);
    
    virtual void editBoxEditingDidBegin(cocos2d::extension::EditBox* editBox);
    virtual void editBoxEditingDidEnd(cocos2d::extension::EditBox* editBox);
    virtual void editBoxTextChanged(cocos2d::extension::EditBox* editBox, const std::string& text);
    virtual void editBoxReturn(cocos2d::extension::EditBox* editBox);
private:
    cocos2d::Label* _TTFShowEditReturn;
    cocos2d::extension::EditBox* _editName;
    cocos2d::extension::EditBox* _editPassword;
    cocos2d::extension::EditBox* _editEmail;
};

//.cpp
#include "EditBoxTest.h"

USING_NS_CC;
USING_NS_CC_EXT;


EditBoxTest::EditBoxTest()
{
    auto glview = Director::getInstance()->getOpenGLView();
    auto visibleOrigin = glview->getVisibleOrigin();
    auto visibleSize = glview->getVisibleSize();
    
    auto pBg = Sprite::create("HelloWorld.png");
    pBg->setPosition(Vec2(visibleOrigin.x+visibleSize.width/2, visibleOrigin.y+visibleSize.height/2));
    addChild(pBg);
    
    _TTFShowEditReturn = Label::createWithSystemFont("No edit control return!", "", 30);
    _TTFShowEditReturn->setPosition(Vec2(visibleOrigin.x+visibleSize.width/2, visibleOrigin.y + visibleSize.height - 50));
    addChild(_TTFShowEditReturn);
    
    // Back Menu
    auto itemBack = MenuItemFont::create("Back", CC_CALLBACK_1(EditBoxTest::toExtensionsMainLayer, this));
    itemBack->setPosition(Vec2(visibleOrigin.x+visibleSize.width - 50, visibleOrigin.y+25));
    auto menuBack = Menu::create(itemBack, NULL);
    menuBack->setPosition(Vec2::ZERO);
    addChild(menuBack);
    
    auto editBoxSize = Size(visibleSize.width - 100, 60);
    
    // top
    _editName = EditBox::create(editBoxSize, Scale9Sprite::create("green_edit.png"));
    _editName->setPosition(Vec2(visibleOrigin.x+visibleSize.width/2, visibleOrigin.y+visibleSize.height*3/4));
    _editName->setFontName("Paint Boy");
    _editName->setFontSize(25);
    _editName->setFontColor(Color3B::RED);
    _editName->setPlaceHolder("Name:");
    _editName->setPlaceholderFontColor(Color3B::WHITE);
    _editName->setMaxLength(8);
    _editName->setReturnType(EditBox::KeyboardReturnType::DONE);
    _editName->setDelegate(this);
    addChild(_editName);
    
    // middle
    _editPassword = EditBox::create(editBoxSize, Scale9Sprite::create("green_edit.png"));
    _editPassword->setPosition(Vec2(visibleOrigin.x+visibleSize.width/2, visibleOrigin.y+visibleSize.height/2));
#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
	_editPassword->setFont("American Typewriter", 30);
#else
    _editPassword->setFont("American Typewriter", 80);
    _editPassword->setPlaceholderFont("American Typewriter", 80);
#endif
    _editPassword->setFontColor(Color3B::GREEN);
    _editPassword->setPlaceHolder("Password:");
    _editPassword->setMaxLength(6);
    _editPassword->setInputFlag(EditBox::InputFlag::PASSWORD);
    _editPassword->setInputMode(EditBox::InputMode::SINGLE_LINE);
    _editPassword->setDelegate(this);
    addChild(_editPassword);
    
    // bottom
    _editEmail = EditBox::create(Size(editBoxSize.width, editBoxSize.height), Scale9Sprite::create("green_edit.png"));
    _editEmail->setPosition(Vec2(visibleOrigin.x+visibleSize.width/2, visibleOrigin.y+visibleSize.height/4));
    _editEmail->setAnchorPoint(Vec2(0.5, 1.0f));
    _editEmail->setPlaceHolder("Email:");
    _editEmail->setInputMode(EditBox::InputMode::EMAIL_ADDRESS);
    _editEmail->setDelegate(this);
    addChild(_editEmail);
    
    this->setPosition(Vec2(10, 20));
}

EditBoxTest::~EditBoxTest()
{
    
}

void EditBoxTest::toExtensionsMainLayer(cocos2d::Ref *sender)
{
//    auto scene = new ExtensionsTestScene();
//    scene->runThisTest();
//    scene->release();
}

void EditBoxTest::editBoxEditingDidBegin(cocos2d::extension::EditBox* editBox)
{
    log("editBox %p DidBegin !", editBox);
}

void EditBoxTest::editBoxEditingDidEnd(cocos2d::extension::EditBox* editBox)
{
    log("editBox %p DidEnd !", editBox);
}

void EditBoxTest::editBoxTextChanged(cocos2d::extension::EditBox* editBox, const std::string& text)
{
    log("editBox %p TextChanged, text: %s ", editBox, text.c_str());
}

void EditBoxTest::editBoxReturn(EditBox* editBox)
{
    log("editBox %p was returned !",editBox);
    
    if (_editName == editBox)
    {
        _TTFShowEditReturn->setString("Name EditBox return !");
    }
    else if (_editPassword == editBox)
    {
        _TTFShowEditReturn->setString("Password EditBox return !");
    }
    else if (_editEmail == editBox)
    {
        _TTFShowEditReturn->setString("Email EditBox return !");
    }
}

<pre name="code" class="cpp">//AppDelegate.cpp中添加

    auto scene = Scene::create();

    EditBoxTest *layer = new EditBoxTest();

    scene->addChild(layer);

    // run

    director->runWithScene(scene);

运行结果