cocos2dx3.16引擎为我们提供了两类编辑框的控件:
(1)CCTextFieldTTF(基于CCLabelTTF)
self.textField = self.node_root:getChildByName("TextField")self.textField:setSingleLineEnabled(false) -- true:单行输入 false:多行输入-- self.textField:setFontName("res/font/Arial.ttf")-- self.textField:setInputMode(cc.EDITBOX_INPUT_MODE_ANY) -- ExtensionConstants.luaself.textField:addEventListener(function(sender, eventType)-- GuiConstants.luaif eventType == 0 then-- print("ccui.TextFiledEventType.attach_with_ime")elseif eventType == 1 then-- print("ccui.TextFiledEventType.detach_with_ime")elseif eventType == 2 then-- print("ccui.TextFiledEventType.insert_text")print(sender:getString())elseif eventType == 3 then-- print("ccui.TextFiledEventType.delete_backward")endend)
(2)CCEditBox(基于CCControlButton)
self.editBox_bg = self.node_root:getChildByName("editBox_bg")self.editBox = ccui.EditBox:create(self.editBox_bg:getContentSize(), "res/editbox_bg.png", ccui.TextureResType.plistType)self.editBox:setPlaceHolder("占位文本")self.editBox:setInputMode(6)self.editBox:setInputFlag(cc.EDITBOX_INPUT_FLAG_INITIAL_CAPS_WORD) -- ExtensionConstants.luaself.editBox:setReturnType(cc.KEYBOARD_RETURNTYPE_DONE) -- ExtensionConstants.luaself.editBox:setAnchorPoint(cc.p(0, 0.5))self.editBox:setPosition(self.editBox_bg:getPosition())self.editBox:setFontColor(cc.c3b(255, 255, 255))self.editBox:registerScriptEditBoxHandler(function(eventType)if eventType == "began" then-- print("began")elseif eventType == "return" or eventType == "ended" then-- print(eventType)print(self.editBox:getText())elseif eventType == "changed" then-- print("changed")endend)self.node_root:addChild(self.editBox)
(3)使用Text显示多行内容模拟EditBox多行输入:
-- 用于显示EditBox输入的内容self.showText = self.node_root:getChildByName("Text")self.showText:setTouchEnabled(false)self.showText:setString("占位文本")-- 可点击的背景图片,点击触发EditBox的点击事件self.editBox_bg = self.node_root:getChildByName("editBox_bg")self.editBox_bg:setTouchEnabled(true)self.editBox_bg:addTouchEventListener(function(sender, eventType)if eventType == ccui.TouchEventType.ended thenself.editBox:touchDownAction(self.editBox, ccui.TouchEventType.ended)endend)-- EditBox,隐藏self.editBox = ccui.EditBox:create(self.editBox_bg:getContentSize(), "res/editbox_bg.png", ccui.TextureResType.plistType)self.editBox:setInputMode(6)self.editBox:setInputFlag(cc.EDITBOX_INPUT_FLAG_INITIAL_CAPS_WORD) -- ExtensionConstants.luaself.editBox:setReturnType(cc.KEYBOARD_RETURNTYPE_DONE) -- ExtensionConstants.luaself.editBox:setAnchorPoint(cc.p(0, 1))self.editBox:setPosition(self.editBox_bg:getPosition())self.editBox:setFontColor(cc.c3b(255, 255, 255))self.editBox:setVisible(false)self.editBox:registerScriptEditBoxHandler(function(eventType)if eventType == "return" or eventType == "ended" thenlocal str = self.editBox:getText()if str ~= "" then-- 输入内容用Text显示self.showText:setString(str)endendend)self.node_root:addChild(self.editBox)
【小知识】
IME: 是指Input Method Editors,即输入法编辑器。
placeholder:默认显示的内容。即编辑框的输入内容为空时,显示的内容。
默认内容: 当编辑框的输入内容为空时,显示的内容。
输入内容: 使用虚拟键盘,输入到编辑框中的内容。
【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/ui/UIEditBox/UIEditBox.h"
类要继承于:EditBoxDelegate
class Management : public cocos2d::Scene, public EditBoxDelegate
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);//设置编辑框的输入内容setTextvoid 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的四个回调函数,来对编辑框的不同状态事件进行处理。
class Management : public cocos2d::Scene, public EditBoxDelegate{public:static cocos2d::Scene* createScene();virtual bool init();// a selector callbackvoid touchCallBack(cocos2d::Ref* pSender, TouchEventType type);// implement the "static create()" method manuallyCREATE_FUNC(Management);virtual void editBoxEditingDidBegin(EditBox* editBox);virtual void editBoxEditingDidEnd(EditBox* editBox);virtual void editBoxTextChanged(EditBox* editBox, const std::string &text);virtual void editBoxReturn(EditBox *editBox);};#endif // __MANAGERMENT_SCENE_H__void Management::GetLogonAccPwd(){auto _acc = (TextField*)m_LogonNode->getChildByName("TextField_1");_acc->setVisible(false);auto _img1 = (ImageView*)m_LogonNode->getChildByName("Image_1");_img1->setVisible(false);auto accBox = EditBox::create(_img1->getContentSize(), Scale9Sprite::create("management/img_inputBg.png"));accBox->setPosition(_img1->getPosition());accBox->setAnchorPoint(CCPoint::ANCHOR_MIDDLE);accBox->setFontSize(36);accBox->setFontColor(Color3B::WHITE);//Color3B(0, 0, 0)accBox->setPlaceHolder(_acc->getPlaceHolder().c_str());accBox->setReturnType(EditBox::KeyboardReturnType::DONE);accBox->setInputMode(EditBox::InputMode::SINGLE_LINE);//accBox->setTouchEnabled(true);accBox->setDelegate(this);accBox->setMaxLength(20);accBox->setTag(101);m_LogonNode->addChild(accBox);//auto _pwd = (TextField*)m_LogonNode->getChildByName("TextField_2");_pwd->setVisible(false);auto _img2 = (ImageView*)m_LogonNode->getChildByName("Image_2");_img2->setVisible(false);auto pwdBox = EditBox::create(_img2->getContentSize(), Scale9Sprite::create("management/img_inputBg.png"));pwdBox->setPosition(_img2->getPosition());pwdBox->setAnchorPoint(CCPoint::ANCHOR_MIDDLE);pwdBox->setFontSize(36);pwdBox->setFontColor(Color3B::WHITE);pwdBox->setPlaceHolder(_pwd->getPlaceHolder().c_str());pwdBox->setReturnType(EditBox::KeyboardReturnType::DONE);pwdBox->setInputMode(EditBox::InputMode::SINGLE_LINE);pwdBox->setInputFlag(EditBox::InputFlag::PASSWORD);//pwdBox->setTouchEnabled(true);pwdBox->setDelegate(this);pwdBox->setMaxLength(20);pwdBox->setTag(102);m_LogonNode->addChild(pwdBox);}void Management::editBoxEditingDidBegin(EditBox *editBox){CCLOG("start edit");}void Management::editBoxEditingDidEnd(EditBox *editBox){CCLOG("end edit");}void Management::editBoxReturn(EditBox *editBox){CCLOG("editbox return");}void Management::editBoxTextChanged(EditBox *editBox, const std::string &text){auto editbox = (EditBox*)editBox;switch (editBox->getTag()){case 101:CCLOG("EditBox_name changed");m_account = text;break;case 102:CCLOG("EditBox_password changed");m_password = text;break;default:break;}CCLOG("acc:%s--pwd:%s", m_account.c_str(), m_password.c_str());}