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

最新推荐文章于 2025-07-14 10:28:36 发布

原创

最新推荐文章于 2025-07-14 10:28:36 发布 · 9.6k 阅读

48 ·

CC 4.0 BY-SA版权

文章标签：

#UGUI #Unity #UI

本文介绍了一个基于Unity UGUI实现的简易UI框架，涵盖了UI框架的基本概念、功能实现，包括UI页面设计、Json和枚举保存面板信息、UIManager解析、BasePanel基类、面板管理与跳转等。同时，探讨了如何添加新页面、控制面板交互、调整显示层级、处理数据刷新等问题，并提供了解决方案和项目源码链接。

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

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

什么是UI框架？

UI框架中的 UIManager 管理场景中所有的面板, 控制面板之间的跳转.

本Demo实现以下功能:

这里写图片描述

关闭当前页面
显示新的页面
- 叠加显示
- 关闭当前页面并显示
- 关闭所有页面并显示
安卓返回键响应
- 返回上一个页面
- 退出程序

设计UI页面

先搭建好所有的UI界面, 并保存为prefab

这里写图片描述

通过Json和枚举保存所有面板的信息

json: json用于描述资料结构，有两种结构存在：
- 对象 (object)：一个对象包含一系列非排序的名称／值对(pair)，一个对象以{开始，并以}结束。每个名称／值对之间使用:分区。
- 数组 (array)：一个数组是一个值(value)的集合，一个数组以[开始，并以]结束。数组成员之间使用,分区。数组成员具体的格式如下：
  - 名称／值（pair）：名称和值之间使用:隔开，一般的形式是：{name:value}

UIPanelType.json: 保存这个工程所有的UI面板类型及其相应的prefab的路径, 此时主要该文件和prefab文件都需要位于Resources文件夹路径下

{
	"infoList":
		[
            {"panelTypeString":"ALERT_PANEL",
            "path":"AlertPanel"},

            {"panelTypeString":"CONNECT_PANEL",
            "path":"ConnectPanel"},

            {"panelTypeString":"HOME_PANEL",
            "path":"HomePanel"},

            {"panelTypeString":"WELCOME_PANEL",
            "path":"WelcomePanel"}	
		]
}

UIPanelType.cs: 保存这个工程所有的UI面板类型

public enum UIPanelType {
    ALERT_PANEL,
    CONNECT_PANEL,
    HOME_PANEL,
    WELCOME_PANEL
}

开发UIManager解析面板信息Json

JsonUtility的使用:

最低0.47元/天解锁文章

200万优质内容无限畅学