Unity实现基于UGUI的简易UI框架

本文详细介绍如何在Unity中构建UI框架,包括创建UI预制体、利用Json.NET解析UI配置、实现UI面板的堆栈管理和页面跳转,以及按钮响应和面板状态控制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

 

将Canvas下的东西做为预制体,创建一个文件夹,叫做UIFrameWork.

在UIFrameWork下创建文件夹UIPanel,其下创建脚本UIPenelType,写一个枚举类(对应UI预制体)

如:

再ShowinExplorer打开目录,在UIFrameWork文件夹下创建一个新的文件夹Resources,在Resources下创建txt文本,改名为 UIPanelType.json

再在UIPanelType.json 中写入UI对应的类型和对应的路径。如:

UIFrameWork文件夹下创建脚本UIManager(UI框架管理器)

UIPenel文件夹下创建脚本UIPanelInfo,此脚本用于对应json脚本的数据

如:

在UIManager中先用字典去保存类型和对应路径

//字典用于存储所有面板Prefab路径

使用Json.NET(newtonsoft)解析Json 并将其放入字典中

(using Newtonsoft.Json;)

将UIManager做成一个单例模式

(TextAssets类:有时我们需要读取配置文件,这个文件是以文本文件的形式存在的,我们可以用到TextAsset类)

可以再UIManager中写一个Test方法检测是否已经解析完成

再新建一个脚本,将其挂载在Canvas上,测试

显示成功

………………

在每个UI的Prefab下都添加一个脚本(如 SkillPanel下创建脚本SkillPanel),统一继承自BasePanel(新建脚本)

在UIManager中创建一个字典用于储存  <UIPanelType,BasePanel>;

写一个方法用于根据面板类型 得到实例化的面板

上面缺少了:return instPanel.GetComponent<BasePanel>();

下面为一个字典的扩展方法,C#扩展方法第一个参数指定该方法作用于哪个类型,并且该参数以 this 修饰符为前缀。

用容器-栈的方法存储页面 ,先放的页面在底下,后进先出。

写一个入栈的方法:

在UIManager中:

 

接着在各个按钮(背包、商城等button在MainPanel下)下添加button响应

 

 

页面之间的跳转:与其四个虚方法

修改入栈方法。当入栈时,判断栈是否有页面,如果有,就暂停这个页面。

在添加栈前将页面显示出来:

在MainMenuPanel中重写OnPause方法:通过CanvasGroup的Blocks RaycastHit设置为false,使页面不再与鼠标交互

 

出栈代码:

任务按钮点击事件添加OnClosePanel,重写OnExit();

MainMenuPanel中重写OnResume:

在Task关闭后,需要重新打开时,写入OnEnter方法:

(if判断是在开始时调用OnEnter会还未在Start中获得CanvasGroup组件)

其他类似~