4.登录背景面板和登录面板

UI系统 > FGUI > FGUI实践项目 实践项目 UI系统 FGUI
发布时间 :
字数:2.2k 阅读 : 评论:
  1. 4.登录面板
    1. 4.1 拼面板
      1. 创建登录背景面板，只包含一个登录背景
      2. 创建一个复选按钮，为之后的记住密码复选框和自动登录复选框使用
      3. 创建账号密码背景文本输入文本。创建记住密码自动登录复选按钮。创建注册和确定按钮。检测关联
      4. 可以和提示面板一样添加显示隐藏的动效。
      5. 发布资源和代码
    2. 4.2 功能制作
      1. 创建背景面板脚本。继承Window。重新初始化方法对窗口内容进行复制并全屏显示。
      2. 创建登录面板脚本。继承Window。
      3. 登录面板脚本添加播放动画相关方法
      4. 创建登录数据结构类。包含用户名、密码、是否记住密码、是否自动登录、上一次登录服务器。添加可序列化特性，让之后可以在二进制数据管理器中使用。
      5. 创建用于管理登录相关数据的管理器类。搞成单例。引用一个登录数据对象。构造函数初始化用二进制管理器加载登录数据。如果本地不存在登录数据对象，则创建一个新的登录数据对象。添加存储登录数据二进制文件到本地的方法。
      6. 在登录面板重写显示时会自动调用的方法。通过 LoginMgr.Instance.loginData 获取登录相关的数据。把窗口的内容转成FGUI生成的组件类 UI_LoginWindow，通过 UI_LoginWindow 组件拓展类对象 panel，可以使用该类提供的属性和方法来访问登录窗口的各个组件。将登录相关的数据分别赋值给登录窗口的相应组件，例如是否记住密码、是否自动登录以及账号密码的显示内容。自动登录的逻辑之后完成了注册功能再回过头来写。
      7. 在登录面板重写初始化方法。在方法中加载登录窗口的UI组件，并将其设置为全屏显示。把contentPane转成UI_LoginWindow 组件拓展类对象 panel，可以使用该类提供的属性和方法来访问登录窗口的各个组件。设置确定按钮的点击事件逻辑。当点击确定按钮时，会判断输入的账号和密码是否合法（账号长度大于6位，密码长度大于3位），若不合法则弹出提示窗口，否则执行用户名和密码的验证逻辑（待完成）。设置注册按钮的点击事件逻辑。当点击注册按钮时，显示注册面板（待完成），并隐藏当前登录面板。设置记住密码复选框状态改变时的逻辑。当取消勾选记住密码时，同时强制取消勾选自动登录复选框。设置自动登录复选框状态改变时的逻辑。当勾选自动登录时，同时强制勾选记住密码复选框。
      8. 在主脚本进行测试。
    3. 4.3 代码
      1. LoginBkWindow
      2. LoginData
      3. LoginMgr
      4. LoginWindow
      5. Main

4.登录面板

4.1 拼面板

创建登录背景面板，只包含一个登录背景

创建一个复选按钮，为之后的记住密码复选框和自动登录复选框使用

创建账号密码背景文本输入文本。创建记住密码自动登录复选按钮。创建注册和确定按钮。检测关联

可以和提示面板一样添加显示隐藏的动效。

发布资源和代码

4.2 功能制作

创建背景面板脚本。继承Window。重新初始化方法对窗口内容进行复制并全屏显示。

public class LoginBkWindow : Window
{
    protected override void OnInit()
    {
        base.OnInit();
        this.contentPane = UIManager.Instance.LoadComponent("Login", "LoginBKWindow");
        this.contentPane.MakeFullScreen();
    }
}

创建登录面板脚本。继承Window。

public class LoginWindow : Window
{
}

登录面板脚本添加播放动画相关方法

protected override void DoShowAnimation()
{
    this.contentPane.GetTransition("show").Play(base.DoShowAnimation);
}

protected override void DoHideAnimation()
{
    this.contentPane.GetTransition("hide").Play(base.DoHideAnimation);
}

创建登录数据结构类。包含用户名、密码、是否记住密码、是否自动登录、上一次登录服务器。添加可序列化特性，让之后可以在二进制数据管理器中使用。

/// <summary>
/// 登录数据结构类
/// </summary>
[System.Serializable]
public class LoginData
{
    //用户名
    public string userName;
    //密码
    public string passWord;
    //是否记住密码
    public bool rememberPw;
    //是否自动登录
    public bool autoLogin;
    //上一次登录的服务器ID
    public int frontServerID = 0;
}

创建用于管理登录相关数据的管理器类。搞成单例。引用一个登录数据对象。构造函数初始化用二进制管理器加载登录数据。如果本地不存在登录数据对象，则创建一个新的登录数据对象。添加存储登录数据二进制文件到本地的方法。

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

    // 登录数据对象
    public LoginData loginData;

    public static LoginMgr Instance => instance;

    private LoginMgr()
    {
        // 加载本地存储的登录数据对象
        loginData = BinaryDataMgr.Instance.Load<LoginData>("LoginData");

        // 如果本地不存在登录数据对象，则创建一个新的登录数据对象
        if (loginData == null)
            loginData = new LoginData();
    }

    /// <summary>
    /// 存储登录数据二进制文件到本地
    /// </summary>
    public void SaveLoginData()
    {
        BinaryDataMgr.Instance.Save(loginData, "LoginData");
    }
}

在登录面板重写显示时会自动调用的方法。通过 LoginMgr.Instance.loginData 获取登录相关的数据。把窗口的内容转成FGUI生成的组件类 UI_LoginWindow，通过 UI_LoginWindow 组件拓展类对象 panel，可以使用该类提供的属性和方法来访问登录窗口的各个组件。将登录相关的数据分别赋值给登录窗口的相应组件，例如是否记住密码、是否自动登录以及账号密码的显示内容。自动登录的逻辑之后完成了注册功能再回过头来写。

/// <summary>
/// 显示时会自动调用的方法
/// </summary>
protected override void OnShown()
{
    base.OnShown();

    // 初始化面板基础内容
    // 得到登录相关数据
    LoginData data = LoginMgr.Instance.loginData;

    // 得到组件拓展类对象
    UI_LoginWindow panel = this.contentPane as UI_LoginWindow;

    // 两个复选按钮是否选中
    panel.m_cbPW.selected = data.rememberPw;
    panel.m_cbAuto.selected = data.autoLogin;

    // 账号密码显示的内容
    panel.m_inputAN.text = data.userName;
    panel.m_inputPW.text = data.passWord;

    // 如果需要自动登录
    if (data.autoLogin)
    {
        // 之后完成了注册功能再回过头来写自动登录
    }
}

在登录面板重写初始化方法。在方法中加载登录窗口的UI组件，并将其设置为全屏显示。把contentPane转成UI_LoginWindow 组件拓展类对象 panel，可以使用该类提供的属性和方法来访问登录窗口的各个组件。设置确定按钮的点击事件逻辑。当点击确定按钮时，会判断输入的账号和密码是否合法（账号长度大于6位，密码长度大于3位），若不合法则弹出提示窗口，否则执行用户名和密码的验证逻辑（待完成）。设置注册按钮的点击事件逻辑。当点击注册按钮时，显示注册面板（待完成），并隐藏当前登录面板。设置记住密码复选框状态改变时的逻辑。当取消勾选记住密码时，同时强制取消勾选自动登录复选框。设置自动登录复选框状态改变时的逻辑。当勾选自动登录时，同时强制勾选记住密码复选框。

protected override void OnInit()
{
    base.OnInit();

    // 加载登录窗口的UI组件，并将其设置为全屏显示
    this.contentPane = UIManager.Instance.LoadComponent("Login", "LoginWindow");
    this.contentPane.MakeFullScreen();

    // 得到组件拓展类对象
    UI_LoginWindow panel = this.contentPane as UI_LoginWindow;

    // 确定按钮点击后的逻辑
    panel.m_btnSure.onClick.Add(() =>
    {
        // 判断输入内容的合法性
        if (panel.m_inputAN.text.Length <= 6 || panel.m_inputPW.text.Length <= 3)
        {
            UIManager.Instance.ShowWindow<TipWindow>().ChangeInfo("账号必须大于6位,密码必须大于3位");
            return;
        }

        // 验证用户名和密码是否输入正确
        // 之后完成了注册功能再回过头来写
    });

    // 注册按钮点击后的逻辑
    panel.m_btnRe.onClick.Add(() =>
    {
        // 显示注册面板

        // 隐藏自己
        UIManager.Instance.HideWindow<LoginWindow>();
    });

    // 当记住密码状态改变时的逻辑
    panel.m_cbPW.onChanged.Add(() =>
    {
        // 记住密码取消勾选时强行取消勾选自动登录
        if (!panel.m_cbPW.selected)
            panel.m_cbAuto.selected = false;
    });

    // 当自动登录时的逻辑
    panel.m_cbAuto.onChanged.Add(() =>
    {
        // 自动登录勾选上强行勾选上记住密码
        if (panel.m_cbAuto.selected)
            panel.m_cbPW.selected = true;
    });
}

在主脚本进行测试。

UIManager.Instance.ShowWindow<LoginBkWindow>();
UIManager.Instance.ShowWindow<LoginWindow>();

4.3 代码

LoginBkWindow

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

public class LoginBkWindow : Window
{
    protected override void OnInit()
    {
        base.OnInit();

        this.contentPane = UIManager.Instance.LoadComponent("Login", "LoginBKWindow");
        this.contentPane.MakeFullScreen();
    }
}

LoginData

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

/// <summary>
/// 登录数据结构类
/// </summary>
[System.Serializable]
public class LoginData
{
    //用户名
    public string userName;
    //密码
    public string passWord;
    //是否记住密码
    public bool rememberPw;
    //是否自动登录
    public bool autoLogin;
    //上一次登录的服务器ID
    public int frontServerID = 0;
}

LoginMgr

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

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

    // 登录数据对象
    public LoginData loginData;

    public static LoginMgr Instance => instance;

    private LoginMgr()
    {
        // 加载本地存储的登录数据对象
        loginData = BinaryDataMgr.Instance.Load<LoginData>("LoginData");

        // 如果本地不存在登录数据对象，则创建一个新的登录数据对象
        if (loginData == null)
            loginData = new LoginData();
    }

    /// <summary>
    /// 存储登录数据二进制文件到本地
    /// </summary>
    public void SaveLoginData()
    {
        BinaryDataMgr.Instance.Save(loginData, "LoginData");
    }
}

LoginWindow

using FairyGUI;
using Login;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class LoginWindow : Window
{
    protected override void OnInit()
    {
        base.OnInit();

        // 加载登录窗口的UI组件，并将其设置为全屏显示
        this.contentPane = UIManager.Instance.LoadComponent("Login", "LoginWindow");
        this.contentPane.MakeFullScreen();

        // 得到组件拓展类对象
        UI_LoginWindow panel = this.contentPane as UI_LoginWindow;

        // 确定按钮点击后的逻辑
        panel.m_btnSure.onClick.Add(() =>
        {
            // 判断输入内容的合法性
            if (panel.m_inputAN.text.Length <= 6 || panel.m_inputPW.text.Length <= 3)
            {
                UIManager.Instance.ShowWindow<TipWindow>().ChangeInfo("账号必须大于6位,密码必须大于3位");
                return;
            }

            // 验证用户名和密码是否输入正确
            // 之后完成了注册功能再回过头来写
        });

        // 注册按钮点击后的逻辑
        panel.m_btnRe.onClick.Add(() =>
        {
            // 显示注册面板

            // 隐藏自己
            UIManager.Instance.HideWindow<LoginWindow>();
        });

        // 当记住密码状态改变时的逻辑
        panel.m_cbPW.onChanged.Add(() =>
        {
            // 记住密码取消勾选时强行取消勾选自动登录
            if (!panel.m_cbPW.selected)
                panel.m_cbAuto.selected = false;
        });

        // 当自动登录时的逻辑
        panel.m_cbAuto.onChanged.Add(() =>
        {
            // 自动登录勾选上强行勾选上记住密码
            if (panel.m_cbAuto.selected)
                panel.m_cbPW.selected = true;
        });
    }


    /// <summary>
    /// 显示时会自动调用的方法
    /// </summary>
    protected override void OnShown()
    {
        base.OnShown();

        // 初始化面板基础内容
        // 得到登录相关数据
        LoginData data = LoginMgr.Instance.loginData;

        // 得到组件拓展类对象
        UI_LoginWindow panel = this.contentPane as UI_LoginWindow;

        // 两个复选按钮是否选中
        panel.m_cbPW.selected = data.rememberPw;
        panel.m_cbAuto.selected = data.autoLogin;

        // 账号密码显示的内容
        panel.m_inputAN.text = data.userName;
        panel.m_inputPW.text = data.passWord;

        // 如果需要自动登录
        if (data.autoLogin)
        {
            // 之后完成了注册功能再回过头来写自动登录
        }
    }


    protected override void DoShowAnimation()
    {
        this.contentPane.GetTransition("show").Play(base.DoShowAnimation);
    }

    protected override void DoHideAnimation()
    {
        this.contentPane.GetTransition("hide").Play(base.DoHideAnimation);
    }
}

Main

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

public class Main : MonoBehaviour
{
    void Start()
    {
        //TipWindow win = UIManager.Instance.ShowWindow<TipWindow>();
        //win.ChangeInfo("欢迎进入游戏");
        //显示登录背景面板
        UIManager.Instance.ShowWindow<LoginBkWindow>();
        UIManager.Instance.ShowWindow<LoginWindow>();
    }
}
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 785293209@qq.com

赏

©2016-2024 Tao

Built with Hexo and 3-hexo theme

×

喜欢就点赞,疼爱就打赏