【Unity之UI编程】如何用UGUI搭建一个登录注册面板

news2024/11/28 4:40:57

在这里插入图片描述


👨‍💻个人主页:@元宇宙-秩沅

👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由 秩沅 原创

👨‍💻 收录于专栏UI_Unity专栏

在这里插入图片描述


习题总结专题篇


文章目录

    • 习题总结专题篇
    • 🎶UML
    • 🎶(==1.==)开始面板交互(提示面板)
    • 🎶(==2.==)开始面板交互(开关)
    • 🎶(==3.==)注册面板交互(相同账号)
    • 🎶(==4.==)注册面板交互(成功注册)
    • 🎶(==5.==)数据交互方式(Json)
    • 🎶(==6.==)数据加密Md5
    • 🎶(==7.==)登录面板交互(成功登录)
    • 🎶(==8.==)登录面板交互(开关逻辑连带)
    • ⭐相关文章⭐


🎶UML

在这里插入图片描述
在这里插入图片描述


🅰️ ****


🎶(1.开始面板交互(提示面板)


在这里插入图片描述

  • 逻辑:没有输入账号密码按下登录的时候打开提示面板,按下确定后返回并移除面板(淡入淡出效果显示)

在这里插入图片描述

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Events;
using UnityEngine.UI;
//-------------------------------------
//—————————————————————————————————————
//___________项目:       ______________
//___________功能: 开始面板
//___________创建者:秩沅_______________
//_____________________________________
//-------------------------------------
public class LoginPanel : BasePanel 
{
    private CanvasGroup PanelGroup;

    //控件
    InputField InputAC, InputPW;

    Toggle Toggle1 ,Toggle2;

    string userName, password;

    protected override void Awake()
    {
        base.Awake();
        PanelGroup = GetComponent<CanvasGroup>();
        if (!PanelGroup)
        {
            PanelGroup = gameObject.AddComponent<CanvasGroup>();
        }
         InputAC = GetControl<InputField>("InputAC");
         InputPW = GetControl<InputField>("InputPW");
         Toggle1 = GetControl<Toggle>("Toggle1");
         Toggle2 = GetControl<Toggle>("Toggle2");
        userName = InputAC.text;
        password = InputPW.text;

    }

    private  void Start()
    {     
        AllEvent();
    }

    public override void ShowMe()
    {
        Fade(true , PanelGroup);
        base.ShowMe();

        //面板数据初始化
        InputAC.text = LoginData.GetInstance().userName;     
        Toggle1.isOn = LoginData.GetInstance().autoRP;

        //如果记住密码就显示密码否则未空格,trycatch是防止空报错
        try { InputPW.text = Toggle1.isOn ? LoginData.GetInstance().password  : ""; }
        catch { }

        Toggle2.isOn = LoginData.GetInstance().atoLoginl;
        if (Toggle2.isOn)
        {
            Debug.Log("自动登录");
        }
    }
    /// <summary>
    /// 重写隐藏方法
    /// </summary>
    public override void HideMe()
    {
        Fade(false, PanelGroup);//进行淡出的效果
        base.HideMe();


       
    }
    /// <summary>
    /// 添加控件监听事件
    /// </summary>
    private void AllEvent()
    {
       
        try
        {
            //登录按钮的事件监听
            GetControl<Button>("ButtonS").onClick.AddListener(() =>
            {
                userName = GetControl<InputField>("InputAC").text;
                password = GetControl<InputField>("InputPW").text;
                //当点击登陆时
                //1.如果账号密码为空
                if (userName == "" || password == "")
                {
                      UIContorl.GetInstance().ChangeTipPanel("账号或密码不能为空! 请重新输入"); //显示提示面板
                }

                //2.不为空验证
                else
                {
                    PlayerData palyerData = DataContorl.GetInstance().ReadData(userName);
              
                        //验证成功
                        if (DataContorl.GetInstance().Tip(userName, password))
                        {

                            UIContorl.GetInstance().ChangeTipPanel("登录成功"); //显示提示面板

                        //记录临时数据
                        LoginData.GetInstance().userName  = InputAC.text;
                        LoginData.GetInstance().password  = InputPW.text;
                    }
                    else 
                        {
                            UIContorl.GetInstance().ChangeTipPanel("账号或密码错误请重新输入");
                        }


                    //记录临时数据
                    LoginData.GetInstance().userName = userName;
                    LoginData.GetInstance().password = password;
                }

            });

            //注册按钮的事件监听
            GetControl<Button>("ButtonR").onClick.AddListener( ()=>
            {
                UIManager.GetInstance().ShowPanel<ReginstPanel>("ReginstPanel");//显示注册面板
                UIManager.GetInstance().RemovePanel("LoginPanel");//隐藏登录面板
            });

            //记住密码监听
            GetControl<Toggle>("Toggle1").onValueChanged.AddListener ((isOn)=> {

                if (!isOn)
                {
                    GetControl<Toggle>("Toggle2").isOn = false;
                    LoginData.GetInstance().atoLoginl = false;
                }
                //记录临时数据
                LoginData.GetInstance().autoRP  = isOn;

            });

            //自动登录监听
            GetControl<Toggle>("Toggle2").onValueChanged.AddListener((isOn) => {

                if (isOn)
                {
                    GetControl<Toggle>("Toggle1").isOn = true;
                    LoginData.GetInstance().autoRP = true;
                }
                //记录临时数据
                LoginData.GetInstance().atoLoginl = isOn;

            });

        }
        catch
        {
            Debug.Log("没有获取到");
        }


    }
}


🎶(2.开始面板交互(开关)


在这里插入图片描述

  • 逻辑:自动登录和记住密码之间的逻辑,取消记住密码自动登录一并取消,点击自动登录,记住密码一并勾选
 //记住密码监听
            GetControl<Toggle>("Toggle1").onValueChanged.AddListener ((isOn)=> {

                if (!isOn)
                {
                    GetControl<Toggle>("Toggle2").isOn = false;
                    LoginData.GetInstance().atoLoginl = false;
                }
                //记录临时数据
                LoginData.GetInstance().autoRP  = isOn;

            });

            //自动登录监听
            GetControl<Toggle>("Toggle2").onValueChanged.AddListener((isOn) => {

                if (isOn)
                {
                    GetControl<Toggle>("Toggle1").isOn = true;
                    LoginData.GetInstance().autoRP = true;
                }
                //记录临时数据
                LoginData.GetInstance().atoLoginl = isOn;

            });

🎶(3.注册面板交互(相同账号)


  • 逻辑:注册时,存在相同账号的提示

在这里插入图片描述

 //确定按钮监听
        GetControl<Button>("ButtonR").onClick.AddListener(() =>
        {

            string userName = InputAC.text;
            string password = InputPW.text;
           
            //如果存在相同账号名
            if (DataContorl.GetInstance().TipSame (userName))
            {
                UIContorl.GetInstance().ChangeTipPanel("该账号已存在!请重新注册");
                InputAC.text = "";
                InputPW.text = "";
            }
            else
            {
                PlayerData playerData = new PlayerData();
                playerData.registerData.Add(userName, password);
                DataContorl.GetInstance().SaveData(userName, playerData);

                UIManager.GetInstance().ShowPanel<LoginPanel>("LoginPanel");
                UIContorl.GetInstance().ChangeTipPanel("注册成功请返回登录");
                UIManager.GetInstance().RemovePanel("ReginstPanel");
            }
           
            Debug.Log(Application.persistentDataPath );

        });

🎶(4.注册面板交互(成功注册)


  • 注册成功,提示窗口,并返回登录界面

在这里插入图片描述



🎶(5.数据交互方式(Json)


在这里插入图片描述

  • 数据管理器
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
//-------------------------------------
//—————————————————————————————————————
//___________项目:       ______________
//___________功能:  数据管理
//___________创建者:______秩沅______
//_____________________________________
//-------------------------------------
public class DataContorl : SingleManager<DataContorl>
{
 
    /// <summary>
    /// 用Json序列化存储数据
    /// </summary>
    /// <param name="name"></param>
    public void SaveData(string name, PlayerData data)
    {
        JsonManager.Instance.SaveData(data, name);
    }

    public PlayerData ReadData(string name)
    {
       return  JsonManager.Instance.LoadData<PlayerData>(name);
    }

    //供外部调用识别账号密码是否正确
    public bool Tip(string userName, string password)
    {
        try
        {
            string pass = ReadData(userName).registerData[userName];
            Debug.Log(pass);
            if (userName != null && pass == password)
            {
                return true;
            }
            else return false;
        }
        catch
        { return false; }
    }

    //供外部调用识别注册时是否有相同的账号
    public bool TipSame(string userName)
    {
        Debug.Log("该账号已注册");
       return  ReadData(userName).registerData.ContainsKey(userName);
    }
}

  • Json管理器
using LitJson;
using System.Collections;
using System.Collections.Generic;
using System.IO;
using UnityEngine;

public enum JsonType
{
    JsonUtlity,
    LitJson,
}

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

    private JsonManager() { }

    public void SaveData(object data, string fileName, JsonType type = JsonType.LitJson)
    {
      
        string path = Application.persistentDataPath + "/" + fileName + ".json";
        string jsonStr = "";

        switch (type)
        {
            case JsonType.JsonUtlity:
                jsonStr = JsonUtility.ToJson(data);
                break;
            case JsonType.LitJson:
                jsonStr = JsonMapper.ToJson(data);
                break;
        }
        
        File.WriteAllText(path, jsonStr);
    }


    public T LoadData<T>(string fileName, JsonType type = JsonType.LitJson) where T : new()
    {
        //先判断 是否存在streamingAssets中
        string path = Application.streamingAssetsPath + "/" + fileName + ".json";

        //如果不存在默认文件 就从 persistentDataPath文件夹中去寻找
        if (!File.Exists(path))
            path = Application.persistentDataPath + "/" + fileName + ".json";
        //如果读写文件夹中都还没有 那就返回一个默认对象
        if (!File.Exists(path))
            return new T();

        //进行反序列化
        string jsonStr = File.ReadAllText(path);
        //数据对象
        T data = default(T);
        switch (type)
        {
            case JsonType.JsonUtlity:
                data = JsonUtility.FromJson<T>(jsonStr);
                break;
            case JsonType.LitJson:
                data = JsonMapper.ToObject<T>(jsonStr);
                break;
        }

        //把对象返回出去
        return data;
    }
}


🎶(6.数据加密Md5


在这里插入图片描述

  • 进入

🎶(7.登录面板交互(成功登录)


在这里插入图片描述

/// <summary>
    /// 添加控件监听事件
    /// </summary>
    private void AllEvent()
    {
       
        try
        {
            //登录按钮的事件监听
            GetControl<Button>("ButtonS").onClick.AddListener(() =>
            {
                userName = GetControl<InputField>("InputAC").text;
                password = GetControl<InputField>("InputPW").text;
                //当点击登陆时
                //1.如果账号密码为空
                if (userName == "" || password == "")
                {
                      UIContorl.GetInstance().ChangeTipPanel("账号或密码不能为空! 请重新输入"); //显示提示面板
                }

                //2.不为空验证
                else
                {
                    PlayerData palyerData = DataContorl.GetInstance().ReadData(userName);
              
                        //验证成功
                        if (DataContorl.GetInstance().Tip(userName, password))
                        {

                            UIContorl.GetInstance().ChangeTipPanel("登录成功"); //显示提示面板

                        //记录临时数据
                        LoginData.GetInstance().userName  = InputAC.text;
                        LoginData.GetInstance().password  = InputPW.text;
                    }
                    else 
                        {
                            UIContorl.GetInstance().ChangeTipPanel("账号或密码错误请重新输入");
                        }


                    //记录临时数据
                    LoginData.GetInstance().userName = userName;
                    LoginData.GetInstance().password = password;
                }

            });

🎶(8.登录面板交互(开关逻辑连带)


  • 逻辑:当点击记住密码时,下一次登录会自动显示账号和密码,当不显示时只会显示账号,当然每次的面板的临时数据都由一个单例对象LoginData进行临时保存

  • 在这里插入图片描述

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
//-------------------------------------
//—————————————————————————————————————
//___________项目:       ______________
//___________功能:    临时记住登录面板数据
//___________创建者:  ________秩沅_______
//_____________________________________
//-------------------------------------
public class LoginData :SingleManager<LoginData>
{
    //登录数据
    //1.用户名和密码
    public string userName;
    public string password;
    //2.记住密码和自动登录
    public bool autoRP;
    public bool atoLoginl;
}

public override void ShowMe()
    {
        Fade(true , PanelGroup);
        base.ShowMe();

        //面板数据初始化
        InputAC.text = LoginData.GetInstance().userName;     
        Toggle1.isOn = LoginData.GetInstance().autoRP;

        //如果记住密码就显示密码否则未空格,trycatch是防止空报错
        try { InputPW.text = Toggle1.isOn ? LoginData.GetInstance().password  : ""; }
        catch { }

        Toggle2.isOn = LoginData.GetInstance().atoLoginl;
        if (Toggle2.isOn)
        {
            Debug.Log("自动登录");
        }
    }
    /// <summary>
    /// 添加控件监听事件
    /// </summary>
    private void AllEvent()
    {
       
        try
        {
            //登录按钮的事件监听
            GetControl<Button>("ButtonS").onClick.AddListener(() =>
            {
                userName = GetControl<InputField>("InputAC").text;
                password = GetControl<InputField>("InputPW").text;
                //当点击登陆时
                //1.如果账号密码为空
                if (userName == "" || password == "")
                {
                      UIContorl.GetInstance().ChangeTipPanel("账号或密码不能为空! 请重新输入"); //显示提示面板
                }

                //2.不为空验证
                else
                {
                    PlayerData palyerData = DataContorl.GetInstance().ReadData(userName);
              
                        //验证成功
                        if (DataContorl.GetInstance().Tip(userName, password))
                        {

                            UIContorl.GetInstance().ChangeTipPanel("登录成功"); //显示提示面板

                        //记录临时数据
                        LoginData.GetInstance().userName  = InputAC.text;
                        LoginData.GetInstance().password  = InputPW.text;
                    }
                    else 
                        {
                            UIContorl.GetInstance().ChangeTipPanel("账号或密码错误请重新输入");
                        }


                    //记录临时数据
                    LoginData.GetInstance().userName = userName;
                    LoginData.GetInstance().password = password;
                }

            });

            //注册按钮的事件监听
            GetControl<Button>("ButtonR").onClick.AddListener( ()=>
            {
                UIManager.GetInstance().ShowPanel<ReginstPanel>("ReginstPanel");//显示注册面板
                UIManager.GetInstance().RemovePanel("LoginPanel");//隐藏登录面板
            });

            //记住密码监听
            GetControl<Toggle>("Toggle1").onValueChanged.AddListener ((isOn)=> {

                if (!isOn)
                {
                    GetControl<Toggle>("Toggle2").isOn = false;
                    LoginData.GetInstance().atoLoginl = false;
                }
                //记录临时数据
                LoginData.GetInstance().autoRP  = isOn;

            });

            //自动登录监听
            GetControl<Toggle>("Toggle2").onValueChanged.AddListener((isOn) => {

                if (isOn)
                {
                    GetControl<Toggle>("Toggle1").isOn = true;
                    LoginData.GetInstance().autoRP = true;
                }
                //记录临时数据
                LoginData.GetInstance().atoLoginl = isOn;

            });

        }
        catch
        {
            Debug.Log("没有获取到");
        }


    }

⭐相关文章⭐


⭐ 软件设计师高频考点大全⭐

⭐ unity之c#专题篇—系统强基⭐



你们的点赞👍 收藏⭐ 留言📝 关注✅是我持续创作,输出优质内容的最大动力!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1172649.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据可视化:折线图

1.初看效果 &#xff08;1&#xff09;效果一 &#xff08;2&#xff09;数据来源 2.JSON数据格式 其实JSON数据在JAVA后期的学习过程中我已经是很了解了&#xff0c;基本上后端服务器和前端交互数据大多是采用JSON字符串的形式 &#xff08;1&#xff09;JSON的作用 &#…

【软件逆向】如何逆向Unity3D+il2cpp开发的安卓app【IDA Pro+il2CppDumper+DnSpy+AndroidKiller】

教程背景 课程作业要求使用反编译技术&#xff0c;在游戏中实现无碰撞。正常情况下碰撞后角色死亡&#xff0c;修改为直接穿过物体不死亡。 需要准备的软件 il2CppDumper。DnSpy。IDA Pro。AndroidKiller。 一、使用il2CppDumper导出程序集 将{my_game}.apk后缀修改为{my_…

AD9371 官方例程 NO-OS 主函数 headless 梳理

AD9371 系列快速入口 AD9371ZCU102 移植到 ZCU106 &#xff1a; AD9371 官方例程构建及单音信号收发 ad9371_tx_jesd -->util_ad9371_xcvr接口映射&#xff1a; AD9371 官方例程之 tx_jesd 与 xcvr接口映射 AD9371 官方例程 时钟间的关系与生成 &#xff1a; AD9371 官方…

SpringCloudAlibaba - 项目完整搭建(Nacos + OpenFeign + Getway + Sentinel)

目录 一、SpringCloudAlibaba 项目完整搭建 1.1、初始化项目 1.1.1、创建工程 1.1.2、配置父工程的 pom.xml 1.1.3、创建子模块 1.2、user 微服务 1.2.1、配置 pom.xml 1.2.2、创建 application.yml 配置文件 1.2.3、创建启动类 1.2.4、测试 1.3、product 微服务 1…

LIME低亮度图像增强

LIME低亮度图像增强 main.cpp #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp> #include <iostream> #include <opencv2/imgproc/imgproc.hpp> #include "lime.h"int main() {cv::Mat img_in cv::imread("…

Hello AIGC类杂志实验

shadow 类杂志是我们从6月开始孵化的一个小型内容产品。目前还在不断迭代升级中~~ 今天和大家聊聊心得体会&#xff1a; 从2023-06-12发布第一期以来&#xff0c;我和小杜一起打磨了前面几期&#xff0c;逐步找到稳定的内容表达方式后&#xff0c;由小杜独立负责此类杂志的更新…

c语言从入门到实战——函数递归

函数递归 前言1. 递归是什么&#xff1f;2. 递归的限制条件3. 递归举例3.1 举例1&#xff1a;求n的阶乘3.1.1 分析和代码实现3.1.2 画图推演 3.2 举例2&#xff1a;3.2.1 分析和代码实现3.2.2 画图推演 4. 递归与迭代 前言 函数递归是指一个函数直接或间接地调用自身&#xff…

13 Linux 蜂鸣器

一、蜂鸣器驱动原理 常用蜂鸣器分两种&#xff0c;有源蜂鸣器和无源蜂鸣器。 它们俩的区别&#xff1a;有源蜂鸣器具有内置的振荡器和驱动电路&#xff0c;无源蜂鸣器没有&#xff1b;源蜂鸣器只需简单的数字信号来控制&#xff0c;无源蜂鸣器需要外部电路或微控制器来提供特定…

Spring和SpringMVC总结

一、Spring IoC(Inversion of Control)中文名称&#xff1a;控制反转&#xff08;对象的创建交给Spring管理&#xff09;。DI(dependency injection )依赖注入。容器&#xff08;Container&#xff09;&#xff1a;放置所有被管理的对象。beans&#xff1a;容器中所有被管理的对…

Rust编程基础核心之所有权(下)

1.变量与数据交互方式之二: 克隆 在上一节中, 我们讨论了变量与数据交互的第一种方式: 移动, 本节将介绍第二种方式:克隆。 如果我们 确实 需要深度复制 String 中堆上的数据&#xff0c;而不仅仅是栈上的数据&#xff0c;可以使用一个叫做 clone 的通用函数。 看下面的代码…

国产数据库人大金仓Kingbase数据迁移工具

点击上方蓝字关注我 在做国产数据库适配过程中经常需要将现有数据库的数据迁移至国产数据库中&#xff0c;在适配在人大金仓Kingbase数据库时&#xff0c;可以使用KDTS进行数据迁移。 1. 支持迁移的数据库及对象 2. 迁移工具安装 地址&#xff1a;https://www.kingbase.com.c…

多输入多输出 | Matlab实现WOA-RBF鲸鱼算法优化径向基神经网络多输入多输出预测

多输入多输出 | Matlab实现WOA-RBF鲸鱼算法优化径向基神经网络多输入多输出预测 目录 多输入多输出 | Matlab实现WOA-RBF鲸鱼算法优化径向基神经网络多输入多输出预测预测效果基本介绍程序设计往期精彩参考资料 预测效果 基本介绍 Matlab实现WOA-RBF鲸鱼算法优化径向基神经网络…

农业水土环境与面源污染建模及对农业措施响应

目录 ​专题一 农业水土环境建模概述 专题二 ArcGIS入门 专题三 农业水土环境建模流程 专题四 DEM数据制备流程 专题五 土地利用数据制备流程 专题六 土壤数据制备流程 专题七 气象数据制备流程 专题八 农业措施数据制备流程 专题九 参数率定与结果验证 专题十 模型结…

【Python语言】比较四个数或多个数的大小

重点&#xff1a;sorted()函数可以对列表进行升序排序 思路&#xff1a;利用Python语言中的列表排序函数简单粗暴的解决比较大小问题 a int(input("请输入第一个数&#xff1a;")) b int(input("请输入第二个数&#xff1a;")) c int(input("请输…

反射型跨站点脚本攻击

测试过程: /ylpj/dwr/interface/%20idxIndexDicService/%22%3E%3Cscript%3Ealert(988)%3C/script%3E 解决方案: nginx添加 if ($args ~* "%3Cscript%3E") {return 400;}if ($request_uri ~* "%3Cscript%3E") {return 400; } 解决效果:

Java操作redis常见类型数据存储

目录 一、Java连接Redis 1.1 导入pom依赖 1.2 建立连接 二、Java使用Redis 2.1 字符串 String 2.2 哈希 Hash 2.3 列表 List 2.4 集合 Set 2.4 有序集合 Sorted Set 一、Java连接Redis redis与mysq都是数据库&#xff0c;java操作redis其实跟操作mysql的过程是差不多的…

C++性能优化笔记-6-C++元素的效率差异-7-类型转换

C元素的效率差异 类型转换signed与unsigned转换整数大小转换浮点精度转换整数到浮点转换浮点到整数转换指针类型转换重新解释对象的类型const_caststatic_castreinterpret_castdynamic_cast转换类对象 类型转换 在C语法中&#xff0c;有几种方式进行类型转换&#xff1a; // …

【每日一题】重复的DNA序列

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;哈希表方法二&#xff1a;哈希表滑动窗口位运算 写在最后 Tag 【哈希表】【位运算滑动窗口哈希表】【字符串】【2023-11-05】 题目来源 187. 重复的DNA序列 题目解读 找出字符串中重复出现的字符串。 解题思路 方法…

Android Gldie复用只取之前decode过的缓存resource,Kotlin

Android Gldie复用只取之前decode过的缓存resource&#xff0c;Kotlin import android.graphics.Bitmap import android.os.Bundle import android.util.Log import android.widget.ImageView import androidx.appcompat.app.AppCompatActivity import androidx.lifecycle.life…

数据可视化:地图

1.基础地图的使用 如何添加颜色表示层级 代码实现 """基础地图的使用 """ from pyecharts.charts import Map from pyecharts.options import VisualMapOpts# 准备地图对象 map Map() # 准备数据 data [("北京市", 9),("上海市…