【玩转cocos2d-x之三十】点九图和输入框的使用

原创作品，转载请标明：http://blog.csdn.net/jackystudio/article/details/17297721

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

1.点九图CCScale9Sprite

1.1.概述

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

1.2.使用

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

[cpp] view plaincopy

#include "cocos-ext.h"
USING_NS_CC_EXT;

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

[cpp] view plaincopy

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类，该类声明了以下接口：

[cpp] view plaincopy

//当键盘弹出编辑框获得焦点时调用
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()中创建编辑框。

[cpp] view plaincopy

//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，实现其所有接口如下：

[cpp] view plaincopy

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/6707427