【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

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值