cocos2dx基础篇(14)——编辑框之一CCTextFieldTTF

2025-01-27 技术教程

【唠叨】

前面我们讲了精灵贴图、标签、菜单、按钮。感觉似乎少了点什么？UI控件里是不是应该还有一个很重要的控件——编辑框。在手机网游中，启动游戏，过了开场动画后，基本上显示的第一个界面应该就是游戏的登录界面了吧。输入用户名、密码什么的，这些都是需要借助编辑框来实现输入的。点击文本，弹出虚拟键盘，输入账号密码，点击登录。

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

（1）CCTextFieldTTF（基于CCLabelTTF）

（2）CCEditBox（基于CCControlButton）

本节就先讲述一下CCTextFieldTTF吧。

【致谢】

http://gl.paea.cn/contents/ff7cec4ea13b9be4.html

http://blog.csdn.net/crayondeng/article/details/12175367

【小知识】

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

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

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

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

【Demo下载】

https://github.com/shahdza/Cocos_LearningTest/tree/master/demo_%E6%96%87%E6%9C%AC%E6%A1%86%E4%B9%8B%E4%B8%80CCTextFieldTTF

【3.x】

（1）去掉“CC”

（2）增加alpha透明度值：参数中的 Color3B 变为 Color4B

（3）setColor(const ccColor3B&) 改为 setTextColor(const Color4B&)

（4）CCLabelTTF 改为 Label

（4）其他3.x的变化：如触摸事件等等……也随之发生变化

【CCTextFieldTTF】

让我们先看一下CCTextFieldTTF的继承关系：

可见，CCTextFieldTTF的父类为：字体标签类CCLabelTTF、输入法代理类CCIMEDelegate。

其中CCLabelTTF之前是讲过的，它是一个用于显示文字的标签类。而CCIMEDelegate这个类主要是为子类提供了虚拟键盘的输入功能。

根据其继承关系，我们大致也可以猜测到CCTextFieldTTF是怎么实现的吧？这个估计就是一个动态的 CCLabelTTF ，通过不断监听输入的字符，动态设置标签的内容。

接下来就来讲讲它的使用方法吧！

1、创建方式

注意：CCTextFieldTTF的创建不是使用create，而是textFieldWithPlaceHolder。

//classCC_DLLCCTextFieldTTF:publicCCLabelTTF,publicCCIMEDelegate/***创建CCTextFieldTTF的两种方式*textFieldWithPlaceHolder*///placeholder：默认内容。即输入为空时显示的内容。//fontName：字体资源名。//fontSize：字体大小。//编辑框的大小为：CCLabelTTF的大小。且在输入的过程中，若内容超过编辑框的大小，会自动扩展。staticCCTextFieldTTF*textFieldWithPlaceHolder(constchar*placeholder,constchar*fontName,floatfontSize);//placeholder：默认内容。即编辑框的输入内容为空时，显示的内容。//dimensions：编辑框的尺寸大小。//alignment：文本内容的对齐方式。//kCCTextAlignmentLeft左对齐//kCCTextAlignmentCenter居中，默认方式//kCCTextAlignmentRight右对齐//编辑框的大小固定，不可扩展。staticCCTextFieldTTF*textFieldWithPlaceHolder(constchar*placeholder,constCCSize&dimensions,CCTextAlignmentalignment,constchar*fontName,floatfontSize);/***创建方式举例*/CCTextFieldTTF::textFieldWithPlaceHolder("PleaseClickMe!","MarkerFelt",24);CCTextFieldTTF::textFieldWithPlaceHolder("PleaseClickMe!",CCSizeMake(100,100),CCTextAlignment::kCCTextAlignmentCenter,"MarkerFelt",24);//

2、常用操作

委托代理对象、字符个数、默认内容及字体颜色、输入内容及字体颜色。

///***属性设置*setDelegate,getCharCount,*setPlaceHolder,setColorSpaceHolder,*setString,setColor*///设置编辑框的委托代理对象，一般为this//并且CCLayer必需要继承代理接口类CCTextFieldDelegate。CC_SYNTHESIZE(CCTextFieldDelegate*,m_pDelegate,Delegate);//获取字符个数，只读getCC_SYNTHESIZE_READONLY(int,m_nCharCount,CharCount);//设置编辑框默认内容。即输入为空时显示的内容virtualvoidsetPlaceHolder(constchar*text);virtualconstchar*getPlaceHolder();//设置编辑框默认内容的字体颜色virtualvoidsetColorSpaceHolder(constccColor3B&color);virtualconstccColor3B&getColorSpaceHolder();//设置编辑框输入内容virtualvoidsetString(constchar*text);virtualconstchar*getString();//设置编辑框输入内容的字体颜色virtualvoidsetColor(constccColor3B&color);virtualconstccColor3B&setColor();//

3、父类CCIMEDelegate向子类提供的函数

实现虚拟键盘的输入功能。

//virtualboolattachWithIME();//开启虚拟键盘，并允许输入。virtualbooldetachWithIME();//关闭虚拟键盘，并停止输入。//textFieldTTF->attachWithIME();//

4、事件委托代理接口类CCTextFieldDelegate

CCTextFieldDelegate类主要是用来侦听CCTextFieldTTF的使用状态，并设置事件的回调响应函数。

使用方法：在创建CCTextFieldTTF类的CCLayer类中，让CCLayer继承CCTextFieldDelegate，并重写如下四个事件回调响应函数。

////当用户启动虚拟键盘时的回调函数//启用键盘false;不启用键盘truevirtualboolonTextFieldAttachWithIME(CCTextFieldTTF*sender)//当用户关闭虚拟键盘时的回调函数//关闭键盘false;不关闭键盘truevirtualboolonTextFieldDetachWithIME(CCTextFieldTTF*sender)//当用户输入时的回调函数//允许输入字符false;不允许输入字符truevirtualboolonTextFieldInsertText(CCTextFieldTTF*sender,constchar*text,intnLen)//当用户删除文字时的回调函数//允许删除字符false;不允许删除字符truevirtualboolonTextFieldDeleteBackward(CCTextFieldTTF*sender,constchar*delText,intnLen)//

5、使用技巧

（1）创建CCTextFieldTTF后，设置编辑框的委托代理对象为当前CCLayer层，即setDelegate(this)。只有这样，继承于CCTextFieldDelegate的CCLayer就可以响应编辑框的事件，并执行回调函数。

（2）通过通过触碰事件Touch，判断触点是否触碰到编辑框内部，来决定是否开启虚拟键盘。触碰到内部，就开启；触碰到外部，就关闭。

（3）通过重写CCTextFieldDelegate的四个回调函数，来对编辑框的不同状态事件进行处理。

【代码实战】

（1）让HelloWorld类继承cocos2d::CCTextFieldDelegate，重写事件侦听函数。并在HelloWorld类中开启触控事件。

记得在onEnter和onExit中注册和注销触控事件哦！

//classHelloWorld:publiccocos2d::CCLayer,cocos2d::CCTextFieldDelegate{virtualboolonTextFieldAttachWithIME(CCTextFieldTTF*sender);//当用户启动虚拟键盘的时候的回调函数virtualboolonTextFieldDetachWithIME(CCTextFieldTTF*sender);//当用户关闭虚拟键盘的时候的回调函数virtualboolonTextFieldInsertText(CCTextFieldTTF*sender,constchar*text,intnLen);//当用户输入的时候的回调函数virtualboolonTextFieldDeleteBackward(CCTextFieldTTF*sender,constchar*delText,intnLen);//当用户删除文字的时候的回调函数//开启触控virtualboolccTouchBegan(CCTouch*touch,CCEvent*event);virtualvoidccTouchMoved(CCTouch*touch,CCEvent*event);virtualvoidccTouchEnded(CCTouch*touch,CCEvent*event);virtualvoidonEnter();virtualvoidonExit();};//

（2）在init()中创建编辑框CCTextFieldTTF，并给与Tag标记为tag = 1。

//CCTextFieldTTF*textFieldTTF=CCTextFieldTTF::textFieldWithPlaceHolder("pleaseinput","MarkerFelt",24);//CCTextFieldTTF*textFieldTTF=CCTextFieldTTF::textFieldWithPlaceHolder("pleaseinput",CCSize(100,100),CCTextAlignment::kCCTextAlignmentCenter,"Arial",20);textFieldTTF->setPosition(midPos);this->addChild(textFieldTTF,0,1);//tag标记1//设置编辑框的委托代理对象textFieldTTF->setDelegate(this);//

（3）编写触控事件回调函数。根据触点位置，判断开启或关闭虚拟键盘的输入功能。

//boolHelloWorld::ccTouchBegan(CCTouch*touch,CCEvent*event){CCLOG("ccTouchBegan");returntrue;}voidHelloWorld::ccTouchMoved(CCTouch*touch,CCEvent*event){CCLOG("ccTouchMoved");}voidHelloWorld::ccTouchEnded(CCTouch*touch,CCEvent*event){CCLOG("ccTouchEnded");//获取触点CCPointpos=touch->getLocation();//获取textFieldTTF所在的矩形区域rectCCTextFieldTTF*textFieldTTF=(CCTextFieldTTF*)this->getChildByTag(1);floatx=textFieldTTF->getPositionX()-textFieldTTF->getContentSize().width/2;floaty=textFieldTTF->getPositionY()-textFieldTTF->getContentSize().height/2;floatwidth=textFieldTTF->getContentSize().width;floatheight=textFieldTTF->getContentSize().height;CCRectrect=CCRectMake(x,y,width,height);//判断触点是否触摸到编辑框内部if(rect.containsPoint(pos)){CCLOG("attachWithIME");textFieldTTF->attachWithIME();//开启虚拟键盘}else{CCLOG("detachWithIME");textFieldTTF->detachWithIME();//关闭虚拟键盘}}//

（4）编写编辑框事件的回调函数。

当启用虚拟键盘，开始输入时，放大字体大小，并改变字体颜色。

当关闭虚拟键盘，停止输入时，还原字体大小，并改变字体颜色。

////当用户启动虚拟键盘的时候的回调函数boolHelloWorld::onTextFieldAttachWithIME(CCTextFieldTTF*sender){//事件处理sender->setFontSize(30);//字体放大为30sender->setColor(ccYELLOW);//内容颜色:***sender->setColorSpaceHolder(ccWHITE);//默认内容颜色:白色returnfalse;//启用键盘。若不启用键盘returntrue;}//当用户关闭虚拟键盘的时候的回调函数boolHelloWorld::onTextFieldDetachWithIME(CCTextFieldTTF*sender){//事件处理sender->setFontSize(24);//字体大小还原为24sender->setColor(ccORANGE);//内容颜色:橘黄sender->setColorSpaceHolder(ccGRAY);//默认内容颜色:灰色returnfalse;//关闭键盘。若不关闭键盘returntrue;}//当用户输入的时候的回调函数boolHelloWorld::onTextFieldInsertText(CCTextFieldTTF*sender,constchar*text,intnLen){//事件处理CCLOG("CharCount:%d",sender->getCharCount());returnfalse;//输入字符。若不允许输入字符returntrue;}//当用户删除文字的时候的回调函数boolHelloWorld::onTextFieldDeleteBackward(CCTextFieldTTF*sender,constchar*delText,intnLen){returnfalse;//删除字符。若不允许删除字符returntrue;}//

运行结果：

分析与总结：

（1）若编辑框中未输入任何字符时，文本显示的是默认内容“please input”。而当编辑框中有输入内容时，文本显示的是输入内容。

（2）编辑框的尺寸大小，会根据输入的内容大小，自动进行扩展。

（3）输入内容后，可以通过回车键（Enter）结束输入。可以通过回退键（BackSpace）删除字符。

（4）最最关键的问题是：说好的虚拟键盘呢？为什么是用电脑键盘输入的。好吧，因为Win32没有虚拟键盘，要是想看虚拟键盘的效果，就需要移植到手机上。

手机上的运行截图如下：

看到虚拟键盘，是不是很激动呀激动呀！