Cocos2d-lua示例（二）登陆界面之editbox替换TextField

       登陆界面主要功能是输入框的使用，当然cocos2d-x的TextField的用户体验不好，坑多，所以就有了editbox来替换TextField，editbox主要是在每平台下会去调用每个输入框，一款体验好的游戏，我们需要在每个平台去修改输入框源码来到达用户体验。这一篇我们来简简单单的editbox替换TextField。效果图如下，前者是TextField，后者是editbox。

一、editbox替换TextField

1.app文件夹下创建utils文件夹，然后创建EditBoxHelper.lua文件。

2.EditBoxHelper.lua

local EditBoxHelper = class("EditBoxHelper")

function EditBoxHelper:ctor()
end

--TextField替换为editbox
function EditBoxHelper:replaceTextField(widget, iMaxLength, image)
    if widget == nil then
        return
    end;
    if widget.getDescription == nil then
        return;
    end
    if widget:getDescription() ~= "TextField" then
        return;
    end

    --九宫格,输入框背景
    if image == nil or image.isScale9Enabled == nil then
        image = ccui.Scale9Sprite:create("res/ui/CommonUI/textfield_bg.png");
        image:setScale9Enabled(true);
        image:setCapInsets(cc.rect(5,5,40,27));
    end

    --TextField的属性
    local pos = cc.p(widget:getPosition());
    local pAnchorPoint = widget:getAnchorPoint();
    local size = widget:getContentSize();
    local iZOrder = widget:getLocalZOrder();
    local parent = widget:getParent();
    local pName = widget:getName();
    local sPlaceHolder = widget:getPlaceHolder();
    local iTag = widget:getTag();
    local fontSize = widget:getFontSize();
    widget:removeFromParent();

    --创建并设置属性
    local editBox = ccui.EditBox:create(size, image);
    editBox:setAnchorPoint(pAnchorPoint);               --锚点
    editBox:setPosition(pos);                           --位置
    editBox:setLocalZOrder(iZOrder);                    --层级
    editBox:setName(pName);                             --名称
    editBox:setTag(iTag);                               --Tag
    editBox:setFontSize(fontSize);                      --文本尺寸
    editBox:setPlaceHolder(sPlaceHolder);               --占位文本
    editBox:setPlaceholderFontSize(fontSize);           --占位文本尺寸
    if iMaxLength ~= nil then
        editBox:setMaxLength(iMaxLength);               --字数限制
    end
    editBox:setReturnType(cc.KEYBOARD_RETURNTYPE_DONE)  --键盘返回类型

    if parent ~= nil then
        parent:addChild(editBox);                  
    end
    
    return editBox;
end

return EditBoxHelper;

3.views下创建LoginView.lua文件

 

4.LoginView.lua代码

local EditBoxHelper = require("src.app.utils.EditBoxHelper");
local LoginView = class("LoginView")


function LoginView:ctor()
    self:init();
end

function LoginView:init()
    --加载Rank.json文件
    self.m_uiRoot = ccs.GUIReader:getInstance():widgetFromJsonFile("ui/Login.json");

    local panelMain = self.m_uiRoot:getChildByName("Panel_Main");

    local editBoxHelper = EditBoxHelper.new();
    --账号输入文本框
    local textFieldUserName = panelMain:getChildByName("TextField_UserName");
    self.m_textFieldUserName = editBoxHelper:replaceTextField(textFieldUserName);
    --输入监听事件
    self.m_textFieldUserName:registerScriptEditBoxHandler(handler(self, self.onEditboxUserName));

    --密码输入文本框
    local textFieldPassword = panelMain:getChildByName("TextField_Password")
    self.m_textFieldPassword = editBoxHelper:replaceTextField(textFieldPassword); 

    --按钮
    local buttonLogin = panelMain:getChildByName("Button_Login");
    buttonLogin:addTouchEventListener(handler(self, self.onTouchBtnLogin));
end

function LoginView:onTouchBtnLogin(sender, eventType)
    if eventType == ccui.TouchEventType.ended then
        local userName = self.m_textFieldUserName:getText();
        local password = self.m_textFieldPassword:getText();
        print("userName = ", userName, ", password = ", password)
    end
end

function LoginView:onEditboxUserName(event, editbox)
    if event == "began" then
        print("开始输入")
    elseif event == "changed" then
        print("输入框内容发生变化")
    elseif event == "ended" then
        print("输入结束")
    elseif event == "return" then
        print("从输入框返回")
    end
end

return LoginView

5.添加到场景

local MainScene = class("MainScene", cc.load("mvc").ViewBase)

function MainScene:onCreate()
    local rankView = require("src.app.views.LoginView").new();
    self:addChild(rankView.m_uiRoot)
end

return MainScene

editbox差不多就写到这儿了， 对editbox的功能可以看editbox的源码。

代码下载地址：http://pan.baidu.com/s/1pLlNAuJ