【cocoStdio系列】之初用cocostdio制作登陆界面

                 cocos2dx之使用stdio构造登录界面

 

      大家好，我是Lampard

      今天与大家探讨一下如何使用stdio制造一个登录界面

      成品长这样，问文章最后有这次博客的资源（代码+图片），记得点赞哟：

    

   各种控件都比较简单，主要是熟悉cocoStdio的一个很好的demo，下面讲一讲具体如何实现：

  （1）在Stdio上创建一个新项目，命名尽量靠近需求即可，然后我们看看整个 Stdio的 项目结构 ：

   

  （2）首先是Panel_Root这个层容器，其没太大的意义就像一个画布方便你在上面画东西而已。

          Panel_Root的容器结构：

  （3）首先是Panel_Main这个层容器，他是我们这个ui界面的背景图

          Panel_Main的容器结构：

  

  （4）之后是两个图片类的精灵，是账号密码字体的背景，我们只需要设置好位置就可以了：

（5）然后是放置在图片上的账号，密码字体，下面是密码字体，账号一样只是位置不同：

（6）最后是重中之重，文本框的实现，我们要在Panel_Main这个层下创建一个输入框：

（7）最后少不了我们的确认键啦，它是一个btn类型：

 

 至此我们的cocoStdioUI已经配置好，之后就是cocos-quick里面的代码实现：

 首先我们要创建一个lua项目 ，编译好了之后，我们把stdio的内容导出过去。

 路径就写自己lua项目的res文件就可以了。

然后我们打开res目录看一下：

里面有我们的资源 以及一个json文件。json文件里面包含了我们之前的配置信息，它是一个类似键值对的一些脚本文件，我们只需要学会导用就可以了。

-- 主场景就只调用了我们新建的LoginScene的场景展示界面而已
cc.Director:getInstance():getOpenGLView():setFrameSize(1280,720)
local MainScene = class("MainScene", function()
    return display.newScene("MainScene")
end)

function MainScene:ctor()
  
end

function MainScene:onEnter()
    local loginscene = require("app.scenes.LoginScene").new();
   loginscene.m_uiRoot:pos(display.cx-940,display.cy-540)
    self:addChild(loginscene.m_uiRoot)
end

function MainScene:onExit()
end

return MainScene

然后我们看一看LoginScene文件：大致就是先读出json文件，把我们的层引出来，然后为我们的文本框和按钮设置监听函数。

我的按钮封装的是直接print出账号密码。

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


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

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

    -- 把层容器加载出来
    local panelMain = self.m_uiRoot:getChildByName("Panel_Main");

    -- TextField转EditBox 
    local editBoxHelper = EditBoxHelper.new();
    
    -- 账号输入的文本框，转化成EDIT类型的
    local textFieldAccount = panelMain:getChildByName("TextField_Account");
    self.m_textFieldAccount = editBoxHelper:replaceTextField(textFieldAccount);
    
    -- 输入监听事件
    self.m_textFieldAccount:registerScriptEditBoxHandler(handler(self, self.onEditbox));

    -- 密码输入文本框，设置密码不明文显示在界面上
    local textFieldPassWord = panelMain:getChildByName("TextField_PassWord")
    self.m_textFieldPassWord = editBoxHelper:replaceTextField(textFieldPassWord); 
    self.m_textFieldPassWord:setInputFlag(cc.EDITBOX_INPUT_FLAG_PASSWORD)
    self.m_textFieldAccount:registerScriptEditBoxHandler(handler(self, self.onEditbox));

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


-- 按钮的事件监听函数
function LoginScene:onTouchBtnLogin(sender, eventType)
    if eventType == ccui.TouchEventType.ended then
        local Account = self.m_textFieldAccount:getText();
        local password = self.m_textFieldPassWord:getText();
        print("Account = ", Account, ", password = ", password)
    end
end

-- 测试Editbox
function LoginScene:onEditbox(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 LoginScene

顺带一提的是，文本框显示出来的东西是明文显示在屏幕上，为了我们要对密码进行保密，我们可以这样操作让密码显示**呈现在 屏幕上：    self.m_textFieldPassWord:setInputFlag(cc.EDITBOX_INPUT_FLAG_PASSWORD)

 

最后我们显示一下效果：

 

其他问题应该不大，有看不懂的可以一起交流交流，谢谢大家！

资源下载地址：https://pan.baidu.com/s/1cHonH-ocun23quUjOYZ2OQ

提取码：r9pc