7.注册面板

UI系统 > UGUI > UGUI实践项目实践项目 UI系统 UGUI

发布时间 : 2024-03-13 10:21

字数:3.1k 阅读 :

评论:

7.注册面板

7.注册面板

7.1 拼面板

创建一个Panel取名为RegisterPanel作为注册面板，RegisterPanel下创建一个image作为面板的拖拽提示面板示意图，修改透明度对着来拼。背景图后面可以做一个专门显示背景面板的预制体，先拼其他控件就行。给登录面板添加CanvasGroup组件用于淡入淡出。

创建取消确定按钮，账号密码输入框和大字标题，调整位置和组件上的参数。有些控件可以直接复制登录面板的。

7.2 功能制作

查看注册数据和登录管理器类图

创建注册数据类RegisterData，包含一个键值都是字符串的字典，用于存储账号和密码

/// <summary>
/// 注册数据
/// </summary>
public class RegisterData
{
    public Dictionary<string, string> registerInfo = new Dictionary<string, string>();
}

在LoginMgr脚本中声明注册数据变量registerData和只读属性RegisterData，用于保存注册数据和获取注册数据。在构造函数中用Json管理器读取注册数据。声明存储注册数据方法SaveRegisterData，用Json管理器保存数据。声明注册用户方法RegisterUser，接受用户名和密码作为参数。首先判断是否已经存在该用户，如果已经存在，则返回false表示注册失败；如果不存在该用户，则将新的用户名和密码添加到注册数据的字典中，并调用SaveRegisterData方法进行本地存储，最后返回true表示注册成功。声明验证用户名和密码的方法CheckInfo，接受用户名和密码作为参数。首先判断是否存在该用户，如果存在，则比较密码是否相同，如果相同则返回true表示登录成功；如果不存在或者密码不相同，则返回false表示用户名和密码不合法。

public class LoginMgr
{
    private static LoginMgr instance = new LoginMgr();
    public static LoginMgr Instance => instance;

    //注册数据
    private RegisterData registerData;
    public RegisterData RegisterData => registerData;

    private LoginMgr()
    {
        //读取注册数据
        registerData = JsonMgr.Instance.LoadData<RegisterData>("RegisterData");
    }

    #region 注册数据
    //存储注册数据
    public void SavaRegisterData()
    {
        JsonMgr.Instance.SaveData(registerData, "RegisterData");
    }

    //注册方法
    public bool RegisterUser(string userName, string passWord)
    {
        //判断是否已经存在用户
        if(registerData.registerInfo.ContainsKey(userName))
        {
            return false;
        }

        //如果不存在 证明可以注册
        //存储新用户名和密码
        registerData.registerInfo.Add(userName, passWord);
        //本地存储
        SavaRegisterData();

        //注册成功
        return true;
    }

    //验证用户名密码是否合法
    public bool CheckInfo(string userName, string passWord)
    {
        //判断是否有该用户
        if( registerData.registerInfo.ContainsKey(userName) )
        {
            //密码相同 证明 登录成功
            if( registerData.registerInfo[userName] == passWord )
            {
                return true;
            }
        }

        //用户名和密码不合法
        return false;
    }
    #endregion
}

在LoginPanel脚本中，添加提供给外部快捷设置用户名和密码的方法SetInfo，外部传入用户名和密码

/// <summary>
/// 提供给外部 快捷设置用户名和密码的方法
/// </summary>
/// <param name="userName"></param>
/// <param name="passWord"></param>
public void SetInfo(string userName, string passWord)
{
    inputUN.text = userName;
    inputPW.text = passWord;
}

创建注册面板RegisterPanel 脚本，继承面板基类，注意名字要和场景中的对象一致，因为UI管理器是根据这个名字进行管理的。挂载到场景中的注册面板上。

RegisterPanel 脚本中声明确定和取消按钮变量btnSure和btnCancel。声明账号密码输入框的变量inputUN和inputPW。外部关联。

//确定和取消那妞
public Button btnSure;
public Button btnCancel;

//账号密码输入框
public InputField inputUN;
public InputField inputPW;

RegisterPanel 脚本中重写了Init方法，为取消按钮添加点击事件监听。当点击取消按钮时，隐藏当前注册面板并显示登录面板。为确定按钮添加点击事件监听。首先判断输入的账号密码是否合法，如果账号和密码长度都小于等于6，则弹出提示面板TipPanel，显示提示信息”账号和密码都必须大于6位”，然后返回。如果账号和密码长度都大于6，调用LoginMgr.Instance.RegisterUser方法尝试注册账号密码。如果注册成功，则显示登录面板。通过UIManager.Instance.ShowPanel()方法获取登录面板的实例，调用登录面板的SetInfo方法，更新登录面板上的用户名和密码。隐藏当前注册面板。如果注册失败，说明用户名已经存在，则显示提示面板TipPanel。更改提示面板的提示内容为”用户名已存在”。清空账号密码输入框的内容，方便用户重新输入。

public override void Init()
{
    btnCancel.onClick.AddListener(()=> {
        //隐藏自己
        UIManager.Instance.HidePanel<RegisterPanel>();
        //显示登录面板
        UIManager.Instance.ShowPanel<LoginPanel>();
    });

    btnSure.onClick.AddListener(()=> { 
        
        //判断输入的账号密码 是否合理
        if( inputPW.text.Length <= 6 ||
            inputUN.text.Length <= 6 )
        {
            //提示不合法 
            TipPanel panel = UIManager.Instance.ShowPanel<TipPanel>();
            //改变提示面板上提示的内容
            panel.ChangeInfo("账号和密码都必须大于6位");
            return;
        }
            
        //去注册账号密码
        if( LoginMgr.Instance.RegisterUser(inputUN.text, inputPW.text) )
        {
            //注册成功
            //显示 登录面板
            LoginPanel loginPanel = UIManager.Instance.ShowPanel<LoginPanel>();
            //更新登录面板上的 用户名和密码
            loginPanel.SetInfo(inputUN.text, inputPW.text);

            //隐藏自己
            UIManager.Instance.HidePanel<RegisterPanel>();
        }
        else
        {
            //提示别人 用户名已经存在 
            TipPanel tipPanel = UIManager.Instance.ShowPanel<TipPanel>();
            //改变提示内容
            tipPanel.ChangeInfo("用户名已存在");

            //方便别人重新输入
            inputUN.text = "";
            inputPW.text = "";
        }

    });
}

在LoginPanel脚本中，在注册按钮监听中补全逻辑，调用UI管理器实际打开注册面板。登录监听中补全逻辑，首先要验证用户名和密码是否正确。判断输入的用户名和密码是否合法，如果账号和密码长度都小于等于6，则弹出提示面板TipPanel，显示提示信息”账号和密码都必须大于6位”，然后返回。调用LoginMgr.Instance.CheckInfo方法验证用户名和密码是否通过，即检查输入的用户名和密码是否存储的匹配。如果登录成功，记录登录数据，将输入的用户名、密码、记住密码和自动登录选项保存到登录数据LoginMgr.Instance.LoginData中。调用LoginMgr.Instance.SaveLoginData()方法保存登录数据。之后补全根据服务器返回的信息来决定显示哪个面板的逻辑。隐藏当前登录面板。如果示登录失败，显示提示面板TipPanel。更改提示面板的提示内容为”账号或密码错误”。

public override void Init()
{
    //点击注册 做什么
    btnRegister.onClick.AddListener(()=> {
        //显示注册面板
        UIManager.Instance.ShowPanel<RegisterPanel>();
        //隐藏自己
        UIManager.Instance.HidePanel<LoginPanel>();
    });

    //点击登录 做什么
    btnSure.onClick.AddListener(()=> {
        //点击登录后 要验证用户民密码 是否正确 

        //判断是否合法
        if (inputPW.text.Length <= 6 ||
            inputUN.text.Length <= 6)
        {
            //提示不合法 
            TipPanel panel = UIManager.Instance.ShowPanel<TipPanel>();
            //改变提示面板上提示的内容
            panel.ChangeInfo("账号和密码都必须大于6位");
            return;
        }

        //验证 用户名和密码 是否 通过
        if( LoginMgr.Instance.CheckInfo(inputUN.text, inputPW.text) )
        {
            //登录成功

            //记录数据
            LoginMgr.Instance.LoginData.userName = inputUN.text;
            LoginMgr.Instance.LoginData.passWord = inputPW.text;
            LoginMgr.Instance.LoginData.rememberPw = togPW.isOn;
            LoginMgr.Instance.LoginData.autoLogin = togAuto.isOn;
            LoginMgr.Instance.SaveLoginData();

            //根据服务器信息 来进行判断 显示哪个面板


            //隐藏自己
            UIManager.Instance.HidePanel<LoginPanel>();
        }
        else
        {
            //登录失败
            UIManager.Instance.ShowPanel<TipPanel>().ChangeInfo("账号或密码错误");
        }

    });
}

把注册面板拖入Resources/UI文件夹下做成预制体

7.3 代码

RegisterData

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

/// <summary>
/// 注册数据
/// </summary>
public class RegisterData
{
    public Dictionary<string, string> registerInfo = new Dictionary<string, string>();
}

LoginMgr

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

public class LoginMgr
{
    private static LoginMgr instance = new LoginMgr();
    public static LoginMgr Instance => instance;

    //静态变量 不要在外面去new
    private LoginData loginData;
    //公共属性 方便外面获取
    public LoginData LoginData => loginData;

    //注册数据
    private RegisterData registerData;
    public RegisterData RegisterData => registerData;

    private LoginMgr()
    {
        //直接通过json管理器 来读取对应数据
        loginData = JsonMgr.Instance.LoadData<LoginData>("LoginData");

        //读取注册数据
        registerData = JsonMgr.Instance.LoadData<RegisterData>("RegisterData");
    }

    #region 登录数据
    //存储登录数据相关
    public void SaveLoginData()
    {
        JsonMgr.Instance.SaveData(loginData, "LoginData");
    }
    #endregion

    #region 注册数据
    //存储注册数据
    public void SavaRegisterData()
    {
        JsonMgr.Instance.SaveData(registerData, "RegisterData");
    }

    //注册方法
    public bool RegisterUser(string userName, string passWord)
    {
        //判断是否已经存在用户
        if(registerData.registerInfo.ContainsKey(userName))
        {
            return false;
        }

        //如果不存在 证明可以注册
        //存储新用户名和密码
        registerData.registerInfo.Add(userName, passWord);
        //本地存储
        SavaRegisterData();

        //注册成功
        return true;
    }

    //验证用户名密码是否合法
    public bool CheckInfo(string userName, string passWord)
    {
        //判断是否有该用户
        if( registerData.registerInfo.ContainsKey(userName) )
        {
            //密码相同 证明 登录成功
            if( registerData.registerInfo[userName] == passWord )
            {
                return true;
            }
        }

        //用户名和密码不合法
        return false;
    }
    #endregion
}

RegisterPanel

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

public class RegisterPanel : BasePanel
{
    //确定和取消按钮
    public Button btnSure;
    public Button btnCancel;

    //账号密码输入框
    public InputField inputUN;
    public InputField inputPW;

    public override void Init()
    {
        btnCancel.onClick.AddListener(() => {
            //隐藏自己
            UIManager.Instance.HidePanel<RegisterPanel>();
            //显示登录面板
            UIManager.Instance.ShowPanel<LoginPanel>();
        });

        btnSure.onClick.AddListener(() => { 
            
            //判断输入的账号密码 是否合理
            if( inputPW.text.Length <= 6 ||
                inputUN.text.Length <= 6 )
            {
                //提示不合法 
                TipPanel panel = UIManager.Instance.ShowPanel<TipPanel>();
                //改变提示面板上提示的内容
                panel.ChangeInfo("账号和密码都必须大于6位");
                return;
            }
                    
            //去注册账号密码
            if( LoginMgr.Instance.RegisterUser(inputUN.text, inputPW.text) )
            {
                //注册成功
                //显示 登录面板
                LoginPanel loginPanel = UIManager.Instance.ShowPanel<LoginPanel>();
                //更新登录面板上的 用户名和密码
                loginPanel.SetInfo(inputUN.text, inputPW.text);

                //隐藏自己
                UIManager.Instance.HidePanel<RegisterPanel>();
            }
            else
            {
                //提示别人 用户名已经存在 
                TipPanel tipPanel = UIManager.Instance.ShowPanel<TipPanel>();
                //改变提示内容
                tipPanel.ChangeInfo("用户名已存在");

                //方便别人重新输入
                inputUN.text = "";
                inputPW.text = "";
            }

        });
    }
}

LoginPanel

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

public class LoginPanel : BasePanel
{
    //注册按钮
    public Button btnRegister;
    //确定登录按钮
    public Button btnSure;

    //账号和密码控件
    public InputField inputUN;
    public InputField inputPW;

    //记住密码和自动登录 多选框
    public Toggle togPW;
    public Toggle togAuto;

    public override void Init()
    {
        //点击注册 做什么
        btnRegister.onClick.AddListener(() => {
            //显示注册面板
            UIManager.Instance.ShowPanel<RegisterPanel>();
            //隐藏自己
            UIManager.Instance.HidePanel<LoginPanel>();
        });

        //点击登录 做什么
        btnSure.onClick.AddListener(() => {
            //点击登录后 要验证用户民密码 是否正确 
            
            //判断是否合法
            if (inputPW.text.Length <= 6 ||
                inputUN.text.Length <= 6)
            {
                //提示不合法 
                TipPanel panel = UIManager.Instance.ShowPanel<TipPanel>();
                //改变提示面板上提示的内容
                panel.ChangeInfo("账号和密码都必须大于6位");
                return;
            }

            //验证 用户名和密码 是否 通过
            if( LoginMgr.Instance.CheckInfo(inputUN.text, inputPW.text) )
            {
                //登录成功

                //记录数据
                LoginMgr.Instance.LoginData.userName = inputUN.text;
                LoginMgr.Instance.LoginData.passWord = inputPW.text;
                LoginMgr.Instance.LoginData.rememberPw = togPW.isOn;
                LoginMgr.Instance.LoginData.autoLogin = togAuto.isOn;
                LoginMgr.Instance.SaveLoginData();

                //根据服务器信息 来进行判断 显示哪个面板


                //隐藏自己
                UIManager.Instance.HidePanel<LoginPanel>();
            }
            else
            {
                //登录失败
                UIManager.Instance.ShowPanel<TipPanel>().ChangeInfo("账号或密码错误");
            }

        });

        //点击记住密码 逻辑
        togPW.onValueChanged.AddListener((isOn) =>
        {
            //当记住密码取消选中状态时 自动登录 也应该取消选中
            if( !isOn )
            {
                togAuto.isOn = false;
            }
        });

        //点击自动登录 逻辑
        togAuto.onValueChanged.AddListener((isOn) =>
        {
            //当我们选中 自动登录时  如果记住密码 没有被选中 应该让它选中
            if(isOn)
            {
                togPW.isOn = true;
            }
        });
    }

    public override void ShowMe()
    {
        base.ShowMe();
        //显示自己时  根据数据 更新面板上的内容

        //得到数据
        LoginData loginData = LoginMgr.Instance.LoginData;

        //初始化面板显示
        //更新 两个多选框
        togPW.isOn = loginData.rememberPw;
        togAuto.isOn = loginData.autoLogin;

        //更新账号密码
        inputUN.text = loginData.userName;
        //根据你是否上一次勾选了记住密码 来决定是否 更新密码
        if (togPW.isOn)
            inputPW.text = loginData.passWord;

        //如果是自动登录 做什么
        if( togAuto.isOn )
        {
            //自动去验证账号密码相关
        }
    }


    /// <summary>
    /// 提供给外部 快捷设置用户名和密码的方法
    /// </summary>
    /// <param name="userName"></param>
    /// <param name="passWord"></param>
    public void SetInfo(string userName, string passWord)
    {
        inputUN.text = userName;
        inputPW.text = passWord;
    }
}

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 785293209@qq.com