【唠叨】
前面我们讲了精灵贴图、标签、菜单、按钮。感觉似乎少了点什么?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"
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”。