关于c#:Unity面向新手超简单的UI框架

6次阅读

共计 11469 个字符，预计需要花费 29 分钟才能阅读完成。

揭示：为了可能将知识点学得更加透彻、记得更加牢固我会通过教学解说的形式把常识写下来因为在过程中会让人从学生变成老师这个过程会开掘出新的常识和观点是一个自我思维切换而达成的常识深度开掘和晋升的过程如果能帮忙到大家那就最好如果有讲错的中央还请多多指教！我只是一只菜鸡感激了解！

游戏中存在十分多的面板例如：背包面板、商店面板、设置面板、

这些面板之间会须要频繁的调用和切换，例如：背包面板中存在各种物品，咱们鼠标放到物品上会呈现物品信息的提示框，还有设置面板须要按返回键才能够切换回主菜单面板，那咱们如何实现界面间的沟通呢？我之前的做法就是在每个我要用到的面板上都写一个脚本实现对应的性能，置信不少老手开发者都是这样过去的吧。（纳尼菜逼竟是我本人？）

尽管这样做性能是实现了，然而维护性升高了、反复的代码也变多了，为了更加不便的治理和调用场景中的面板咱们须要写一套残缺的框架来对它们进行束缚不然很容易呈现面板共存，或者切换失败等问题。

恰好 SIKI 老师有一套面向老手的小型 UI 框架课程讲得蛮好的，最重要的是简略啊！！！对我这种老手来说真的十分敌对！咱们一起来学习下吧！

先来简略介绍下这个框架的思路吧，框架次要实现了面板的读取存储和治理，帮忙咱们更好的进行面板之间的切换治理

1、咱们通过 Json 文件存储咱们所有要用到的面板信息例如：面板的名字面板的类型面板的加载门路等等，按理论我的项目需要为准

2、创立一个面板抽象类 (就是所有面板的基类) 来实现面板共有的一些办法，比方面板进入的时候要做的一些事件，面板退出时候要做的一些事件

3、通过代码读取 Json 文件失去所有面板的信息，而后咱们就能通过这些信息来操作面板

4、框架最外围的中央就是如何高效的治理这些面板先来走一遍咱们面板的生成和敞开的流程

此时玩家只能操作背包面板，无奈操作人物面板（想想是不是很多游戏都是这样）当咱们想要操作人物面板的时候咱们须要先敞开背包面板而后能力操作人物面板

这里再画一幅图来解释

当初咱们位于最下面的设置菜单中子菜单界面，此时咱们只能操作子菜单界面，如果咱们想操作设置菜单界面的话咱们须要先敞开子菜单，能力操作设置菜单

当初子菜单敞开了，咱们就能够操作设置菜单了!

同理如果咱们想操作主菜单那咱们就必须要敞开设置菜单能力去操作主菜单

所以 Siki 老师是如何治理面板之间切换关系的呢？理解过数据结构的同学看了下面的图可能马上就懂了！对的就是用堆栈（Stack）来实现，堆栈是一个后进先出的对象汇合 后进先出先进后出？这不恰好能够用来存储管理咱们的面板吗

先进后出最先进入的是主菜单，所以咱们把他放到了容器底部，而后玩家又点击了设置菜单，于是咱们把他放到主菜单的下面，而后玩家又点击了设置菜单里的子菜单，咱们把子菜单放到了设置菜单的下面

咱们让玩家只能操作栈中的顶部面板，通过 Push 把面板入栈（面板进入）通过 Pop 把顶部面板出栈（面板退出）这样就轻松实现了面板之间的切换性能了

好吧说实话我感觉我讲的是一坨屎（可能只有我本人能听懂举荐间接去看 Siki 老师讲的）

思路理了一下！当初咱们一步一步来做吧！

首先咱们来实现第一步

咱们通过 Json 文件存储咱们所有要用到的面板信息例如：面板的名字面板的类型面板的加载门路等等，按理论我的项目需要为准

在创立 Json 文件之前，咱们须要先把要用到的面板做成预制体寄存到 Resources 门路下稍后通过 Resources 来加载这些咱们要用到的面板，这里我本人新建了一张图作为面板来演示，命名为“SettingPanel”寄存到 Resources 的 UIPanel 文件夹下

好当初咱们就来创立一个 Json 文件（新建一个文本文件后缀改成.Json 就是一个 Json 文件了，留神咱们 Json 文件也要放到 Resources 文件夹下因为咱们稍后会通过 Resources 来获取它）并往里面写上咱们面板的信息，这里为了不便小伙伴们的了解我就写简略一点

json 文件

{
    "data":
    [{"uiPanelType":"settingPanel","uiPanelPath":"UIPanel/SettingPanel"}
    ]
}

这里简略讲下 Json 文件的格局吧

花括号 {} 保留对象：对象能够蕴含各种数据，包含数组。
方括号 [] 保留数组：数组能够蕴含对象。
数据由逗号分隔

不懂的咱们能够间接找个在线解析 Json 的网站这里举荐 https://www.bejson.com/conver…

咱们间接抉择 Json 转 C# 实体类看看咱们把写好的 Json 数据复制过来而后点击生成实体类看看

为了不便察看我把生成的实体来复制过去给大伙看看


 public class DataItem
 {public string uiPanelType { get; set;}
 
        public string uiPanelPath {get; set;}
 }

 public class Root
 {public List <DataItem> data { get; set;}
 }

不晓得仔细的小伙伴发现了没有这两个类是不是刚好映射了 Json 文件里的数据

认真比照一下就能理解其中的意思

要留神的是这些数据必须要和咱们写的 Json 文件里的信息对应(反过来也是一样的总之 Json 和映射类的信息名肯定要保持一致) 只有写错一个单词 Json 就会解析失败

// 解析胜利

public string uiPanelType {get; set;}
public string uiPanelPath {get; set;}
public List <DataItem> data {get; set;}

"uiPanelType":"settingPanel","uiPanelPath":"UIPanel/SettingPanel"}



// 解析失败 映射类和 Json 的数据名称不一样 解析会报错

public string PanelType {get; set;}
public string PanelPath {get; set;}
public List <DataItem> paneldata {get; set;}

"uiPanelType":"settingPanel","uiPanelPath":"UIPanel/SettingPanel"}

我讲的可能跟一坨屎一样甚至更差（我帮你们讲了）最好就是本人去度娘或者谷爹查下材料，当初我也就会最根本的操作回头我再深刻学一下而后再写一篇对于 Json 的文章进去（祸患社会~）

刚刚是咱们一键生成的映射类当初咱们本人入手来写下吧

PanelData 类

public class PanelData
{
    /// <summary>
    /// UI 面板类型
    /// </summary>
    public string uiPanelType;
    /// <summary>
    /// UI 面板门路
    /// </summary>
    public string uiPanelPath;
}

UIPanelDataList 类

public class UIPanelDataList
{public PanelData[] data;
}

两个映射类写完了咱们还要写一个 UIPanelType 枚举类用来定义咱们的面板类型，到时候咱们拿到 Json 文件里的 uiPanelType 数据，而后将 String 转换成枚举类型就能失去面板的类型了

UIPanelType 类：

public enum UIPanelType
{settingPanel           // 设置面板}

创立一个面板抽象类 (就是所有面板的基类) 来实现面板共有的一些办法，比方面板进入的时候要做的一些事件，面板退出时候要做的一些事件

UIPanelBase 类比较简单没什么好讲了依据本人的需要定义面板共有的一些办法

UIPanelBase 类：

using UnityEngine;

public class UIPanelBase : MonoBehaviour
{
    /// <summary>
    /// 入栈状态
    /// </summary>
    public virtual void PushState()
    {Debug.Log("入栈状态");
    }

    /// <summary>
    /// 出栈
    /// </summary>
    public virtual void PopState()
    {Debug.Log("出栈状态");
    }

    /// <summary>
    /// 面板复原
    /// </summary>
    public virtual void RemotState()
    {Debug.Log("复原状态");
    }
}

通过代码读取 Json 文件失去所有面板的信息，而后咱们就能通过这些信息来操作面板

这里我举荐应用 LitJson，当然大家也能够用 Unity 自带的 JsonUtility，哪个棘手就用那个。

要应用 LitJson 就须要去援用它 下载 litJson.dll(这里我就不放下载链接了 Github 上或者百度一下就有了) 放到 Plugins 文件夹下如果没有就本人创立一个

当初咱们能够创立外围的 UIManager 类

MainUIManager 类

首先第一步援用 litJson 非常简单就一句话“using LitJson;”

而后把 MainUIManager 类做成一个单例（不懂单例的能够百度看看）

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

public class MainUIManager : MonoBehaviour
{
    /// <summary>
    /// MainUIManager 单例
    /// </summary>
    public static MainUIManager Instance;
    
    public void Awake()
    {Instance = this;}
}

单例做完后咱们须要两个字典一个用来存储从 Json 解析进去的数据另一个用来存储面板的 UIPanelBase(咱们须要在每个要操作的面板上增加一个脚本并继承 UIPanelBase 类咱们拿到面板身上的 UIPanelBase 类就相当于拿到了面板的实例)

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

public class MainUIManager : MonoBehaviour
{
    /// <summary>
    /// MainUIManager 单例
    /// </summary>
    public static MainUIManager Instance;
    
     /// <summary>
    /// 保留从 Json 文件解析进去的面板数据
    /// </summary>
    private Dictionary<UIPanelType, string> oriPanelDataDic = new Dictionary<UIPanelType, string>();
    
    /// <summary>
    /// 保留面板实例
    /// </summary>
    private Dictionary<UIPanelType, UIPanelBase> newPanelDataDic = new Dictionary<UIPanelType, UIPanelBase>();
    
    public void Awake()
    {Instance = this;}
}

我英文不是太好取名会有点差

当初咱们就能够来读取 Json 文件里的数据了

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

public class MainUIManager : MonoBehaviour
{
    /// <summary>
    /// MainUIManager 单例
    /// </summary>
    public static MainUIManager Instance;
    
     /// <summary>
    /// 保留从 Json 文件解析进去的面板数据
    /// </summary>
    private Dictionary<UIPanelType, string> oriPanelDataDic = new Dictionary<UIPanelType, string>();
    
    /// <summary>
    /// 保留面板实例
    /// </summary>
    private Dictionary<UIPanelType, UIPanelBase> newPanelDataDic = new Dictionary<UIPanelType, UIPanelBase>();
    
    /// <summary>
    /// 文本资源 用于读取 Json 文件里的数据
    /// </summary>
    private TextAsset uiPanelJson;
    
    public void Awake()
    {Instance = this;}
    
     /// <summary>
    /// 初始化 Json 数据
    /// </summary>
    private void InitJson()
    {
        // 获取 Json 文件数据
        uiPanelJson = Resources.Load<TextAsset>("UIPanelData");

        // 解析 Json
        UIPanelDataList panelData = JsonMapper.ToObject<UIPanelDataList>(uiPanelJson.text);

        // 存储数据到字典中
        foreach (PanelData item in panelData.data)
        {
            // 将 String 类型转换成枚举类型 并存储到字典中
            oriPanelDataDic.Add((UIPanelType)System.Enum.Parse(typeof(UIPanelType), item.uiPanelType.ToString()), item.uiPanelPath);
        }
    }
    
}

接下来咱们拿到 Canvas 的 Transform 组件等等咱们写生成面板的逻辑须要把面板的父物体设置到 Canvas 下 Canvas 我设置了个 Tag 叫“UICanvas”所以我间接通过 Tag 去查找它

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

public class MainUIManager : MonoBehaviour
{
    /// <summary>
    /// MainUIManager 单例
    /// </summary>
    public static MainUIManager Instance;
    
     /// <summary>
    /// 保留从 Json 文件解析进去的面板数据
    /// </summary>
    private Dictionary<UIPanelType, string> oriPanelDataDic = new Dictionary<UIPanelType, string>();
    
    /// <summary>
    /// 保留面板实例
    /// </summary>
    private Dictionary<UIPanelType, UIPanelBase> newPanelDataDic = new Dictionary<UIPanelType, UIPanelBase>();
    
    /// <summary>
    /// 文本资源 用于读取 Json 文件里的数据
    /// </summary>
    private TextAsset uiPanelJson;
    
    private Transform uiCanvasTran;
    
    public void Awake()
    {
          Instance = this;
          InitJson();
          Init();}
    
     /// <summary>
    /// 初始化 Json 数据
    /// </summary>
    private void InitJson()
    {
        // 获取 Json 文件数据
        uiPanelJson = Resources.Load<TextAsset>("UIPanelData");

        // 解析 Json
        UIPanelDataList panelData = JsonMapper.ToObject<UIPanelDataList>(uiPanelJson.text);

        // 存储数据到字典中
        foreach (PanelData item in panelData.data)
        {
            // 将 String 类型转换成枚举类型 并存储到字典中
            oriPanelDataDic.Add((UIPanelType)System.Enum.Parse(typeof(UIPanelType), item.uiPanelType.ToString()), item.uiPanelPath);
        }
    }
    
    
    /// <summary>
    /// 初始化操作
    /// </summary>
    private void Init()
    {if (uiCanvasTran == null)
        {uiCanvasTran = GameObject.FindGameObjectWithTag("UICanvas").transform;
        }
    }
}

接下来写生成面板的逻辑也是很简略的

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

public class MainUIManager : MonoBehaviour
{
    /// <summary>
    /// MainUIManager 单例
    /// </summary>
    public static MainUIManager Instance;
    
     /// <summary>
    /// 保留从 Json 文件解析进去的面板数据
    /// </summary>
    private Dictionary<UIPanelType, string> oriPanelDataDic = new Dictionary<UIPanelType, string>();
    
    /// <summary>
    /// 保留面板实例
    /// </summary>
    private Dictionary<UIPanelType, UIPanelBase> newPanelDataDic = new Dictionary<UIPanelType, UIPanelBase>();
    
    /// <summary>
    /// 文本资源 用于读取 Json 文件里的数据
    /// </summary>
    private TextAsset uiPanelJson;
    
    private Transform uiCanvasTran;
    
    public void Awake()
    {
          Instance = this;
          InitJson();
          Init();}
    
     /// <summary>
    /// 初始化 Json 数据
    /// </summary>
    private void InitJson()
    {
        // 获取 Json 文件数据
        uiPanelJson = Resources.Load<TextAsset>("UIPanelData");

        // 解析 Json
        UIPanelDataList panelData = JsonMapper.ToObject<UIPanelDataList>(uiPanelJson.text);

        // 存储数据到字典中
        foreach (PanelData item in panelData.data)
        {
            // 将 String 类型转换成枚举类型 并存储到字典中
            oriPanelDataDic.Add((UIPanelType)System.Enum.Parse(typeof(UIPanelType), item.uiPanelType.ToString()), item.uiPanelPath);
        }
    }
    
    
    /// <summary>
    /// 初始化操作
    /// </summary>
    private void Init()
    {if (uiCanvasTran == null)
        {uiCanvasTran = GameObject.FindGameObjectWithTag("UICanvas").transform;
        }
    }
}

    /// <summary>
    /// 生成面板
    /// </summary>
    /// <param name="panelType"> 面板类型 </param>
    /// <returns></returns>
    public UIPanelBase GeneratePanel(UIPanelType panelType)
    {
        UIPanelBase uiPanelBase;
        newPanelDataDic.TryGetValue(panelType, out uiPanelBase);

        // 如果 uiPanelBase 为空就示意没在字典中
        if (uiPanelBase == null)
        {
            string panelPath;
            oriPanelDataDic.TryGetValue(panelType, out panelPath);
            GameObject newPanel = Instantiate(Resources.Load<GameObject>(panelPath));
            newPanel.transform.SetParent(uiCanvasTran, false);
            uiPanelBase = newPanel.GetComponent<UIPanelBase>();
            newPanelDataDic.Add(panelType, uiPanelBase);
            return uiPanelBase;
        }
        return uiPanelBase;
    }

生成面板并返回失去 uiPanelBase（面板基类）后咱们就能够做面板入栈出栈的操作了

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

public class MainUIManager : MonoBehaviour
{
    /// <summary>
    /// MainUIManager 单例
    /// </summary>
    public static MainUIManager Instance;
    
     /// <summary>
    /// 保留从 Json 文件解析进去的面板数据
    /// </summary>
    private Dictionary<UIPanelType, string> oriPanelDataDic = new Dictionary<UIPanelType, string>();
    
    /// <summary>
    /// 保留面板实例
    /// </summary>
    private Dictionary<UIPanelType, UIPanelBase> newPanelDataDic = new Dictionary<UIPanelType, UIPanelBase>();
    
    /// <summary>
    /// 文本资源 用于读取 Json 文件里的数据
    /// </summary>
    private TextAsset uiPanelJson;
    
    private Transform uiCanvasTran;
    
    private Stack<UIPanelBase> panelStack;
    
    public void Awake()
    {
          Instance = this;
          InitJson();
          Init();}
    
     /// <summary>
    /// 初始化 Json 数据
    /// </summary>
    private void InitJson()
    {
        // 获取 Json 文件数据
        uiPanelJson = Resources.Load<TextAsset>("UIPanelData");

        // 解析 Json
        UIPanelDataList panelData = JsonMapper.ToObject<UIPanelDataList>(uiPanelJson.text);

        // 存储数据到字典中
        foreach (PanelData item in panelData.data)
        {
            // 将 String 类型转换成枚举类型 并存储到字典中
            oriPanelDataDic.Add((UIPanelType)System.Enum.Parse(typeof(UIPanelType), item.uiPanelType.ToString()), item.uiPanelPath);
        }
    }
    
    
    /// <summary>
    /// 初始化操作
    /// </summary>
    private void Init()
    {if (uiCanvasTran == null)
        {uiCanvasTran = GameObject.FindGameObjectWithTag("UICanvas").transform;
        }
    }


    /// <summary>
    /// 生成面板
    /// </summary>
    /// <param name="panelType"> 面板类型 </param>
    /// <returns></returns>
    public UIPanelBase GeneratePanel(UIPanelType panelType)
    {
        UIPanelBase uiPanelBase;
        newPanelDataDic.TryGetValue(panelType, out uiPanelBase);

        // 如果 uiPanelBase 为空就示意没在字典中
        if (uiPanelBase == null)
        {
            string panelPath;
            oriPanelDataDic.TryGetValue(panelType, out panelPath);
            GameObject newPanel = Instantiate(Resources.Load<GameObject>(panelPath));
            newPanel.transform.SetParent(uiCanvasTran, false);
            uiPanelBase = newPanel.GetComponent<UIPanelBase>();
            newPanelDataDic.Add(panelType, uiPanelBase);
            return uiPanelBase;
        }
        return uiPanelBase;
    }
    
    /// <summary>
    /// 面板入栈
    /// </summary>
    /// <param name="panelType"></param>
    public void PushPanel(UIPanelType panelType)
    {if(panelStack==null)
        {panelStack = new Stack<UIPanelBase>();
        }
        UIPanelBase uiPanelBase = GeneratePanel(panelType);
        uiPanelBase.PushState();
        panelStack.Push(uiPanelBase);
    }

    /// <summary>
    /// 面板出栈
    /// </summary>
    public void PopPanel()
    {if (panelStack == null) return;

        // 拿到顶部数据
        UIPanelBase currentUIpanelBase = panelStack.Pop();
        currentUIpanelBase.PopState();

        if (panelStack.Count > 0)
        {UIPanelBase outUIpanelBase = panelStack.Peek();
            outUIpanelBase.RemotState();}
    }
}

这样咱们的 MainUIManager 类就写完了接下来调用就很简略了咱们为 SettingPanel 增加一个脚本“SettingPanel”（记得继承 UIPanelBase）

public class SettingPanel : UIPanelBase
{public void AddButtonClick()
    {MainUIManager.Instance.PushPanel(UIPanelType.settingPanel);
    }
}

办法写好后把他绑定到要点击的 Button 中（例如点击设置按钮显示设置面板就把设置面板的脚本绑定到设置按钮的 Button 组件中）

啊不会绑定间接把面板拖到 OnClick 上而后抉择咱们刚刚写的办法就好了或者百度一下马上就懂了

当初咱们所有的步骤都实现了运行游戏看看成果吧！失常来说咱们当初点击设置按钮就会弹出面板的了

如果你弹出了面板那就证实胜利了，如果没弹出也不要灰心好好钻研下代码看看报错，在下面的案例中咱们只做了面板入栈的操作，你能够试着实现下面板出栈的操作，非常简单的只须要写一行代码就好了，写代码就是要思考为什么，而不是什么都跟着敲，试着本人在这套框架上增加一些新的性能吧！

最初还是要阐明下文章次要是用来坚固我学到的常识用的，所以没那些大佬讲的这么具体，要是把你看懵了！那我就十分道歉了，倡议关掉去看一遍残缺的教程哈哈哈哈~~

正文完

c#

发表至： c#

2021-01-31

0

变量标识符的命名方法

关于c:程序人生-UNIX-网络编程之-getaddrinfo-函数详解及使用举例

关于c++:红黑树

关于c#:C中的深度学习四使用KerasNET识别硬币

关于mybatis:Mybatis17-Mybatis自关联查询一对多查询

关于c#:Unity面向新手超简单的UI框架

前言

为什么要应用 UI 框架

框架的思路

首先

实操

1、创立 Json 文件，把面板信息写入到 Json 中

2、创立面板的基类

3、读取 Json 文件

4、最初

站内搜索