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

原创 2014年06月19日 23:12:44

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


EditBox


EditBoxManager.h

#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

#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

#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

#include "TextFiledTTFManager.h"
#include "VisibleRect.h"

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

static Rect getRect(Node* node){
	Rect rect;
	rect.origin = node->getPosition();
	rect.size = node->getContentSize();
	rect.origin.x -= rect.size.width / 2;
	rect.origin.y -= rect.size.height / 2;
	return rect;
}

void runTextFiledTTFManager(){
	auto scene = Scene::create();

	TextFiledTTFTest* layer = new TextFiledTTFTest();
	layer->autorelease();  //交给内存池进行管理

	scene->addChild(layer);

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

}

keyBoradNotificationLayer::keyBoradNotificationLayer():_trackNode(0){
	auto listener = EventListenerTouchOneByOne::create();
	
	listener->onTouchBegan = CC_CALLBACK_2(keyBoradNotificationLayer::onTouchBegan,this);
	listener->onTouchEnded = CC_CALLBACK_2(keyBoradNotificationLayer::onTouchEnded, this);

	_eventDispatcher->addEventListenerWithSceneGraphPriority(listener, this);
}

bool keyBoradNotificationLayer::onTouchBegan(Touch* touch, Event* event){

	_beganPos = convertToNodeSpace(touch->getLocation());

	return true;
}

void keyBoradNotificationLayer::onTouchEnded(Touch *touch, Event *event){

	if (!_trackNode){
		return;
	}

	auto _endPos = touch->getLocation();

	//做了个判断,滑动差距大于5的话则代表不会被触发输入法  
	float distance = 5.0f;
	if (abs(_endPos.x - _beganPos.x) > distance ||
		abs(_endPos.y - _beganPos.y) > distance){

		//抹掉首次触摸的值
		_beganPos.x = _beganPos.y = -1;

		return;
	}
	/*如果点击的区域是在此文本框上就打开输入法*/
	Rect rect;

	auto touchPoint = convertTouchToNodeSpaceAR(touch);

	log("KeyboardNotificationLayer:clickedAt(%f,%f)", touchPoint.x, touchPoint.y);

	rect = getRect(_trackNode);

	log("KeyboardNotificationLayer:TrackNode at(origin:%f,%f, size:%f,%f)",
		rect.origin.x, rect.origin.y, rect.size.width, rect.size.height);

	this->onClickTrackNode(rect.containsPoint(touchPoint));
}

void keyBoradNotificationLayer::keyboardWillShow(IMEKeyboardNotificationInfo& info){

	Rect rect = getRect(_trackNode);

	log(" jin ");

	//_trackNode和键盘的交集监测
	if (!rect.intersectsRect(info.end)){
		return;
	}
	//计算软键盘需要的高度
	float adjustHeight = info.end.getMaxY() - rect.getMinY();

	/*调整所有的子节点*/
	auto& children = getChildren();
	Node * node = 0;
	ssize_t count = children.size();
	Vec2 pos;
	for (int i = 0; i < count; ++i)
	{
		node = children.at(i);
		pos = node->getPosition();
		pos.y += adjustHeight;
		node->setPosition(pos);
	}

}

void TextFiledTTFTest::onClickTrackNode(bool b){
	auto mTextFiled = (TextFieldTTF*)_trackNode;

	if (b){
		mTextFiled->attachWithIME();
	}
	else{
		mTextFiled->detachWithIME();
	}
}

void TextFiledTTFTest::onEnter(){
	keyBoradNotificationLayer::onEnter();  //必须先调用父类的onEnter方法

	auto s = Director::getInstance()->getWinSize();

	auto mTextFiled = TextFieldTTF::textFieldWithPlaceHolder("click here for input", FONT_NAME, FONT_SIZE);

	mTextFiled->setPosition(VisibleRect::center());

	addChild(mTextFiled);

	_trackNode = mTextFiled;
}


Cocos2d-x学习(四):带光标的输入框

cocos2d-x为我们提供了一个跨平台的输入框,CCTextFieldTTF,初看时感觉提供的功能很少,当看到tests中TextInputTest这个例子的时候,感觉它的使用还真是很复杂,其原因无...
  • oneRain88
  • oneRain88
  • 2012年05月16日 14:50
  • 50292

Cocos2d-x的学习之旅(六)输入框

今天任务:做一个屌炸天的兑换码的兑换界面。 由于我们输入框的背景图是椭圆形的所有,文字跟输入框的融合有点突入。并不美观。如果你要调整文字的大小你需要去调整输入框的高度,但相应的输入框的背景图片也会相应...
  • maijiekai
  • maijiekai
  • 2015年06月17日 00:38
  • 761

cocos2d-x实现文字输入框以及字符串中文字的提取

Focus_凯 个人原创,欢迎转载,转载请注明地址。Focus_凯的专栏地址http://blog.csdn.net/focusdeveloper 今天分享下如何做一个聊天窗口的文字输入框并且在其...
  • wonderkai
  • wonderkai
  • 2013年10月22日 17:56
  • 4137

Cocos2d-x3.1中的Text控件的使用

1、TextAtlas 定义UITextAtlas
  • yuxikuo_1
  • yuxikuo_1
  • 2014年07月16日 21:14
  • 2071

Cocos2d-x3.3Final(12)TextField常用成员函数(C++)

TextField * textField = TextField::create("input words here", "Arial", 30); textField->setPosition(...
  • LightUpHeaven
  • LightUpHeaven
  • 2015年02月06日 12:32
  • 4439

Cocos2d-x TextField的使用

void textFieldEvent(Ref *pSender, cocos2d::ui::TextField::EventType type); cocos2d::ui::Text*  _dis...
  • liubin8095
  • liubin8095
  • 2016年02月03日 23:54
  • 5049

Cocos2d-x 3.4 之 文本输入之 EditBox

Cocos2d-x 3.4 之 文本输入之 EditBox
  • lx417147512
  • lx417147512
  • 2015年04月19日 21:12
  • 5087

cocos2dx之文字输入

值得一提的是文字输入。正如鼠标对键盘的颠覆,从iPhone开始的触摸屏革命已然将实体键盘逼入了一个尴尬的位置,更多的交互通过触摸屏上直观的手势操作完成,但是文字输入依然是必不可少的,例如当我们需要设定...
  • ganpengjin1
  • ganpengjin1
  • 2014年01月20日 10:41
  • 6668

Cocos2d-lua示例(二)登陆界面之editbox替换TextField

登陆界面主要功能是输入框的使用,当然cocos2d-x的TextField的用户体验不好,坑多,所以就有了editbox来替换TextField,editbox主要是在每平台下会去调用每个输入框,一款...
  • fjdmy001
  • fjdmy001
  • 2016年11月04日 14:47
  • 1248

CocosStudio(十)TextField输入框

TextField输入框,这是Cocos自己写的一个控件,实际开发中我们都不会去使用它,因为用户体验太差,单一,针对多种平台手机不适用,我们会把TextField替换为editbox,editbox是...
  • fjdmy001
  • fjdmy001
  • 2016年10月28日 14:03
  • 2679
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:cocos2d-x-3.1 文本输入框简单使用 (coco2d-x 学习笔记九)
举报原因:
原因补充:

(最多只允许输入30个字)