基于Unity~UGUI的简单UI框架（附UIFramework源码）

最新推荐文章于 2024-09-28 07:27:22 发布

鱼儿-1226

最新推荐文章于 2024-09-28 07:27:22 发布

阅读量1.5k

点赞数 1

分类专栏： unity3d 文章标签： ui unity c#

原文链接：https://blog.csdn.net/qq_34937637/article/details/80374387

版权

unity3d 专栏收录该内容

275 篇文章 34 订阅

订阅专栏

文章目录
不使用UI框架存在的一些问题
UI框架总揽：
创建测试面板（非框架部分）
创建json文件和UIPanelType类来保存所有的面板信息
开发UIManger来解析面板信息json文件（框架核心：UIManager）
开发BasePanel抽象类（各个UIPanel的基类）
对UI面板Prefab实例化的创建与管理
开发界面存储栈，并进行出栈和入栈操作
控制Panel之间的跳转（非框架部分）
UI框架（完结）
赞赏与支持

框架源码地址： UIFramework
litjson.dll下载地址： litjson
不使用UI框架存在的一些问题
1.随着游戏系统的复杂，UI控件越来越多，各个UI直接的通讯，以及UI与GameObject之间的通讯形成一张复杂的蜘蛛网，
拖着拖着，有时候我都忘了哪个对象跟哪个对象关联了。如果是别人要看我的程序，我估计他找半天都找不到UI逻辑的入口。
2.耦合性非常严重，如果要改变需求，更改某个UI或者更改某个游戏对象，那么你需要再手动全部与该对象关联的物件重新更改一次。
3.作为强迫症的程序员，最受不了程序代码的混乱。这种组织方式十分“不优雅”，看着很乱。
鉴于以上各种情况，我们需要寻找一种新的，科学的，高效的UI管理方式

UI框架总揽：

创建测试面板（非框架部分）
将面板以Prefab形式放入Resources文件夹下面，便于框架加载面板

创建json文件和UIPanelType类来保存所有的面板信息
UIPanelType.json：

{
   "panelInfoList":
   [
       {"panelType":"MainMenu","path":"UIPanel/MainMenuPanel"},
       {"panelType":"ItemMessage","path":"UIPanel/ItemMessagePanel"},
       {"panelType":"Knapsack","path":"UIPanel/KnapsackPanel"},
       {"panelType":"Shop","path":"UIPanel/ShopPanel"},
       {"panelType":"Skill","path":"UIPanel/SkillPanel"},
       {"panelType":"System","path":"UIPanel/SystemPanel"},
       {"panelType":"Task","path":"UIPanel/TaskPanel"}
   ]
}
1
2
3
4
5
6
7
8
9
10
11
12
UIPanelType.cs：

public class UIPanelType {
public const string MainMenu = "MainMenu";
public const string Knapsack = "Knapsack";
public const string ItemMessage = "ItemMessage";
public const string Shop = "Shop";
public const string Skill = "Skill";
public const string System = "System";
public const string Task = "Task";
}

1
2
3
4
5
6
7
8
9
10
开发UIManger来解析面板信息json文件（框架核心：UIManager）
UIManager为框架的核心，全局只有一个UIManager，因此UIManager要使用单例模式
现阶段的完整的UIManager.cs（后续还会继续完善）：

using System.Collections.Generic;
using System.Collections;
using System;
using UnityEngine;
using LitJson;
public class UIPanelManager
{
private static UIPanelManager _instance;

public static UIPanelManager Instance
{
get
{
if (_instance == null)
{
_instance = new UIPanelManager();
}
return _instance;
}
}

private Dictionary<string, string> panelPathDict;
//private Dictionary<UIPanelType,>
//private Stack<>

private UIPanelManager()
{
ParseUIPanelTypeJson();
}

private void ParseUIPanelTypeJson()
{
panelPathDict = new Dictionary<string, string>();
TextAsset textUIPanelType = Resources.Load<TextAsset>("UIPanelTypeJson");
UIPanelInfoList panelInfoList = JsonMapper.ToObject<UIPanelInfoList>(textUIPanelType.text);

foreach (UIPanelInfo panelInfo in panelInfoList.panelInfoList)
{
panelPathDict.Add(panelInfo.panelType, panelInfo.path);
Debug.Log(panelInfo.panelType + ":" + panelInfo.path);
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
开发BasePanel抽象类（各个UIPanel的基类）
BasePanel给每个Panel定义了四个事件：
OnEnter：面板进入时调用
OnPause：面板停止时调用（鼠标与面板的交互停止）
OnResume：面板恢复使用时调用（鼠标与面板的交互恢复）
OnExit：面板退出时调用

using UnityEngine;

public abstract class BasePanel : MonoBehaviour
{
public abstract void OnEnter();

public abstract void OnPause();

public abstract void OnResume();

public abstract void OnExit();

}
1
2
3
4
5
6
7
8
9
10
11
12
13
给各个面板添加UIPanel类（非框架部分）

using UnityEngine;

public class MainMenuPanel : BasePanel
{

public override void OnEnter()
{
}

public override void OnPause()
{
}

public override void OnResume()
{
}

public override void OnExit()
{
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
对UI面板Prefab实例化的创建与管理
获取Panel（如果panel没有被实例化，进行实例化，并且存储到已经实例化好的panel字典中）

private BasePanel GetPanel(string panelType)
{
BasePanel panel = panelDict.GetValue(panelType);

//如果没有实例化面板，寻找路径进行实例化，并且存储到已经实例化好的字典面板中
if (panel == null)
{
string path = panelPathDict.GetValue(panelType);
Transform panelTransform = GameObject.Instantiate(Resources.Load<GameObject>(path), canvasTransform).transform;
panel = panelTransform.GetComponent<BasePanel>();
panelDict.Add(panelType, panel);
}
return panel;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
字典的扩展：

using System.Collections.Generic;

public static class DictTool
{
public static Tvalue GetValue<Tkey, Tvalue>(this Dictionary<Tkey, Tvalue> dict, Tkey key)
{
Tvalue value = default(Tvalue);
dict.TryGetValue(key, out value);
return value;
}
}

1
2
3
4
5
6
7
8
9
10
11
12
现阶段的完整的UIManager.cs（后续还会继续完善）：

using System.Collections.Generic;
using System.Collections;
using System;
using UnityEngine;
using LitJson;
public class UIPanelManager
{
private static UIPanelManager _instance;
private Transform canvasTransform;
private Transform CanvasTransform
{
get
{
if (canvasTransform == null)
{
canvasTransform = GameObject.Find("Canvas").transform;
}
return canvasTransform;
}
}
public static UIPanelManager Instance
{
get
{
if (_instance == null)
{
_instance = new UIPanelManager();
}

return _instance;
}
}

private Dictionary<string, string> panelPathDict;
private Dictionary<string, BasePanel> panelDict;
//private Stack<>

private UIPanelManager()
{
ParseUIPanelTypeJson();
}

private BasePanel GetPanel(string panelType)
{

if (panelDict == null)
{
panelDict = new Dictionary<string, BasePanel>();
}

BasePanel panel = panelDict.GetValue(panelType);

//如果没有实例化面板，寻找路径进行实例化，并且存储到已经实例化好的字典面板中
if (panel == null)
{
string path = panelPathDict.GetValue(panelType);
GameObject panelGo = GameObject.Instantiate(Resources.Load<GameObject>(path), CanvasTransform, false);
panel = panelGo.GetComponent<BasePanel>();
panelDict.Add(panelType, panel);
}
return panel;
}

//解析json文件
private void ParseUIPanelTypeJson()
{
panelPathDict = new Dictionary<string, string>();
TextAsset textUIPanelType = Resources.Load<TextAsset>("UIPanelTypeJson");
UIPanelInfoList panelInfoList = JsonMapper.ToObject<UIPanelInfoList>(textUIPanelType.text);

foreach (UIPanelInfo panelInfo in panelInfoList.panelInfoList)
{
panelPathDict.Add(panelInfo.panelType, panelInfo.path);
//Debug.Log(panelInfo.panelType + ":" + panelInfo.path);
}
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
开发界面存储栈，并进行出栈和入栈操作
【设计理念】
1.鼠标只允许和一个界面进行交互，当一个界面显示后，上一个界面要停止和鼠标的交互
2.界面显示，进行入栈操作（Push，OnEnter），停止上一个界面（OnPause）
3.界面隐藏，进行出栈操作（Pop，OnExit），恢复上一个界面（OnResume）

private Stack<BasePanel> panelStack;
public void PushPanel(string panelType)
{
if (panelStack == null)
{
panelStack = new Stack<BasePanel>();
}

//停止上一个界面
if (panelStack.Count > 0)
{
BasePanel topPanel = panelStack.Peek();
topPanel.OnPause();
}

BasePanel panel = GetPanel(panelType);
panelStack.Push(panel);
panel.OnEnter();
}

public void PopPanel()
{
if (panelStack == null)
{
panelStack = new Stack<BasePanel>();
}
if (panelStack.Count <= 0)
{
return;
}

//退出栈顶面板
BasePanel topPanel = panelStack.Pop();
topPanel.OnExit();

//恢复上一个面板
if (panelStack.Count > 0)
{
BasePanel panel = panelStack.Peek();
panel.OnResume();
}

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
控制Panel之间的跳转（非框架部分）
完善面板中的一些操作，实现面板之间的跳转，此部分不是框架部分，省略！
MainMenuPanel.cs：

using UnityEngine;
using UnityEngine.UI;

public class MainMenuPanel : BasePanel
{
private Button TaskButton;
private Button KnapsackButton;
private Button SkillButton;
private Button ShopButton;
private Button SystemButton;
private CanvasGroup canvasGroup;
void Awake()
{
TaskButton = transform.Find("IconPanel/TaskButton").GetComponent<Button>();
KnapsackButton = transform.Find("IconPanel/KnapsackButton").GetComponent<Button>();
SkillButton = transform.Find("IconPanel/SkillButton").GetComponent<Button>();
ShopButton = transform.Find("IconPanel/ShopButton").GetComponent<Button>();
SystemButton = transform.Find("IconPanel/SystemButton").GetComponent<Button>();
canvasGroup = transform.GetComponent<CanvasGroup>();

TaskButton.onClick.AddListener(OnTaskButtonClick);
KnapsackButton.onClick.AddListener(OnKnapsackButtonClick);
SkillButton.onClick.AddListener(OnSkillButtonClick);
ShopButton.onClick.AddListener(OnShopButtonClick);
SystemButton.onClick.AddListener(OnSystemButtonClick);
}

void OnDestory()
{
TaskButton.onClick.RemoveListener(OnTaskButtonClick);
KnapsackButton.onClick.RemoveListener(OnKnapsackButtonClick);
SkillButton.onClick.RemoveListener(OnSkillButtonClick);
ShopButton.onClick.RemoveListener(OnShopButtonClick);
SystemButton.onClick.RemoveListener(OnSystemButtonClick);
}
public override void OnEnter()
{
}

public override void OnPause()
{
canvasGroup.blocksRaycasts = false;
}

public override void OnResume()
{
canvasGroup.blocksRaycasts = true;
}

public override void OnExit()
{
}

private void OnTaskButtonClick()
{
UIPanelManager.Instance.PushPanel(UIPanelType.Task);
}
private void OnKnapsackButtonClick()
{
UIPanelManager.Instance.PushPanel(UIPanelType.Knapsack);
}
private void OnSkillButtonClick()
{
UIPanelManager.Instance.PushPanel(UIPanelType.Skill);
}
private void OnShopButtonClick()
{
UIPanelManager.Instance.PushPanel(UIPanelType.Shop);
}
private void OnSystemButtonClick()
{
UIPanelManager.Instance.PushPanel(UIPanelType.System);
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
UI框架（完结）

【BasePanel（基类）：所有面板继承自BasePanel】
定义了四个事件：
OnEnter：面板进入时调用
OnPause：面板停止时调用（鼠标与面板的交互停止）
OnResume：面板恢复使用时调用（鼠标与面板的交互恢复）
OnExit：面板退出时调用

using UnityEngine;

public abstract class BasePanel : MonoBehaviour
{
public abstract void OnEnter();
public abstract void OnPause();
public abstract void OnResume();
public abstract void OnExit();

}

1
2
3
4
5
6
7
8
9
10
11
【GameRoot】
实例化游戏中的主面板

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

public class GameRoot : MonoBehaviour {
void Start () {
UIPanelManager panelManager = UIPanelManager.Instance;
panelManager.PushPanel(UIPanelType.MainMenu);
}
}

1
2
3
4
5
6
7
8
9
10
11
12
【UIPanelManager（框架的核心，单例）】
进行解析面板信息json文件，实例化面板Prefab，面板的入栈和出栈等等一系列操作

return _instance;
}
}

private Dictionary<string, string> panelPathDict;
private Dictionary<string, BasePanel> panelDict;
private Stack<BasePanel> panelStack;

private UIPanelManager()
{
ParseUIPanelTypeJson();
}

public void PushPanel(string panelType)
{
if (panelStack == null)
{
panelStack = new Stack<BasePanel>();
}

//停止上一个界面
if (panelStack.Count > 0)
{
BasePanel topPanel = panelStack.Peek();
topPanel.OnPause();
}

BasePanel panel = GetPanel(panelType);
panelStack.Push(panel);
panel.OnEnter();
}

public void PopPanel()
{
if (panelStack == null)
{
panelStack = new Stack<BasePanel>();
}
if (panelStack.Count <= 0)
{
return;
}

//退出栈顶面板
BasePanel topPanel = panelStack.Pop();
topPanel.OnExit();

//恢复上一个面板
if (panelStack.Count > 0)
{
BasePanel panel = panelStack.Peek();
panel.OnResume();
}

}

private BasePanel GetPanel(string panelType)
{

if (panelDict == null)
{
panelDict = new Dictionary<string, BasePanel>();
}

BasePanel panel = panelDict.GetValue(panelType);

foreach (UIPanelInfo panelInfo in panelInfoList.panelInfoList)
{
panelPathDict.Add(panelInfo.panelType, panelInfo.path);
//Debug.Log(panelInfo.panelType + ":" + panelInfo.path);
}
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
【litjson】
json文件解析的工具