cocos2d-x-3.1 文本输入框简单使用

        cocos2d-x-3.1 文本输入框简单使用 (coco2d-x 学习笔记九)

分类： cocos2d-x 2014-06-19 23:12 466人阅读 评论(0) 收藏 举报

cocos2d-x3.1 文本输入框 TextFieldTTF EditBox

cocos2d-x提供2种可进行文本输入的方法，分别是TextFieldTTF及EditBox。本文将贴出这两种方法的简单使用代码，这里在使用EditBox时候使用了extensions的扩展库，读者需要自行添加引用到项目中，要不会出现找不到文件及编译不通过等错误，具体怎么添加及引用，我下篇文章则会给出答案。

http://blog.csdn.net/liu8297036/article/details/32381213

EditBox

EditBoxManager.h

[cpp] view plain copy print ?

1. #ifndef EDIT_BOX_MANAGER
2. #define EDIT_BOX_MANAGER
3. #include "cocos2d.h"
4. #include "extensions/cocos-ext.h"
6. USING_NS_CC;
7. USING_NS_CC_EXT;
9. class EditBoxManager :public Layer, public EditBoxDelegate{
10. public:
11. EditBoxManager();
13. //当编辑框获得焦点时将被调用
14. virtual void editBoxEditingDidBegin(EditBox* editBox);
15. //当编辑框失去焦点后将被调用
16. virtual void editBoxEditingDidEnd(EditBox* editBox);
17. //当编辑框内容发生改变将被调用
18. virtual void editBoxTextChanged(EditBox* editBox, const std::string& text);
19. //当编辑框的结束操作被调用
20. virtual void editBoxReturn(EditBox* editBox);
21. };
23. void runEditBoxManager();
25. #endif //EDIT_BOX_MANAGER

#ifndef EDIT_BOX_MANAGER
#define EDIT_BOX_MANAGER
#include "cocos2d.h"
#include "extensions/cocos-ext.h"

USING_NS_CC;
USING_NS_CC_EXT;

class EditBoxManager :public Layer, public EditBoxDelegate{
public:
	EditBoxManager();

	//当编辑框获得焦点时将被调用
	virtual void editBoxEditingDidBegin(EditBox* editBox);
	//当编辑框失去焦点后将被调用
	virtual void editBoxEditingDidEnd(EditBox* editBox);
	//当编辑框内容发生改变将被调用
	virtual void editBoxTextChanged(EditBox* editBox, const std::string& text);
	//当编辑框的结束操作被调用
	virtual void editBoxReturn(EditBox* editBox);
};

void runEditBoxManager();

#endif  //EDIT_BOX_MANAGER

EditBoxManager.cpp

[cpp] view plain copy print ?

1. #include "EditBoxManager.h"
2. #include "VisibleRect.h"
4. #define FONT_NAME "fonts/Marker Felt.ttf"
5. #define FONT_SIZE 26
7. void runEditBoxManager(){
8. auto scene = Scene::create();
9. EditBoxManager* layer = new EditBoxManager;
10. layer->autorelease(); //交给内存池进行管理
11. scene->addChild(layer);
13. Director::getInstance()->runWithScene(scene);
14. }
16. EditBoxManager::EditBoxManager(){
18. auto s = Size(250, 50); //设置编辑框大小
19. //Scale9Sprite类似android上的9图工具,可对图片进行拉伸而不失真
20. auto m9pic= Scale9Sprite::create("Images/green_edit.png");
22. auto mEditBox = EditBox::create(s, m9pic);
23. mEditBox->setFontName(FONT_NAME); //编辑框文本字体
24. mEditBox->setFontSize(FONT_SIZE); //编辑框文本大小
25. mEditBox->setFontColor(Color3B::BLUE); //编辑框文本颜色
26. mEditBox->setPlaceHolder("password:"); //编辑框提示语句
27. mEditBox->setPlaceholderFontColor(Color3B::GRAY); //编辑框提示语句颜色
28. mEditBox->setMaxLength(10); //编辑框文本长度
29. mEditBox->setInputFlag(EditBox::InputFlag::PASSWORD);//编辑框文本框输入类型
30. mEditBox->setInputMode(EditBox::InputMode::NUMERIC); //编辑框文本的输入模式
31. mEditBox->setDelegate(this); //注册编辑框协议
32. mEditBox->setPosition(VisibleRect::center());
33. addChild(mEditBox);
34. }
36. void EditBoxManager::editBoxEditingDidBegin(EditBox* editBox){
37. log("click");
38. }
39. void EditBoxManager::editBoxEditingDidEnd(EditBox* editBox){
40. log("leave click");
41. }
42. void EditBoxManager::editBoxTextChanged(EditBox* editBox, const std::string& text){
43. log("text change=%s", text.c_str());
44. }
45. void EditBoxManager::editBoxReturn(EditBox* editBox){
46. log("returned");
47. }

#include "EditBoxManager.h"
#include "VisibleRect.h"

#define FONT_NAME "fonts/Marker Felt.ttf"
#define FONT_SIZE 26

void runEditBoxManager(){
	auto scene = Scene::create();
	EditBoxManager* layer = new EditBoxManager;
	layer->autorelease();  //交给内存池进行管理
	scene->addChild(layer);

	Director::getInstance()->runWithScene(scene);
}

EditBoxManager::EditBoxManager(){

	auto s = Size(250, 50);  //设置编辑框大小
	//Scale9Sprite类似android上的9图工具,可对图片进行拉伸而不失真
	auto m9pic= Scale9Sprite::create("Images/green_edit.png");

	auto mEditBox = EditBox::create(s, m9pic);
	mEditBox->setFontName(FONT_NAME);		//编辑框文本字体
	mEditBox->setFontSize(FONT_SIZE);		//编辑框文本大小
	mEditBox->setFontColor(Color3B::BLUE);  //编辑框文本颜色
	mEditBox->setPlaceHolder("password:");  //编辑框提示语句
	mEditBox->setPlaceholderFontColor(Color3B::GRAY); //编辑框提示语句颜色
	mEditBox->setMaxLength(10);             //编辑框文本长度
	mEditBox->setInputFlag(EditBox::InputFlag::PASSWORD);//编辑框文本框输入类型
	mEditBox->setInputMode(EditBox::InputMode::NUMERIC); //编辑框文本的输入模式
	mEditBox->setDelegate(this);            //注册编辑框协议
	mEditBox->setPosition(VisibleRect::center());
	addChild(mEditBox);
}

void EditBoxManager::editBoxEditingDidBegin(EditBox* editBox){
	log("click");
}
void EditBoxManager::editBoxEditingDidEnd(EditBox* editBox){
	log("leave click");
}
void EditBoxManager::editBoxTextChanged(EditBox* editBox, const std::string& text){
	log("text change=%s", text.c_str());
}
void EditBoxManager::editBoxReturn(EditBox* editBox){
	log("returned");
}

TextFieldTTF

TextFieldTTF则比EditBox使用方式要复杂的多，可以进行自定义输入等，本文只实现简单的文本输入，如果读者要自己定制复杂动画等操作可以借鉴官方例子。

TextFiledTTFManager.h

[cpp] view plain copy print ?

1. #ifndef TEXT_FILED_TTF_MANAGER
2. #define TEXT_FILED_TTF_MANAGER
3. #include "cocos2d.h"
5. USING_NS_CC;
7. class keyBoradNotificationLayer :public Layer,public IMEDelegate
8. {
9. public:
10. keyBoradNotificationLayer();
12. //进行点击
13. virtual void onClickTrackNode(bool b)=0;
15. //键盘显示的时候执行的通知方法
16. virtual void keyboardWillShow(IMEKeyboardNotificationInfo& info);
18. virtual bool onTouchBegan(Touch *touch, Event *_event);
19. virtual void onTouchEnded(Touch *touch, Event *_event);
21. protected:
22. Node* _trackNode; //被选中的对象节点
23. Vec2 _beganPos; //开始点击区域
24. };
27. class TextFiledTTFTest :public keyBoradNotificationLayer{
29. virtual void onClickTrackNode(bool b);
31. virtual void onEnter(); //被载入场景时候调用
32. };
34. void runTextFiledTTFManager();
36. #endif //EDIT_BOX_MANAGER

#ifndef TEXT_FILED_TTF_MANAGER
#define TEXT_FILED_TTF_MANAGER
#include "cocos2d.h"

USING_NS_CC;

class keyBoradNotificationLayer :public Layer,public IMEDelegate
{
public:
	keyBoradNotificationLayer();

	//进行点击
	virtual void onClickTrackNode(bool b)=0;

	//键盘显示的时候执行的通知方法
	virtual void keyboardWillShow(IMEKeyboardNotificationInfo& info);

	virtual bool onTouchBegan(Touch *touch, Event *_event);
	virtual void onTouchEnded(Touch *touch, Event *_event);

protected:
	Node* _trackNode;  //被选中的对象节点
	Vec2 _beganPos;    //开始点击区域
};


class TextFiledTTFTest :public keyBoradNotificationLayer{

	virtual void onClickTrackNode(bool b);

	virtual void onEnter();  //被载入场景时候调用
};

void runTextFiledTTFManager();

#endif //EDIT_BOX_MANAGER

TextFiledTTFManager.cpp

[cpp] view plain copy print ?

1. #include "TextFiledTTFManager.h"
2. #include "VisibleRect.h"
4. #define FONT_NAME "fonts/Marker Felt.ttf"
5. #define FONT_SIZE 36
7. static Rect getRect(Node* node){
8. Rect rect;
9. rect.origin = node->getPosition();
10. rect.size = node->getContentSize();
11. rect.origin.x -= rect.size.width / 2;
12. rect.origin.y -= rect.size.height / 2;
13. return rect;
14. }
16. void runTextFiledTTFManager(){
17. auto scene = Scene::create();
19. TextFiledTTFTest* layer = new TextFiledTTFTest();
20. layer->autorelease(); //交给内存池进行管理
22. scene->addChild(layer);
24. Director::getInstance()->runWithScene(scene);
26. }
28. keyBoradNotificationLayer::keyBoradNotificationLayer():_trackNode(0){
29. auto listener = EventListenerTouchOneByOne::create();
31. listener->onTouchBegan = CC_CALLBACK_2(keyBoradNotificationLayer::onTouchBegan,this);
32. listener->onTouchEnded = CC_CALLBACK_2(keyBoradNotificationLayer::onTouchEnded, this);
34. _eventDispatcher->addEventListenerWithSceneGraphPriority(listener, this);
35. }
37. bool keyBoradNotificationLayer::onTouchBegan(Touch* touch, Event* event){
39. _beganPos = convertToNodeSpace(touch->getLocation());
41. return true;
42. }
44. void keyBoradNotificationLayer::onTouchEnded(Touch *touch, Event *event){
46. if (!_trackNode){
47. return;
48. }
50. auto _endPos = touch->getLocation();
52. //做了个判断,滑动差距大于5的话则代表不会被触发输入法
53. float distance = 5.0f;
54. if (abs(_endPos.x - _beganPos.x) > distance ||
55. abs(_endPos.y - _beganPos.y) > distance){
57. //抹掉首次触摸的值
58. _beganPos.x = _beganPos.y = -1;
60. return;
61. }
62. /*如果点击的区域是在此文本框上就打开输入法*/
63. Rect rect;
65. auto touchPoint = convertTouchToNodeSpaceAR(touch);
67. log("KeyboardNotificationLayer:clickedAt(%f,%f)", touchPoint.x, touchPoint.y);
69. rect = getRect(_trackNode);
71. log("KeyboardNotificationLayer:TrackNode at(origin:%f,%f, size:%f,%f)",
72. rect.origin.x, rect.origin.y, rect.size.width, rect.size.height);
74. this->onClickTrackNode(rect.containsPoint(touchPoint));
75. }
77. void keyBoradNotificationLayer::keyboardWillShow(IMEKeyboardNotificationInfo& info){
79. Rect rect = getRect(_trackNode);
81. log(" jin ");
83. //_trackNode和键盘的交集监测
84. if (!rect.intersectsRect(info.end)){
85. return;
86. }
87. //计算软键盘需要的高度
88. float adjustHeight = info.end.getMaxY() - rect.getMinY();
90. /*调整所有的子节点*/
91. auto& children = getChildren();
92. Node * node = 0;
93. ssize_t count = children.size();
94. Vec2 pos;
95. for (int i = 0; i < count; ++i)
96. {
97. node = children.at(i);
98. pos = node->getPosition();
99. pos.y += adjustHeight;
100. node->setPosition(pos);
101. }
103. }
105. void TextFiledTTFTest::onClickTrackNode(bool b){
106. auto mTextFiled = (TextFieldTTF*)_trackNode;
108. if (b){
109. mTextFiled->attachWithIME();
110. }
111. else{
112. mTextFiled->detachWithIME();
113. }
114. }
116. void TextFiledTTFTest::onEnter(){
117. keyBoradNotificationLayer::onEnter(); //必须先调用父类的onEnter方法
119. auto s = Director::getInstance()->getWinSize();
121. auto mTextFiled = TextFieldTTF::textFieldWithPlaceHolder("click here for input", FONT_NAME, FONT_SIZE);
123. mTextFiled->setPosition(VisibleRect::center());
125. addChild(mTextFiled);
127. _trackNode = mTextFiled;
128. }