Cocos2d-X中使用CCTextFieldTTF的简单应用显示文本和弹出软键盘

学了几天Cocos2d-X后今天终于可以试试Cocos2d-X的跨平台开发了，由于条件的限制，我只会测试Cocos2d-X在Android平台上的开发，今天就以一个简单的文本测试Android上的效果，需要用到CCTextFieldTTF类，CCTextFieldTTF是一个显示文本控件的类用于输入文本和现实文本类似于Windows编程中的Static控件和Edit控件

程序实例：使用TextFieldTTF类创建一个文本，触摸文本弹出软键盘，并且可以通过软键盘向TextFieldTTF中输入文字

首先创建一个TextFieldTTF.h的头文件，在头文件中添加下面的代码

#ifndef __TextFieldTTF_H__
#define __TextFieldTTF_H__

#include "cocos2d.h"
USING_NS_CC;

class TextFieldTTF : public CCLayer
{
public:
     bool init();  

    static CCScene* scene();

    //用于处理触摸事件
    bool ccTouchBegan(CCTouch*, CCEvent*);

    //用于在程序中创建一个文本控件
    CCTextFieldTTF* textEdit;

    CREATE_FUNC(TextFieldTTF);
};

#endif // __HELLOWORLD_SCENE_H__

然后在TextFieldTTF.cpp中添加下面的代码

#include "TextFieldTTF.h"

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

    scene->addChild(layer);

    return scene;
}


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

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

    //创建文本框
    //第一个参数：文本框中显示的内容
    //第二个参数：字体
    //第三个参数：文本的大小
    textEdit = CCTextFieldTTF::textFieldWithPlaceHolder("Please input your name:",
             "Arial", 36);

    //设置文本框的位置
    textEdit->setPosition(ccp(winSize.width / 2, winSize.height / 2));

    //添加文本框到层上
    addChild(textEdit);

    //当触摸到控件的时候弹出软键盘
    setTouchMode(kCCTouchesOneByOne);
    setTouchEnabled(true);

    return true;
}

bool TextFieldTTF::ccTouchBegan(CCTouch* touch, CCEvent* ev)
{
    //用于判断是否点中了控件
    bool isClicked = textEdit->boundingBox().containsPoint(touch->getLocation());

    //如果点中了控件
    if(isClicked)
    {
        //弹出软键盘
        textEdit->attachWithIME();
    }

    //表示接受触摸消息
    return true;
}

程序执行结果：

在Windows下单击“Please input your name: ”会没有反应，因为Windows下没有软键盘

程序移值到Android下的执行结果：

触摸“Please input your name :”后弹出软键盘

使用软键盘输入一段文字后：

选择完成后文字显示在控件上

程序实例：TextFieldTTF实现输入密码

将TextFieldTTF.cpp文件中的代码改成下面的代码

#include "TextFieldTTF.h"

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

    scene->addChild(layer);

    return scene;
}


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

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

    //创建文本框
    textEdit = CCTextFieldTTF::textFieldWithPlaceHolder("Please input your name:",
             "Arial", 36);

    //设置文本框的位置
    textEdit->setPosition(ccp(winSize.width / 2, winSize.height / 2));

    //添加文本框到层上
    addChild(textEdit);

    //输入密码
    textEdit->setSecureTextEntry(true);

    //注册触摸函数，实现当触摸到控件的时候，弹出软键盘
    setTouchMode(kCCTouchesOneByOne);
    setTouchEnabled(true);

    return true;
   
}

bool TextFieldTTF::ccTouchBegan(CCTouch* touch, CCEvent* ev)
{
    //用于判断是否点中了控件
    bool isClicked = textEdit->boundingBox().containsPoint(touch->getLocation());

    //如果点中了控件
    if(isClicked)
    {
        //弹出软键盘
        textEdit->attachWithIME();
    }

    //表示接受触摸消息
    return true;
}

程序移值到Android下的执行结果：程序移值到Android下的执行结果：

触摸“Please input your name :”后弹出软键盘

通过软键盘输入一段字符

选择完成后字符以密码的形式显示在控件上

程序实例：使用九位图美化控件

在工程目录下的Resource文件夹中放一张九位图

将TextFieldTTF.cpp文件中的代码改成下面的代码

#include "TextFieldTTF.h"

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

    scene->addChild(layer);

    return scene;
}


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

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

    //创建文本框
    textEdit = CCTextFieldTTF::textFieldWithPlaceHolder("Please input your name:",
             "Arial", 36);

    //设置文本框的位置
    textEdit->setPosition(ccp(winSize.width / 2, winSize.height / 2));

    //添加文本框到层上
    addChild(textEdit);

    
    //给控件增加背景(添加一张九位图)
    CCScale9Sprite* bg = CCScale9Sprite::create("green_edit.png");
    
    //将九位图添加到控件上
    textEdit->addChild(bg);

    //设置描点的位置
    bg->setAnchorPoint(ccp(0,0));

    //设置九位图的位置
    bg->setPosition(ccp(0,0));

    //将九位图的尺寸设置成控件的尺寸一样大
    bg->setContentSize(textEdit->boundingBox().size);

    //先显示九位图后显示控件
    bg->setZOrder(-1);

    //注册触摸函数，实现当触摸到控件的时候，弹出软键盘
    setTouchMode(kCCTouchesOneByOne);
    setTouchEnabled(true);

    return true;
   
}

bool TextFieldTTF::ccTouchBegan(CCTouch* touch, CCEvent* ev)
{
    //用于判断是否点中了控件
    bool isClicked = textEdit->boundingBox().containsPoint(touch->getLocation());

    //如果点中了控件
    if(isClicked)
    {
        //弹出软键盘
        textEdit->attachWithIME();
    }

    //表示接受触摸消息
    return true;
}

程序移值到Android下的执行结果：

触摸“Please input your name :”后弹出软键盘

使用软键盘输入一段文字

选择完成后文字显示在控件上