cocos2dx3.16入力ボックス:TextFieldとEditBoxの使用
13540 ワード
cocos2dx3.16エンジンは、2種類の編集ボックスのコントロールを提供します.
(1)CCTextFieldTTF(CCLabelTTFベース)
(2)CCEditBox(CCControlButtonベース)
(3)Textを用いて複数行コンテンツシミュレーションEditBoxの複数行入力を表示する:
【小さな知識】
IME:Input Method Editors、すなわち入力エディタです.
placeholder:デフォルトで表示される内容.すなわち、編集ボックスの入力内容が空の場合に表示される内容である.
デフォルト:編集ボックスの入力内容が空の場合に表示されます.
入力内容:仮想キーボードを使用して、編集ボックスに入力します.
【3.x】
(1)「CC」を外す
(2)仮想キーボードの編集タイプの設定:>EditBoxInputModeから強列挙EditBox::EditBoxInputModeへ
(3)入力のテキストタイプを設定:>EditBox InputFlagが強列挙EditBox::EditBox InputFlagになる
4)仮想キーボードのreturnキー表示文字を設定する:>KeyboardReturnTypeから強列挙EditBox::KeyboardReturnType
(5)その他の変化は大きくない.
【CCEditBox】
まずCCEditBoxの継承関係を見てみましょう.
CCEditBoxの親は、ボタンコントロールクラスCCControlButton、入力方式エージェントクラスCCIMEDelegateです.
ここで、CCControlButtonは、前に述べたように、多くのボタンイベントを有し、CCScale 9 Spriteを背景画像として使用するボタンクラスである.CCIMEDelegateというクラスは主にサブクラスに仮想キーボードの入力機能を提供している.
その継承関係から、CCEditBoxがどのように実現したのか推測できるでしょう.CCTextFieldTTFが動的なCCLabelTTFである場合、CCEditBoxは入力された文字を絶えず傍受することによって、ボタンのラベル内容を動的に設定する動的なCCControlButtonと見なすことができる.
実はCCEditBoxの使い方はCCTectFieldTTFとよく似ています.しかし、主な違いは
CCEditBoxで作成した編集ボックスを使用して、追加のコード処理を行わずに編集ボックス領域をクリックするとキーボードから飛び出し、非編集ボックス領域をクリックするとキーボードを隠すことができます.CCTectFieldTTFは手動で処理する必要があります.すなわち、親クラスのCCIMEDelegateが子クラスに提供する関数:attachWithIME()、detachWithIME()であり、CCEditBoxでは手動で処理する必要はない.
1、ヘッダファイルとネーミングスペースを導入する
クラス継承先:EditBox Delegate
2、作成方式
3、委託代理
4、常用操作
デフォルトの内容を設定し、内容を入力します.フォントリソース名、サイズ、色、最大文字数、編集ボックスサイズ.
5、編集ボックスのモードタイプを設定する
仮想キーボードのタイプ、テキストタイプ、仮想キーボードにreturnキーが表示される文字.
6、イベント委託代理インタフェース類CCEditBox Delegate
CCEditBoxクラスは、主にCCEditBoxの使用状態をリスニングし、イベントのコールバック応答関数を設定するために使用されます.
使用方法:CCEditBoxクラスを作成するCCLayerクラスで、CCLayerにCCEditBox Delegateを継承させ、次の4つのイベントコールバック応答関数を書き換えます.
編集ボックス全体の編集プロセスは、編集開始=>テキスト変更=>編集終了=>returnを返します.
7、テクニック
(1)CCEditBoxを作成した後、編集ボックスを設定した委任エージェントオブジェクトは、現在のCCLayerレイヤであるsetDelegate(this)である.このようにして、CCEditBox Delegateに継承されたCCLayerは、編集ボックスのイベントに応答してコールバック関数を実行することができる.
(2)CCEditBoxの4つのコールバック関数を書き換えることで,編集ボックスの異なる状態イベントを処理する.
(1)CCTextFieldTTF(CCLabelTTFベース)
self.textField = self.node_root:getChildByName("TextField")
self.textField:setSingleLineEnabled(false) -- true： false：
-- self.textField:setFontName("res/font/Arial.ttf")
-- self.textField:setInputMode(cc.EDITBOX_INPUT_MODE_ANY) -- ExtensionConstants.lua
self.textField:addEventListener(function(sender, eventType)
-- GuiConstants.lua
if eventType == 0 then
-- print("ccui.TextFiledEventType.attach_with_ime")
elseif eventType == 1 then
-- print("ccui.TextFiledEventType.detach_with_ime")
elseif eventType == 2 then
-- print("ccui.TextFiledEventType.insert_text")
print(sender:getString())
elseif eventType == 3 then
-- print("ccui.TextFiledEventType.delete_backward")
end
end)
(2)CCEditBox(CCControlButtonベース)
self.editBox_bg = self.node_root:getChildByName("editBox_bg")
self.editBox = ccui.EditBox:create(self.editBox_bg:getContentSize(), "res/editbox_bg.png", ccui.TextureResType.plistType)
self.editBox:setPlaceHolder(" ")
self.editBox:setInputMode(6)
self.editBox:setInputFlag(cc.EDITBOX_INPUT_FLAG_INITIAL_CAPS_WORD) -- ExtensionConstants.lua
self.editBox:setReturnType(cc.KEYBOARD_RETURNTYPE_DONE) -- ExtensionConstants.lua
self.editBox:setAnchorPoint(cc.p(0, 0.5))
self.editBox:setPosition(self.editBox_bg:getPosition())
self.editBox:setFontColor(cc.c3b(255, 255, 255))
self.editBox:registerScriptEditBoxHandler(function(eventType)
if eventType == "began" then
-- print("began")
elseif eventType == "return" or eventType == "ended" then
-- print(eventType)
print(self.editBox:getText())
elseif eventType == "changed" then
-- print("changed")
end
end)
self.node_root:addChild(self.editBox)
(3)Textを用いて複数行コンテンツシミュレーションEditBoxの複数行入力を表示する:
-- EditBox
self.showText = self.node_root:getChildByName("Text")
self.showText:setTouchEnabled(false)
self.showText:setString(" ")
-- ， EditBox
self.editBox_bg = self.node_root:getChildByName("editBox_bg")
self.editBox_bg:setTouchEnabled(true)
self.editBox_bg:addTouchEventListener(function(sender, eventType)
if eventType == ccui.TouchEventType.ended then
self.editBox:touchDownAction(self.editBox, ccui.TouchEventType.ended)
end
end)
-- EditBox，
self.editBox = ccui.EditBox:create(self.editBox_bg:getContentSize(), "res/editbox_bg.png", ccui.TextureResType.plistType)
self.editBox:setInputMode(6)
self.editBox:setInputFlag(cc.EDITBOX_INPUT_FLAG_INITIAL_CAPS_WORD) -- ExtensionConstants.lua
self.editBox:setReturnType(cc.KEYBOARD_RETURNTYPE_DONE) -- ExtensionConstants.lua
self.editBox:setAnchorPoint(cc.p(0, 1))
self.editBox:setPosition(self.editBox_bg:getPosition())
self.editBox:setFontColor(cc.c3b(255, 255, 255))
self.editBox:setVisible(false)
self.editBox:registerScriptEditBoxHandler(function(eventType)
if eventType == "return" or eventType == "ended" then
local str = self.editBox:getText()
if str ~= "" then
-- Text
self.showText:setString(str)
end
end
end)
self.node_root:addChild(self.editBox)
【小さな知識】
IME:Input Method Editors、すなわち入力エディタです.
placeholder:デフォルトで表示される内容.すなわち、編集ボックスの入力内容が空の場合に表示される内容である.
デフォルト:編集ボックスの入力内容が空の場合に表示されます.
入力内容:仮想キーボードを使用して、編集ボックスに入力します.
【3.x】
(1)「CC」を外す
(2)仮想キーボードの編集タイプの設定:>EditBoxInputModeから強列挙EditBox::EditBoxInputModeへ
//
SINGLE_LINE // （ ）
ANY // （ ）
DECIMAL // （ ）
PHONE_NUMBER //
EMAIL_ADDRESS //
NUMERIC //
URL // URL
//(3)入力のテキストタイプを設定:>EditBox InputFlagが強列挙EditBox::EditBox InputFlagになる
//
PASSWORD //
SENSITIVE //
INITIAL_CAPS_WORD // ，
INITIAL_CAPS_SENTENCE // ，
INTIAL_CAPS_ALL_CHARACTERS //
//4)仮想キーボードのreturnキー表示文字を設定する:>KeyboardReturnTypeから強列挙EditBox::KeyboardReturnType
//
DEFAULT // , "←"
DONE //Done , " "
SEND //Send , " "
SEARCH //Search , " "
GO //Go , " "
//(5)その他の変化は大きくない.
【CCEditBox】
まずCCEditBoxの継承関係を見てみましょう.
CCEditBoxの親は、ボタンコントロールクラスCCControlButton、入力方式エージェントクラスCCIMEDelegateです.
ここで、CCControlButtonは、前に述べたように、多くのボタンイベントを有し、CCScale 9 Spriteを背景画像として使用するボタンクラスである.CCIMEDelegateというクラスは主にサブクラスに仮想キーボードの入力機能を提供している.
その継承関係から、CCEditBoxがどのように実現したのか推測できるでしょう.CCTextFieldTTFが動的なCCLabelTTFである場合、CCEditBoxは入力された文字を絶えず傍受することによって、ボタンのラベル内容を動的に設定する動的なCCControlButtonと見なすことができる.
実はCCEditBoxの使い方はCCTectFieldTTFとよく似ています.しかし、主な違いは
CCEditBoxで作成した編集ボックスを使用して、追加のコード処理を行わずに編集ボックス領域をクリックするとキーボードから飛び出し、非編集ボックス領域をクリックするとキーボードを隠すことができます.CCTectFieldTTFは手動で処理する必要があります.すなわち、親クラスのCCIMEDelegateが子クラスに提供する関数:attachWithIME()、detachWithIME()であり、CCEditBoxでは手動で処理する必要はない.
1、ヘッダファイルとネーミングスペースを導入する
#include "../cocos/ui/UIEditBox/UIEditBox.h"クラス継承先:EditBox Delegate
class Management : public cocos2d::Scene, public EditBoxDelegate2、作成方式
//
//create(' ', ' ', ' ', ' ');
static CCEditBox* create(const CCSize& size, CCScale9Sprite* pNormal9SpriteBg,
CCScale9Sprite* pPressed9SpriteBg = NULL, CCScale9Sprite* pDisabled9SpriteBg = NULL);
// ：
//CCSize editBoxSize = CCSizeMake(300, 60);
//CCEditBox* editBoxName = CCEditBox::create(editBoxSize, CCScale9Sprite::create("green_edit.png"));
//3、委託代理
//
// ， this
// CCLayer CCEditBoxDelegate。
void setDelegate(CCEditBoxDelegate* pDelegate);
CCEditBoxDelegate* getDelegate();
// ：
/editBoxName->setDelegate(this);
//4、常用操作
デフォルトの内容を設定し、内容を入力します.フォントリソース名、サイズ、色、最大文字数、編集ボックスサイズ.
//
/**
* setPlaceHolder , setPlaceholderFont ,
* setText , setFont , setMaxLength ,
* setPreferredSize
*/
// 。 ， 。
void setPlaceHolder(const char* pText);
const char* getPlaceHolder(void);
//
// pFontName
// fontSize
// color
void setPlaceholderFont(const char* pFontName, int fontSize);
void setPlaceholderFontName(const char* pFontName);
void setPlaceholderFontSize(int fontSize);
void setPlaceholderFontColor(const ccColor3B& color);
// setText
void setText(const char* pText);
const char* getText(void);
//
// pFontName
// fontSize
// color
void setFont(const char* pFontName, int fontSize);
void setFontName(const char* pFontName);
void setFontSize(int fontSize);
void setFontColor(const ccColor3B& color);
// ，
void setMaxLength(int maxLength);
int getMaxLength();
//
void setPreferredSize(CCSize size);
//5、編集ボックスのモードタイプを設定する
仮想キーボードのタイプ、テキストタイプ、仮想キーボードにreturnキーが表示される文字.
//
/**
* setInputMode ,
* setInputFlag ,
* setReturnType
*/
// EditBoxInputMode
// kEditBoxInputModeSingleLine // （ ）
// kEditBoxInputModeAny // （ ）
// kEditBoxInputModeDecimal // （ ）
// kEditBoxInputModePhoneNumber //
// kEditBoxInputModeEmailAddr //
// kEditBoxInputModeNumeric //
// kEditBoxInputModeUrl // URL
void setInputMode(EditBoxInputMode inputMode);
// EditBoxInputFlag
// kEditBoxInputFlagPassword //
// kEditBoxInputFlagSensitive //
// kEditBoxInputFlagInitialCapsWord // ，
// kEditBoxInputFlagInitialCapsSentence // ，
// kEditBoxInputFlagInitialCapsAllCharacters //
void setInputFlag(EditBoxInputFlag inputFlag);
// return
// kKeyboardReturnTypeDefault // , "←"
// kKeyboardReturnTypeDone //Done , " "
// kKeyboardReturnTypeSend //Send , " "
// kKeyboardReturnTypeSearch //Search , " "
// kKeyboardReturnTypeGo //Go , " "
void setReturnType(KeyboardReturnType returnType);
//6、イベント委託代理インタフェース類CCEditBox Delegate
CCEditBoxクラスは、主にCCEditBoxの使用状態をリスニングし、イベントのコールバック応答関数を設定するために使用されます.
使用方法:CCEditBoxクラスを作成するCCLayerクラスで、CCLayerにCCEditBox Delegateを継承させ、次の4つのイベントコールバック応答関数を書き換えます.
編集ボックス全体の編集プロセスは、編集開始=>テキスト変更=>編集終了=>returnを返します.
//
//
virtual void editBoxEditingDidBegin(CCEditBox* editBox);
//
virtual void editBoxEditingDidEnd(CCEditBox* editBox);
//
virtual void editBoxTextChanged(CCEditBox* editBox, const std::string& text);
// return
virtual void editBoxReturn(CCEditBox* editBox);
//7、テクニック
(1)CCEditBoxを作成した後、編集ボックスを設定した委任エージェントオブジェクトは、現在のCCLayerレイヤであるsetDelegate(this)である.このようにして、CCEditBox Delegateに継承されたCCLayerは、編集ボックスのイベントに応答してコールバック関数を実行することができる.
(2)CCEditBoxの4つのコールバック関数を書き換えることで,編集ボックスの異なる状態イベントを処理する.
class Management : public cocos2d::Scene, public EditBoxDelegate
{
public:
static cocos2d::Scene* createScene();
virtual bool init();
// a selector callback
void touchCallBack(cocos2d::Ref* pSender, TouchEventType type);
// implement the "static create()" method manually
CREATE_FUNC(Management);
virtual void editBoxEditingDidBegin(EditBox* editBox);
virtual void editBoxEditingDidEnd(EditBox* editBox);
virtual void editBoxTextChanged(EditBox* editBox, const std::string &text);
virtual void editBoxReturn(EditBox *editBox);
};
#endif // __MANAGERMENT_SCENE_H__
void Management::GetLogonAccPwd()
{
auto _acc = (TextField*)m_LogonNode->getChildByName("TextField_1");
_acc->setVisible(false);
auto _img1 = (ImageView*)m_LogonNode->getChildByName("Image_1");
_img1->setVisible(false);
auto accBox = EditBox::create(_img1->getContentSize(), Scale9Sprite::create("management/img_inputBg.png"));
accBox->setPosition(_img1->getPosition());
accBox->setAnchorPoint(CCPoint::ANCHOR_MIDDLE);
accBox->setFontSize(36);
accBox->setFontColor(Color3B::WHITE);//Color3B(0, 0, 0)
accBox->setPlaceHolder(_acc->getPlaceHolder().c_str());
accBox->setReturnType(EditBox::KeyboardReturnType::DONE);
accBox->setInputMode(EditBox::InputMode::SINGLE_LINE);
//accBox->setTouchEnabled(true);
accBox->setDelegate(this);
accBox->setMaxLength(20);
accBox->setTag(101);
m_LogonNode->addChild(accBox);
//
auto _pwd = (TextField*)m_LogonNode->getChildByName("TextField_2");
_pwd->setVisible(false);
auto _img2 = (ImageView*)m_LogonNode->getChildByName("Image_2");
_img2->setVisible(false);
auto pwdBox = EditBox::create(_img2->getContentSize(), Scale9Sprite::create("management/img_inputBg.png"));
pwdBox->setPosition(_img2->getPosition());
pwdBox->setAnchorPoint(CCPoint::ANCHOR_MIDDLE);
pwdBox->setFontSize(36);
pwdBox->setFontColor(Color3B::WHITE);
pwdBox->setPlaceHolder(_pwd->getPlaceHolder().c_str());
pwdBox->setReturnType(EditBox::KeyboardReturnType::DONE);
pwdBox->setInputMode(EditBox::InputMode::SINGLE_LINE);
pwdBox->setInputFlag(EditBox::InputFlag::PASSWORD);
//pwdBox->setTouchEnabled(true);
pwdBox->setDelegate(this);
pwdBox->setMaxLength(20);
pwdBox->setTag(102);
m_LogonNode->addChild(pwdBox);
}
void Management::editBoxEditingDidBegin(EditBox *editBox)
{
CCLOG("start edit");
}
void Management::editBoxEditingDidEnd(EditBox *editBox)
{
CCLOG("end edit");
}
void Management::editBoxReturn(EditBox *editBox)
{
CCLOG("editbox return");
}
void Management::editBoxTextChanged(EditBox *editBox, const std::string &text)
{
auto editbox = (EditBox*)editBox;
switch (editBox->getTag())
{
case 101:
CCLOG("EditBox_name changed");
m_account = text;
break;
case 102:
CCLOG("EditBox_password changed");
m_password = text;
break;
default:
break;
}
CCLOG("acc:%s--pwd:%s", m_account.c_str(), m_password.c_str());
}