4.登录面板

UI系统 > NGUI > NGUI实践项目 实践项目 UI系统 NGUI
发布时间 :
字数:2.2k 阅读 : 评论:
  1. 4.登录面板
    1. 4.1 拼面板
      1. 创建一个Panel取名为LoginPanel，LoginPanel下创建一个Texture作为面板的底图，拖拽登录面板示意图，对着来拼
      2. 创建两个Sprite，选择登录按钮通用背景作为图片，调整切片模式九宫格透明度大小宽高锚点等，作为注册按钮和确定按钮背景的同时当做注册按钮对象和确定按钮对象，注意层级。再分别创建一个Sprite作为注册按钮和确定按钮背景子物体，选择注册图片和确定图片，注意层级。给注册按钮和确定按钮添加NGUI碰撞体和Button脚本。
      3. 创建两个输入框。分别是账号和密码。步骤是先创建一个Sprite在创建一个Label子物体。Sprite添加InputField脚本关联子物体Label。Sprite添加NGUI碰撞器。设置是否密码显示，输入字符限制，最大长度限制等。
      4. 创建两个多选框。分别是记住密码和自动登录。步骤是先创建一个Sprite在创建一个Sprite子物体。Sprite父对象添加Toggle脚本关联子物体Sprite。Sprite添加NGUI碰撞器。再给父对象Sprite添加一个Label进行多选框信息说明。
      5. 在UIRoot路径下创建Texture，拖拽背景图。因为很多面板下是公用的背景，所以单独丢出来。修改宽高缩放锚点等。
      6. 检查面板中控件是否都正常
      7. 检查DrawCall，发现动态文字穿插层级会导致多次DrawCall。修改所有文字层级高一点。减少DrawCall。
    2. 4.2 功能制作
      1. 分析需求可知，登录面板应该有各个按钮的监听和设置用户名密码的方法给注册面板调用。
      2. 创建提示面板LoginPanel脚本，继承面板基类。创建提示面板自身的成员变量账号密码输入框，注册登录按钮，记住密码和登录多选框，并在Inspector窗口关联。
      3. 处理LoginPanel控件事件监听相关逻辑。有些逻辑因为没有相关控件暂时处理不了。可以处理自动登录和记住密码多选框的逻辑，自动登录了看到要记住密码，不记住密码了看到不自动登录。
      4. 分析需求可知，若想进行初始化面板显示的相关信息的存储和用户名密码的存储，需要创建登录管理器和登录数据类。
      5. 创建登录数据LoginData脚本，创建要记录的必要的字段变量
      6. 创建登录管理器LoginMgr脚本，设置成单例。包含LoginData变量。构造函数初始化的时候用XML数据管理器来获取。
      7. 初始化LoginPanel面板显示的相关信息，读取LoginMgr中的LoginData变量中相关的字段进行初始化。
      8. 可以在确定登录按钮中添加测试代码，测试数据的存储。之后测试的内容要删除。
    3. 4.3 代码
      1. LoginPanel
      2. LoginData
      3. LoginMgr

4.登录面板

4.1 拼面板

创建一个Panel取名为LoginPanel，LoginPanel下创建一个Texture作为面板的底图，拖拽登录面板示意图，对着来拼

创建两个Sprite，选择登录按钮通用背景作为图片，调整切片模式九宫格透明度大小宽高锚点等，作为注册按钮和确定按钮背景的同时当做注册按钮对象和确定按钮对象，注意层级。再分别创建一个Sprite作为注册按钮和确定按钮背景子物体，选择注册图片和确定图片，注意层级。给注册按钮和确定按钮添加NGUI碰撞体和Button脚本。

创建两个输入框。分别是账号和密码。步骤是先创建一个Sprite在创建一个Label子物体。Sprite添加InputField脚本关联子物体Label。Sprite添加NGUI碰撞器。设置是否密码显示，输入字符限制，最大长度限制等。

创建两个多选框。分别是记住密码和自动登录。步骤是先创建一个Sprite在创建一个Sprite子物体。Sprite父对象添加Toggle脚本关联子物体Sprite。Sprite添加NGUI碰撞器。再给父对象Sprite添加一个Label进行多选框信息说明。

在UIRoot路径下创建Texture，拖拽背景图。因为很多面板下是公用的背景，所以单独丢出来。修改宽高缩放锚点等。

检查面板中控件是否都正常

检查DrawCall，发现动态文字穿插层级会导致多次DrawCall。修改所有文字层级高一点。减少DrawCall。



4.2 功能制作

分析需求可知，登录面板应该有各个按钮的监听和设置用户名密码的方法给注册面板调用。

创建提示面板LoginPanel脚本，继承面板基类。创建提示面板自身的成员变量账号密码输入框，注册登录按钮，记住密码和登录多选框，并在Inspector窗口关联。

//继承面板基类
public class LoginPanel : BasePanel<LoginPanel>
{
    //账号和密码输入框
    public UIInput inputUserName;
    public UIInput inputPassWord;

    //注册和登录 两个按钮
    public UIButton btnRegister;
    public UIButton btnLogin;

    //记住密码和自动登录 两个tog
    public UIToggle togRemeber;
    public UIToggle togAutoLogin;
}

处理LoginPanel控件事件监听相关逻辑。有些逻辑因为没有相关控件暂时处理不了。可以处理自动登录和记住密码多选框的逻辑，自动登录了看到要记住密码，不记住密码了看到不自动登录。

btnRegister.onClick.Add(new EventDelegate(() => {
    //点击注册做啥
    //隐藏自己 显示 注册面板
    HideMe();
}));

btnLogin.onClick.Add(new EventDelegate(() => {
    //点击登录做啥
    //判断 找好和密码 是否合法 
    //合法 做什么
    //不合法做什么
}));

togRemeber.onChange.Add(new EventDelegate(() => {
    //记住密码 单选框 选中未选中 状态变化 逻辑处理
    //记录数据
    //如果记住密码没有选中
    if (!togRemeber.value)
    {
        //强制让自动登录也没有选中
        togAutoLogin.value = false;
    }
}));

togAutoLogin.onChange.Add(new EventDelegate(() => {
    //自动登录 单选框 选中未选中 状态变化 逻辑处理
    //记录数据
    //如果自动登录选中了 那么记住密码 应该强制选中
    if (togAutoLogin.value)
    {
        togRemeber.value = true;
    }
}));

分析需求可知，若想进行初始化面板显示的相关信息的存储和用户名密码的存储，需要创建登录管理器和登录数据类。

创建登录数据LoginData脚本，创建要记录的必要的字段变量

/// <summary>
/// 记录玩家在登录面板上需要记录的信息的
/// </summary>
public class LoginData
{
    //记录用户名
    public string userName;
    //记录密码
    public string passWord;

    //记录上一次的登录的服务器ID
    public int frontServerID;

    //是否记住密码
    public bool rememberPW;
    //是否自动登录
    public bool autoLogin;
}

创建登录管理器LoginMgr脚本，设置成单例。包含LoginData变量。构造函数初始化的时候用XML数据管理器来获取。

/// <summary>
/// 登录管理器 主要用于管理 登录相关的数据
/// </summary>
public class LoginMgr
{
    private static LoginMgr instance = new LoginMgr();
    public static LoginMgr Instance => instance;

    private LoginMgr() 
    {
        //获取登录面板数据 从xml文件中获取 xml管理器Load数据接口中 第一次进入游戏假如不存在LoginData就会创建一个LoginData
        loginData = XmlDataMgr.Instance.LoadData(typeof(LoginData), "LoginData") as LoginData;
    }

    //登录面板 记录的玩家数据
    private LoginData loginData;
    //为了安全 提供一个 只能得不能改的 属性给外部 获取 登录相关的信息
    public LoginData LoginData => loginData;

    //提供给外部 存储数据的方法
    public void SaveLoginData()
    {
        XmlDataMgr.Instance.SaveData(loginData, "LoginData");
    }
}

初始化LoginPanel面板显示的相关信息，读取LoginMgr中的LoginData变量中相关的字段进行初始化。

//更新登录面板相关的内容 我们需要数据来进行更新
//获取我们的 登录数据 更新面板上的显示
LoginData data = LoginMgr.Instance.LoginData;

//更新 两个Tog
togRemeber.value = data.rememberPW;
togAutoLogin.value = data.autoLogin;

//更新用户名
if (data.userName != "")
    inputUserName.value = data.userName;
//是否更新密码
if( data.rememberPW )
{
    inputPassWord.value = data.passWord;
}

//是否自动登录
if( data.autoLogin )
{
    //自动登录的逻辑
}

可以在确定登录按钮中添加测试代码，测试数据的存储。之后测试的内容要删除。

btnLogin.onClick.Add(new EventDelegate(() => {
    //点击登录做啥
    //判断 找好和密码 是否合法 
    //合法 做什么
    //不合法做什么
    //测试 存储登录面板上的数据 之后要删除
    //记录用户名
    LoginMgr.Instance.LoginData.userName = inputUserName.value;
    LoginMgr.Instance.LoginData.passWord = inputPassWord.value;
    LoginMgr.Instance.LoginData.rememberPW = togRemeber.value;
    LoginMgr.Instance.LoginData.autoLogin = togAutoLogin.value;
    LoginMgr.Instance.SaveLoginData();
}));

4.3 代码

LoginPanel

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

//继承面板基类
public class LoginPanel : BasePanel<LoginPanel>
{
    //账号和密码输入框
    public UIInput inputUserName;
    public UIInput inputPassWord;

    //注册和登录 两个按钮
    public UIButton btnRegister;
    public UIButton btnLogin;

    //记住密码和自动登录 两个tog
    public UIToggle togRemeber;
    public UIToggle togAutoLogin;

    //初始化
    public override void Init()
    {
        #region 处理控件 事件监听相关逻辑
        btnRegister.onClick.Add(new EventDelegate(() => {
            //点击注册做啥
            //隐藏自己 显示 注册面板
            HideMe();
        }));

        btnLogin.onClick.Add(new EventDelegate(() => {
            //点击登录做啥

            //判断 找好和密码 是否合法 
            //合法 做什么

            //不合法做什么


            //测试 存储登录面板上的数据 之后要删除
            //记录用户名
            LoginMgr.Instance.LoginData.userName = inputUserName.value;
            LoginMgr.Instance.LoginData.passWord = inputPassWord.value;
            LoginMgr.Instance.LoginData.rememberPW = togRemeber.value;
            LoginMgr.Instance.LoginData.autoLogin = togAutoLogin.value;
            LoginMgr.Instance.SaveLoginData();
        }));

        togRemeber.onChange.Add(new EventDelegate(() => {
            //记住密码 单选框 选中未选中 状态变化 逻辑处理
            //记录数据

            //如果记住密码没有选中
            if (!togRemeber.value)
            {
                //强制让自动登录也没有选中
                togAutoLogin.value = false;
            }
        }));

        togAutoLogin.onChange.Add(new EventDelegate(() => {
            //自动登录 单选框 选中未选中 状态变化 逻辑处理
            //记录数据

            //如果自动登录选中了 那么记住密码 应该强制选中
            if (togAutoLogin.value)
            {
                togRemeber.value = true;
            }
        }));
        #endregion
        
        #region 初始化面板显示的相关信息
        //更新登录面板相关的内容 我们需要数据来进行更新
        
        //获取我们的 登录数据 更新面板上的显示
        LoginData data = LoginMgr.Instance.LoginData;
        
        //更新 两个Tog
        togRemeber.value = data.rememberPW;
        togAutoLogin.value = data.autoLogin;
        
        //更新用户名
        if (data.userName != "")
            inputUserName.value = data.userName;
        //是否更新密码
        if( data.rememberPW )
        {
            inputPassWord.value = data.passWord;
        }
        
        //是否自动登录
        if( data.autoLogin )
        {
            //自动登录的逻辑
        }
        
        #endregion
        
    }
}

LoginData

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

/// <summary>
/// 记录玩家在登录面板上需要记录的信息的
/// </summary>
public class LoginData
{
    //记录用户名
    public string userName;
    //记录密码
    public string passWord;
    
    //记录上一次的登录的服务器ID
    public int frontServerID;
    
    //是否记住密码
    public bool rememberPW;
    //是否自动登录
    public bool autoLogin;
}

LoginMgr

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

/// <summary>
/// 登录管理器 主要用于管理 登录相关的数据
/// </summary>
public class LoginMgr
{
    private static LoginMgr instance = new LoginMgr();
    public static LoginMgr Instance => instance;
    
    private LoginMgr() 
    {
        //获取登录面板数据 从xml文件中获取 xml管理器Load数据接口中 第一次进入游戏假如不存在LoginData就会创建一个LoginData
        loginData = XmlDataMgr.Instance.LoadData(typeof(LoginData), "LoginData") as LoginData;
    }
    
    //登录面板 记录的玩家数据
    private LoginData loginData;
    //为了安全 提供一个 只能得不能改的 属性给外部 获取 登录相关的信息
    public LoginData LoginData => loginData;
    
    //提供给外部 存储数据的方法
    public void SaveLoginData()
    {
        XmlDataMgr.Instance.SaveData(loginData, "LoginData");
    }
    
}
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 785293209@qq.com

赏

©2016-2024 Tao

Built with Hexo and 3-hexo theme

×

喜欢就点赞,疼爱就打赏