Cocos2d-X中的CCEditBox

和CCTextFieldTTF一样CCEditBox控件也是一个显示文本的控件

我们通过一个例子看看CCEditBox控件实现显示文本

首先需要在工程目录下的Resource文件夹中添加一张九位图

程序代码：

#include "TCCEditBox.h"

CCScene* TCCEditBox::scene()
{
    CCScene* scene = CCScene::create();
    
    TCCEditBox* layer = TCCEditBox::create();

    scene->addChild(layer);

    return scene;
}


bool TCCEditBox::init()
{
    //初始化父类层
    CCLayer::init();

    //得到窗口的尺寸
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    //创建背景图片(添加一张九位图)
    CCScale9Sprite* bg = CCScale9Sprite::create("green_edit.png");
    
    //创建CCEditBox控件
    //第一个参数：CCEditBox控件的大小
    //第二个参数：CCEditBox控件的背景图片
    CCEditBox* editBox = CCEditBox::create(CCSize(200,30), bg);

	//添加CCEditBox控件
    addChild(editBox);

    //设置CCEditBox控件的位置
    editBox->setPosition(ccp(winSize.width / 2, winSize.height / 2));
    
    //设置CCEditBox控件中的文本
    editBox->setPlaceHolder("Input here");

    //设置文本字体和文本大小
    editBox->setFont("Arial", 10);

    //设置字体
    editBox->setFontName("Arial");

    //设置CCEditBox控件中显示的文本的大小
    editBox->setFontSize(20);

    //设置CCEditBox控件中显示的字体的颜色
    editBox->setFontColor(ccc3(255, 0, 0));

    //设置CCEditBox控件的颜色
    editBox->setColor(ccc3(0, 255, 0));

    //设置最多可以输入的字符的个数
    editBox->setMaxLength(100);

    //设置软键盘中回车按钮的样子
	editBox->setReturnType(kKeyboardReturnTypeGo);

    //设置输入模式
	//kEditBoxInputModeAny表示可以输入任何数据
	editBox->setInputMode(kEditBoxInputModeAny);

    return true;
}

执行结果：程序中显示CCEditBox控件

单击控件后出现了一个编辑框

向编辑框中输入一段文本

单击确定后文本显示在控件上

程序移植Android上的执行结果

触摸控件后弹出软键盘

使用软键盘输入一段文本后的效果

CCEditBox的综合运用：制作一个登陆界面

首先需要在工程目录下的Resource文件夹中添加三张九位图

程序代码：

#include "TCCEditBox.h"

CCScene* TCCEditBox::scene()
{
    CCScene* scene = CCScene::create();
    
    TCCEditBox* layer = TCCEditBox::create();

    scene->addChild(layer);

    return scene;
}


bool TCCEditBox::init()
{
    CCLayer::init();

    //得到窗口的尺寸
    CCSize size = CCDirector::sharedDirector()->getWinSize();

    //定义CCEditBox对象指针
    CCEditBox* m_pEditName;

    //创建CCEditBox控件
    m_pEditName = CCEditBox::create(CCSizeMake(size.width-100, 60), CCScale9Sprite::create("green_edit.png"));
    
    //设置CCEditBox控件的位置
    m_pEditName->setPosition(ccp(size.width/2, size.height/2 + 50));

    //添加CCEditBox控件
    addChild(m_pEditName);

    //设置CCEditBox中文本的大小
    m_pEditName->setFontSize(25);
    
    //设置CCEditBox中文本的颜色
    m_pEditName->setFontColor(ccRED);

    //设置CCEditBox中文本的内容
    m_pEditName->setPlaceHolder("Name:");

    //设置CCEditBox为空时，CCEditBox控件的颜色
    m_pEditName->setPlaceholderFontColor(ccWHITE);

    //设置最多可以输入的字符数
    m_pEditName->setMaxLength(8);

    //设置软键盘中Returen键显示的字符
    //kKeyboardReturnTypeDone: 默认使用键盘return类型为“Done”字样  
    m_pEditName->setReturnType(kKeyboardReturnTypeDone);
    
   //定义CCEditBox对象指针
    CCEditBox* m_pEditPassword;
   
    //创建CCEditBox控件
    m_pEditPassword = CCEditBox::create(CCSizeMake(size.width-100, 60), CCScale9Sprite::create("orange_edit.png"));
   
    //设置CCEditBox控件的位置
    m_pEditPassword->setPosition(ccp(size.width/2, size.height/2 + 50 - 80));
    
     //添加CCEditBox控件
    addChild(m_pEditPassword);
    
    //设置CCEditBox中文本的颜色
    m_pEditPassword->setFontColor(ccGREEN);

    //设置文本的内容
    m_pEditPassword->setPlaceHolder("Password:");

    //设置CCEditBox控件中最多显示的字符的个数
    m_pEditPassword->setMaxLength(6);

    //设置输入的属性
    //kEditBoxInputFlagPassword：输入的是密码
    m_pEditPassword->setInputFlag(kEditBoxInputFlagPassword);

    //设置输入编辑框的编辑类型
    //kEditBoxInputModeSingleLine： 开启任何文本的输入键盘,不包括换行   
    m_pEditPassword->setInputMode(kEditBoxInputModeSingleLine);

    //定义CCEditBox对象指针
    CCEditBox* m_pEditEmail;
   
    //创建CCEditBox控件
    m_pEditEmail = CCEditBox::create(CCSizeMake(size.width-100, 60), CCScale9Sprite::create("yellow_edit.png"));
   
    //设置CCEditBox控件的位置
    m_pEditEmail->setPosition(ccp(size.width/2, size.height/2 + 50 - 80 - 80));
    
    //设置CCEditBox中显示的内容
    m_pEditEmail->setPlaceHolder("Email:");
    
    //设置输入编辑框的编辑类型
    //kEditBoxInputModeEmailAddr：输入的是Email
    m_pEditEmail->setInputMode(kEditBoxInputModeEmailAddr);
    
     //添加CCEditBox控件
    addChild(m_pEditEmail);
       
    return true;
}

执行结果：

移植到Android上的执行结果

触摸Name弹出的软键盘

触摸Email后弹出的软键盘

输入完数据后的效果