输入框的使用

点九图和输入框的使用  

登录界面一个帐号/密码输入框或者主角命名框是少不了的。这节就来了解一下点九图的输入框的使用。这里只是介绍基础知识，并不进行平台的移植，也不处理跨平台可能出现的问题。

 

1.点九图CCScale9Sprite

1.1.概述

点九图做过移动开发的肯定不会陌生。采用的是PNG点9图，PNG点9图可以自适应各种环境，同时保持伸缩不变形。移动端的UI基本上都是按这个来做的。点9图的制作很简单，用Android SDK的tool下的draw9patch.bat就可以制作。左为原理图，右为效果图。

 

 

1.2.使用

cocos2d-x采用CCScale9Sprite来处理点九图，CCScale9Sprite为扩展类，所以在使用前需加入如下声明。

 

?

1 2	#include cocos-ext.h USING_NS_CC_EXT;

CCScale9Sprite和CCSprite一样继承于CCNodeRGB，所以基本上可以像使用CCSprite一样使用CCScale9Sprite（有一点小差别CCSprite还继承了CCTextureProtocol接口）。以下用于创建一个二态点九图按钮。

 

 

?

1 2 3 4 5 6 7 8

CCScale9Sprite* confirmnormal=CCScale9Sprite::create(btn_style_alert_dialog_button_normal. 9 .png); //normal态 confirmnormal->setContentSize(CCSizeMake( 100 , 70 )); //设置大小 CCScale9Sprite* confirmpressd=CCScale9Sprite::create(btn_style_alert_dialog_button_pressed. 9 .png); //pressd态 confirmpressd->setContentSize(CCSizeMake( 100 , 70 )); //设置大小 CCMenuItemSprite* menuitem=CCMenuItemSprite::create(confirmnormal,confirmpressd, this ,menu_selector(TestLayer::btncallback)); CCMenu* menu=CCMenu::create(menuitem,NULL); //创建menu menu->setPosition(visibleSize.width/ 2 ,visibleSize.height/ 2 ); this ->addChild(menu);

2.输入框CCEditBox

 

2.1.概述

CCEditBox也是cocos2d-x的扩展类，所以和上面一样要进行头文件包含和命名空间声明。另外由于要监控输入框的各种状态，所以还必须实现CCEditBoxDelegate类，该类声明了以下接口：

 

?

1 2 3 4 5 6 7 8

//当键盘弹出编辑框获得焦点时调用 virtual void editBoxEditingDidBegin(CCEditBox* editBox) {}; //当键盘消失编辑框失去焦点时调用 virtual void editBoxEditingDidEnd(CCEditBox* editBox) {}; //当编辑框文本改变时调用 virtual void editBoxTextChanged(CCEditBox* editBox, const std::string& text) {}; //当返回键按下时或者点击了键盘以外的区域时调用 virtual void editBoxReturn(CCEditBox* editBox) = 0 ;

2.2.使用

 

在TestLayer.cpp的init()中创建编辑框。

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

//bool TestLayer::init() CCSize visibleSize=CCDirector::sharedDirector()->getVisibleSize();           pEditBox = CCEditBox::create(CCSizeMake( 250 , 50 ), CCScale9Sprite::create(login_edit_normal. 9 .png)); pEditBox->setPosition(ccp(visibleSize.width/ 2 , visibleSize.height* 3 / 4 )); pEditBox->setFontColor(ccRED); //设置字体颜色 pEditBox->setPlaceHolder(please input:); //设置预置文本 pEditBox->setMaxLength( 8 ); //设置最大长度   //      kEditBoxInputModeAny:         开启任何文本的输入键盘,包括换行 //      kEditBoxInputModeEmailAddr:   开启 邮件地址 输入类型键盘 //      kEditBoxInputModeNumeric:     开启 数字符号 输入类型键盘 //      kEditBoxInputModePhoneNumber: 开启 电话号码 输入类型键盘 //      kEditBoxInputModeUrl:         开启 URL 输入类型键盘 //      kEditBoxInputModeDecimal:     开启 数字 输入类型键盘，允许小数点 //      kEditBoxInputModeSingleLine:  开启任何文本的输入键盘,不包括换行 pEditBox->setInputMode(kEditBoxInputModeAny); //设置输入类型   //kEditBoxInputFlagPassword:                密码形式输入 //kEditBoxInputFlagSensitive:               敏感数据输入、存储输入方案且预测自动完成 //kEditBoxInputFlagInitialCapsWord:         每个单词首字母大写,并且伴有提示 //kEditBoxInputFlagInitialCapsSentence:     第一句首字母大写,并且伴有提示 //kEditBoxInputFlagInitialCapsAllCharacters:所有字符自动大写 pEditBox->setInputFlag(kEditBoxInputFlagPassword); //设置输入标志位   //      kKeyboardReturnTypeDefault:  默认使用键盘return 类型 //      kKeyboardReturnTypeDone:     默认使用键盘return类型为“Done”字样 //      kKeyboardReturnTypeSend:     默认使用键盘return类型为“Send”字样    //      kKeyboardReturnTypeSearch:   默认使用键盘return类型为“Search”字样 //      kKeyboardReturnTypeGo:       默认使用键盘return类型为“Go”字样 pEditBox->setReturnType(kKeyboardReturnTypeDone); //设置返回类型 pEditBox->setDelegate( this ); //当前类继承CCEditBoxDelegate类 addChild(pEditBox);

当前类继承于CCEditBoxDelegate，实现其所有接口如下：

 

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

void TestLayer::editBoxEditingDidBegin(CCEditBox *editBox) {      CCLOG(start edit); } void TestLayer::editBoxEditingDidEnd(CCEditBox *editBox) {      CCLOG(end edit); } void TestLayer::editBoxReturn(CCEditBox *editBox) {      CCLOG(editbox return ); } void TestLayer::editBoxTextChanged(CCEditBox *editBox, const std::string &text) {      CCLOG(text changed); }

3.结合点九图按钮的使用，效果图如下：

 

 

 

4.源码下载

下载地址：http://download.csdn.net/detail/jackyvincefu/670742
7