6.登录面板

UI系统 > UGUI > UGUI实践项目 实践项目 UI系统 UGUI
发布时间 :
字数:2.1k 阅读 : 评论:
  1. 6.登录面板
    1. 6.1 拼面板
      1. 创建一个Panel取名为LoginPanel作为登录面板，LoginPanel下创建一个image作为面板的拖拽提示面板示意图，修改透明度对着来拼。背景图后面可以做一个专门显示背景面板的预制体，先拼其他控件就行。给登录面板添加CanvasGroup组件用于淡入淡出。
      2. 创建注册确定按钮，记住密码自动登录多选框，账号密码输入框和一些底图，调整位置和组件上的参数。
    2. 6.2 功能制作
      1. 创建用于管理登录数据的脚本LoginData，包括用户名，密码，是否记住密码，是否自动登录。还有服务器相关的后面再补充。
      2. 创建登录管理器LoginMgr脚本，搞成单例。管理一个私有LoginData变量和公共LoginData只可读属性，用于同一管理登录数据。在构造函数初始化的时候用Json管理器读取登录数据。提供一个存储登录数据相关的方法，方法中调用Json管理器存储登录数据
      3. 创建登录面板LoginPanel 脚本，继承面板基类，注意名字要和场景中的对象一致，因为UI管理器是根据这个名字进行管理的。挂载到场景中的登录面板上。LoginPanel 脚本中声明注册按钮btnRegister、登录确定按钮btnSure，用户名输入框inputUN、密码输入框inputPW，记住密码多选框togPW和自动登录的多选框togAuto变量。在外部关联。
      4. LoginPanel 脚本中重写的Init()方法，添加事件监听。当点击注册按钮时，使用UIManager的HidePanel方法隐藏LoginPanel面板。显示注册面板等有注册面板之后再写。当点击确定登录按钮时，执行相关的登录验证逻辑，要验证用户名密码是否正确 ，做不了想空着。给记住密码和自动登录多选框添加事件监听，当记住密码取消选中状态时，自动登录也应该取消选中，当选中自动登录时，如果记住密码没有被选中应该让它选中。
      5. LoginPanel 脚本中重写的ShowMe()方法，在显示LoginPanel时，根据登录管理器中的保存登录数据更新面板上的内容。获取LoginMgr实例的LoginData数据。根据登录数据初始化两个多选框的状态。根据记住密码多选框的状态来决定是否更新密码输入框的文本。如果自动登录多选框被选中，则执行自动登录相关的验证逻辑，这个逻辑等后面有服务器面板和选服面板时在补充。
      6. 把登录面板拖入Resources/UI文件夹下做成预制体。在Main脚本中测试登录面板。
    3. 6.3 代码
      1. LoginData
      2. LoginMgr
      3. LoginPanel
      4. Main

6.登录面板

6.1 拼面板

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

创建注册确定按钮，记住密码自动登录多选框，账号密码输入框和一些底图，调整位置和组件上的参数。

6.2 功能制作

创建用于管理登录数据的脚本LoginData，包括用户名，密码，是否记住密码，是否自动登录。还有服务器相关的后面再补充。

/// <summary>
/// 登录界面可能需要记住的玩家操作相关数据
/// </summary>
public class LoginData
{
    //用户名
    public string userName;
    //密码
    public string passWord;

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

    //服务器相关
}

创建登录管理器LoginMgr脚本，搞成单例。管理一个私有LoginData变量和公共LoginData只可读属性，用于同一管理登录数据。在构造函数初始化的时候用Json管理器读取登录数据。提供一个存储登录数据相关的方法，方法中调用Json管理器存储登录数据

public class LoginMgr
{
    //静态变量 不要在外面去new
    private static LoginMgr instance = new LoginMgr();
    public static LoginMgr Instance => instance;


    //私有变量
    private LoginData loginData;

    //公共属性 方便外面获取
    public LoginData LoginData => loginData;

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

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

创建登录面板LoginPanel 脚本，继承面板基类，注意名字要和场景中的对象一致，因为UI管理器是根据这个名字进行管理的。挂载到场景中的登录面板上。LoginPanel 脚本中声明注册按钮btnRegister、登录确定按钮btnSure，用户名输入框inputUN、密码输入框inputPW，记住密码多选框togPW和自动登录的多选框togAuto变量。在外部关联。

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.HidePanel<LoginPanel>();
        });

        //点击登录 做什么
        btnSure.onClick.AddListener(() =>
        {

            //点击登录后 要验证用户民密码 是否正确 
        });

        //点击记住密码 逻辑
        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)
        {
            //自动去验证账号密码相关
        }
    }
}

LoginPanel 脚本中重写的Init()方法，添加事件监听。当点击注册按钮时，使用UIManager的HidePanel方法隐藏LoginPanel面板。显示注册面板等有注册面板之后再写。当点击确定登录按钮时，执行相关的登录验证逻辑，要验证用户名密码是否正确 ，做不了想空着。给记住密码和自动登录多选框添加事件监听，当记住密码取消选中状态时，自动登录也应该取消选中，当选中自动登录时，如果记住密码没有被选中应该让它选中。

public override void Init()
{
    //点击注册 做什么
    btnRegister.onClick.AddListener(() =>
    {
        //显示注册面板

        //隐藏自己
        UIManager.Instance.HidePanel<LoginPanel>();
    });

    //点击登录 做什么
    btnSure.onClick.AddListener(() =>
    {

        //点击登录后 要验证用户民密码 是否正确 
    });

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

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

LoginPanel 脚本中重写的ShowMe()方法，在显示LoginPanel时，根据登录管理器中的保存登录数据更新面板上的内容。获取LoginMgr实例的LoginData数据。根据登录数据初始化两个多选框的状态。根据记住密码多选框的状态来决定是否更新密码输入框的文本。如果自动登录多选框被选中，则执行自动登录相关的验证逻辑，这个逻辑等后面有服务器面板和选服面板时在补充。


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)
    {
        //自动去验证账号密码相关
    }
}

把登录面板拖入Resources/UI文件夹下做成预制体。在Main脚本中测试登录面板。

//一进游戏 就应该显示 登录面板
UIManager.Instance.ShowPanel<LoginPanel>();

6.3 代码

LoginData

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

/// <summary>
/// 登录界面可能需要记住的玩家操作相关数据
/// </summary>
public class LoginData
{
    //用户名
    public string userName;
    //密码
    public string passWord;

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

    //服务器相关
}

LoginMgr

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

public class LoginMgr
{
    //静态变量 不要在外面去new
    private static LoginMgr instance = new LoginMgr();
    public static LoginMgr Instance => instance;

    //私有变量
    private LoginData loginData;

    //公共属性 方便外面获取
    public LoginData LoginData => loginData;

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

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

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.HidePanel<LoginPanel>();
        });

        //点击登录 做什么
        btnSure.onClick.AddListener(() => {

            //点击登录后 要验证用户民密码 是否正确 
        });

        //点击记住密码 逻辑
        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)
        {
            //自动去验证账号密码相关
        }
    }
}

Main

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

public class Main : MonoBehaviour
{    
    void Start()
    {
        //显示 提示面板 测试
        //TipPanel tipPanel = UIManager.Instance.ShowPanel<TipPanel>();
        //tipPanel.ChangeInfo("测试提示内容改变");

        //一进游戏 就应该显示 登录面板
        UIManager.Instance.ShowPanel<LoginPanel>();
    }
}
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 785293209@qq.com

赏

©2016-2024 Tao

Built with Hexo and 3-hexo theme

×

喜欢就点赞,疼爱就打赏