Unity 通用UI界面逻辑总结

概述

在游戏开发中，常常会遇到一些通用的界面逻辑，它不论在什么范例的游戏中都会出现。为了避免重复造轮子，本文总结并提供了一些常用UI界面的实现逻辑。希望可以帮助大家快速开发通用界面模块，也可以在次底子上举行扩展修改，以适应你项目标需求。
工程链接：GitCode - 全球开发者的开源社区,开源代码托管平台

二次确认界面

1. using UnityEngine;
2. using UnityEngine.Events;
3. using UnityEngine.UI;
5. public class ConfirmDialog : MonoBehaviour
6. {
7.     private Text txt_title;
8.     private Text txt_content;
9.     private Button btn_Yes;
10.     private Button btn_No;
12.     void Start()
13.     {
14.         var root = gameObject.transform;
15.         txt_title = root.Find("txt_Title").GetComponent<Text>();
16.         txt_content = root.Find("txt_Content").GetComponent<Text>();
17.         btn_Yes = root.Find("btn/btn_Yes").GetComponent<Button>();
18.         btn_No = root.Find("btn/btn_No").GetComponent<Button>();
19.         txt_title.text = "提示";
20.         
21.         //测试代码
22.         InitDialog("好好学习，天天向上！",
23.             () => {Debug.Log("Yes"); },
24.             () => {Debug.Log("No"); });
25.     }
27.     /// <summary>
28.     /// 重载一：使用默认标题 “提示”
29.     /// </summary>
30.     /// <param name="content">需要确认的内容</param>
31.     /// <param name="yesAction">确认按钮回调</param>
32.     /// <param name="noAction">取消按钮回调</param>
33.     public void InitDialog(string content, UnityAction yesAction = null, UnityAction noAction = null)
34.     {
35.         txt_title.text = "提示";
36.         CoreLogic(content, yesAction, noAction);
37.     }
39.     /// <summary>
40.     /// 重载一：使用自定义标题
41.     /// </summary>
42.     /// <param name="title">自定义标题</param>
43.     /// <param name="content">需要确认的内容</param>
44.     /// <param name="yesAction">确认按钮回调</param>
45.     /// <param name="noAction">取消按钮回调</param>
46.     public void InitDialog(string title, string content, UnityAction yesAction = null, UnityAction noAction = null)
47.     {
48.         txt_title.text = title;
49.         CoreLogic(content, yesAction, noAction);
50.     }
52.     //公共逻辑提取
53.     private void CoreLogic(string content, UnityAction yesAction = null, UnityAction noAction = null)
54.     {
55.         txt_content.text = content;
56.         BindBtnLogic(btn_Yes, yesAction);
57.         BindBtnLogic(btn_No, noAction);
58.         btn_Yes.gameObject.SetActive(yesAction != null);
59.         btn_No.gameObject.SetActive(noAction != null);
60.     }
62.     //绑定按钮点击回调
63.     private void BindBtnLogic(Button btn, UnityAction action)
64.     {
65.         btn.onClick.RemoveAllListeners();
66.         if (action != null)
67.         {
68.             btn.onClick.AddListener(action);
69.         }
70.     }
71. }

复制代码

切页标签

通过按钮来实现。固然使用Toggle也可以实现，但是在实际开发中会发现使用toggle不好控制选中变乱的触发和选中状态表现。通过按钮来自定义组件可以更好地控制逻辑的调用和标签的显示。

1. using System.Collections.Generic;
2. using UnityEngine;
3. using UnityEngine.Events;
4. using UnityEngine.UI;
6. class TabNode
7. {
8.     public int index;
9.     public GameObject offBg;
10.     public GameObject onBg;
11.     public Text offTxt;
12.     public Text onTxt;
13.     public Button btn;
14.     public UnityAction callback;
15. }
17. public class SwitchPageTab : MonoBehaviour
18. {
19.     public Transform tabRoot;//标签组的父节点
20.     public GameObject tabObj;//标签页预制体模板
21.     private int _selectIndex;//选中的标签页索引
23.     private List<TabNode> _objList = new List<TabNode>();
24.     private Dictionary<int, UnityAction> _callbackDic = new Dictionary<int, UnityAction>();
25.    
26.     private void Start()
27.     {
28.         _selectIndex = -1;
29.         
30.         InitCount(4);
31.         BindSelectCallback(0, "背包", (() =>
32.         {
33.             Debug.Log("查看背包");
34.         }));
35.         BindSelectCallback(1, "英雄", (() =>
36.         {
37.             Debug.Log("查看英雄");
38.         }));
39.         BindSelectCallback(2, "商店", (() =>
40.         {
41.             Debug.Log("查看商店");
42.         }));
43.         BindSelectCallback(3, "活动", (() =>
44.         {
45.             Debug.Log("查看活动");
46.         }));
47.         
48.         
49.         OnSelectLogic(0);
50.     }
52.     /// <summary>
53.     /// 初始化调用
54.     /// </summary>
55.     /// <param name="count">标签的数量</param>
56.     public void InitCount(int count)
57.     {
58.         _objList.Clear();
59.         ClearAllChild(tabRoot);
60.         for (var i = 0; i < count; i++)
61.         {
62.             var obj = Instantiate(tabObj, tabRoot);
63.             obj.SetActive(true);
64.             var trans = obj.transform;
65.             var node = new TabNode
66.             {
67.                 offTxt = trans.Find("btn/offBg/offTxt").GetComponent<Text>(),
68.                 onTxt = trans.Find("btn/onBg/onTxt").GetComponent<Text>(),
69.                 onBg = trans.Find("btn/onBg").gameObject,
70.                 offBg = trans.Find("btn/offBg").gameObject,
71.                 btn = trans.Find("btn").GetComponent<Button>(),
72.             };
73.             var index = i;
74.             BindBtnLogic(node.btn, () =>
75.             {
76.                 OnSelectLogic(index);
77.             });
78.             _objList.Add(node);
79.         }
80.     }
81.    
82.     /// <summary>
83.     /// 绑定指定页签索引的回调函数
84.     /// </summary>
85.     /// <param name="index">页签索引</param>
86.     /// <param name="txt">页签问本</param>
87.     /// <param name="callback">选中回调</param>
88.     public void BindSelectCallback(int index,string txt,UnityAction callback)
89.     {
90.         if (_callbackDic.ContainsKey(index))
91.         {
92.             Debug.LogError("已经注册过了！");
93.             return;
94.         }
96.         if (callback == null)
97.         {
98.             Debug.LogError("回调为空！");
99.             return;
100.         }
102.         if (index < 0 || index > _objList.Count)
103.         {
104.             Debug.LogError("索引越界！");
105.             return;
106.         }
108.         var node = _objList[index];
109.         node.onTxt.text = txt;
110.         node.offTxt.text = txt;
111.         _callbackDic.Add(index,callback);
112.     }
113.    
114.     /// <summary>
115.     /// 调用指定索引对应的回调函数
116.     /// </summary>
117.     /// <param name="index"></param>
118.     private void OnSelectLogic(int index)
119.     {
120.         if (index == _selectIndex)
121.         {
122.             return;
123.         }
124.         _selectIndex = index;
125.         
126.         var isExist = _callbackDic.TryGetValue(_selectIndex, out UnityAction callback);
127.         if (isExist)
128.         {
129.             callback?.Invoke();
130.             SetSelectStatus(index);
131.         }
132.     }
133.    
134.     /// <summary>
135.     /// 控制指定页签的UI表现
136.     /// </summary>
137.     /// <param name="index"></param>
138.     private void SetSelectStatus(int index)
139.     {
140.         var count = _objList.Count;
141.         for (var i = 0; i < count; i++)
142.         {
143.             var isActive = index == i;
144.             var node = _objList[i];
145.             node.onBg.SetActive(isActive);
146.             node.offBg.SetActive(!isActive);
147.         }
148.     }
149.    
150.     //清除指定父节点下的所有子物体
151.     private void ClearAllChild(Transform parentRoot)
152.     {
153.         var childCount = parentRoot.childCount;
154.         for (var i = childCount - 1; i >= 0; i--)
155.         {
156.             var child = parentRoot.GetChild(i);
157.             DestroyImmediate(child.gameObject);
158.         }
159.     }
161.     //绑定按钮点击回调
162.     private void BindBtnLogic(Button btn, UnityAction action)
163.     {
164.         btn.onClick.RemoveAllListeners();
165.         if (action != null)
166.         {
167.             btn.onClick.AddListener(action);
168.         }
169.     }
170. }

复制代码

飘字提示

简易版本

1. using UnityEngine;
2. using UnityEngine.Pool;
3. using DG.Tweening;
4. using UnityEngine.UI;
6. public class SimpleTip : MonoBehaviour
7. {
8.     //提示栏预制体
9.     public GameObject tipObj;
10.     //提示栏显示的父节点
11.     public Transform tipRoot;
12.     //对象池
13.     private ObjectPool<GameObject> tipPool;
14.     //飞行高度
15.     private float flyHeight = 500;
16.    
17.     void Start()
18.     {
19.         InitTipPool();
20.     }
22.     void Update()
23.     {
24.         if (Input.GetKeyDown(KeyCode.Space))
25.         {
26.             ShowTip("货币不足！");
27.         }
28.     }
30.     void ShowTip(string tipStr)
31.     {
32.         var obj = tipPool.Get();
33.         var rectValue = obj.GetComponent<RectTransform>();
34.         var group = obj.GetComponent<CanvasGroup>();
35.         var txt = obj.transform.Find("txt").GetComponent<Text>();
36.         txt.text = tipStr;
37.         obj.SetActive(true);
38.         group.alpha = 1;
39.         ResetLocal(obj.transform);
40.         rectValue.DOAnchorPosY(flyHeight, 1f).OnComplete(() =>
41.         {
42.             group.DOFade(0, 0.1f).OnComplete(() =>
43.             {
44.                 tipPool.Release(obj);
45.             });
46.         });
47.     }
48.    
49.     //初始化对象池
50.     void InitTipPool()
51.     {
52.         tipPool = new ObjectPool<GameObject>(() =>
53.         {
54.             //创建新对象调用
55.             var obj = Instantiate(tipObj, tipRoot);
56.             obj.SetActive(false);
57.             return obj;
58.         },
59.         (go) =>
60.         {
61.             //获取对象调用
62.             go.SetActive(true);
63.             ResetLocal(go.transform);
64.         },
65.         (go) =>
66.         {
67.             // 在对象放回池子时调用
68.             go.SetActive(false);
69.             ResetLocal(go.transform);
70.             go.transform.SetParent(tipRoot);
71.         },
72.         (go) =>
73.         {
74.             Destroy(go);
75.         });
76.     }
77.    
78.     //重置本地信息
79.     void ResetLocal(Transform trans)
80.     {
81.         trans.localPosition = Vector3.zero;
82.         trans.localEulerAngles = Vector3.zero;
83.         trans.localScale = Vector3.one;
84.     }
85. }

复制代码

升级版本

1. using System.Collections.Generic;
2. using DG.Tweening;
3. using UnityEngine;
4. using UnityEngine.UI;
5. using UnityEngine.Pool;
7. public class GoodTip : MonoBehaviour
8. {
9.     //提示栏显示的父节点
10.     public Transform root;
11.     //提示栏模板预制体
12.     public GameObject tipObj;
13.     //对象池节点
14.     public Transform objectPool;
15.    
16.     //最多显示的提示栏数量，超过就隐藏
17.     private int limitCount = 5;
18.     //提示栏之间的偏移
19.     private float offset = 20;
20.     //提示飞行高度
21.     private float flyHeight = 100;
22.     //提示栏生成数量，只用于逻辑运算
23.     private int tipCount = 0;
24.     //提示栏高度
25.     private float tipHeight;
26.     private Queue<GameObject> visualTipQueue = new Queue<GameObject>();
27.     //是否可继续生成提示栏，防止频繁点击造成异常
28.     private bool isOk = true;
29.     private float timer = 0f;
30.     private bool startTimer = false;
31.     private float displayTime = 0.65f;//提示停留展示时间
32.     private ObjectPool<GameObject> tipPool;
33.    
34.     void Start()
35.     {
36.         var rect = tipObj.GetComponent<RectTransform>();
37.         tipHeight = rect.rect.height;
38.         
39.         InitTipPool();
40.     }
42.     private void Update()
43.     {
44.         if (startTimer)
45.         {
46.             //定时统一清理提示消息
47.             timer += Time.deltaTime;
48.             if (timer > displayTime)
49.             {
50.                 ClearAllMsg();
51.                 timer = 0f;
52.                 startTimer = false;
53.             }
54.         }
56.         if (Input.GetKeyDown(KeyCode.Space))
57.         {
58.             ShowTip("货币不足！");
59.         }
60.     }
61.    
62.     public void ShowTip(string tip)
63.     {
64.         if (!isOk)
65.         {
66.             return;
67.         }
68.         startTimer = false;
69.         isOk = false;
70.         var obj = tipPool.Get();
71.         var rect1 = obj.GetComponent<RectTransform>();
72.         var group = obj.GetComponent<CanvasGroup>();
73.         
74.         var sequence = DOTween.Sequence();
75.         if (visualTipQueue.Count > 0)
76.         {
77.             sequence.AppendCallback(() =>
78.             {
79.                 foreach (var item in visualTipQueue)
80.                 {
81.                     var rectValue = item.GetComponent<RectTransform>();
82.                     rectValue.DOAnchorPosY(rectValue.anchoredPosition.y+tipHeight+offset, 0.2f);
83.                 }
84.             });
85.             sequence.AppendInterval(0.2f);
86.         }
87.         sequence.AppendCallback(() =>
88.         {
89.             group.alpha = 1;
90.             obj.transform.SetParent(root);
91.             obj.transform.localScale = new Vector3(0, 0, 1);
92.             obj.SetActive(true);
93.             rect1.anchoredPosition = Vector2.zero;
94.             visualTipQueue.Enqueue(obj);
95.             
96.             tipCount++;
97.             var txt  = obj.transform.Find("txt").GetComponent<Text>();
98.             txt.text = tip;
99.             
100.             if (tipCount > limitCount)
101.             {
102.                 var result = visualTipQueue.Dequeue();
103.                 tipPool.Release(result);
104.                 tipCount--;
105.             }
106.         });
107.         sequence.Append(obj.transform.DOScale(Vector3.one, 0.1f));
108.         sequence.AppendInterval(0.1f);
109.         sequence.OnComplete(() =>
110.         {
111.             timer = 0f;
112.             isOk = true;
113.             startTimer = true;
114.         });
115.     }
116.    
117.     //初始化对象池
118.     void InitTipPool()
119.     {
120.         tipPool = new ObjectPool<GameObject>(() =>
121.         {
122.             //创建新对象调用
123.             var obj = Instantiate(tipObj, objectPool);
124.             obj.SetActive(false);
125.             return obj;
126.         },
127.         (go) =>
128.         {
129.             //获取对象调用
130.             go.SetActive(true);
131.             ResetLocal(go.transform);
132.         },
133.         (go) =>
134.         {
135.             // 在对象放回池子时调用
136.             go.SetActive(false);
137.             ResetLocal(go.transform);
138.             go.transform.SetParent(objectPool);
139.         },
140.         (go) =>
141.         {
142.             Destroy(go);
143.         });
144.     }
145.    
146.     //重置本地信息
147.     void ResetLocal(Transform trans)
148.     {
149.         trans.localPosition = Vector3.zero;
150.         trans.localEulerAngles = Vector3.zero;
151.         trans.localScale = Vector3.one;
152.     }
153.    
154.     //清空消息
155.     public void ClearAllMsg()
156.     {
157.         var childCount = root.childCount;
158.         for (var i = 0; i < childCount; i++)
159.         {
160.             var child = root.GetChild(i);
161.             var group = child.GetComponent<CanvasGroup>();
162.             var rectValue = child.GetComponent<RectTransform>();
163.             var sequence = DOTween.Sequence();
164.             sequence.AppendInterval(0.1f * i);
165.             sequence.Append(rectValue.DOAnchorPosY(rectValue.anchoredPosition.y + tipHeight+flyHeight, 0.2f));
166.             sequence.Append(group.DOFade(0, 0.1f).OnComplete(() =>
167.             {
168.                 visualTipQueue.Dequeue();
169.                 tipPool.Release(child.gameObject);
170.                 tipCount--;
171.             }));
172.         }
173.     }
174. }

复制代码

                                                                                      
左右切换按钮组

本组件一般出现在查看好汉界面，点击左右两个按钮切换查看按钮的具体信息。在好汉列表中，第一个好汉的左按钮不显示，末了一个好汉的右按钮不显示。

1. using UnityEngine;
2. using UnityEngine.Events;
3. using UnityEngine.UI;
5. public class SwitchCheck : MonoBehaviour
6. {
7.     public Button btn_Left;
8.     public Button btn_Right;
9.     public Text txt_Check;
11.     private int sumCount;
12.     private int curIndex;
13.     private UnityAction<int> callback;//外部逻辑回调
14.    
15.     void Start()
16.     {
17.         curIndex = 0;
18.         InitGroup(10, (index) =>
19.         {
20.             txt_Check.text = $"{index}/{sumCount}";
21.         });
22.         CheckBtnActive();
23.         BindBtnLogic(btn_Left, () =>
24.         {
25.             var nextIndex = curIndex - 1;
26.             if (nextIndex < 0)
27.             {
28.                 return;
29.             }
30.             curIndex = nextIndex;
31.             CheckBtnActive();
32.         });
33.         
34.         BindBtnLogic(btn_Right, () =>
35.         {
36.             var nextIndex = curIndex + 1;
37.             if (nextIndex >= sumCount)
38.             {
39.                 return;
40.             }
41.             curIndex = nextIndex;
42.             CheckBtnActive();
43.         });
44.     }
45.    
46.     public void InitGroup(int _sumCount,UnityAction<int> _callback)
47.     {
48.         sumCount = _sumCount;
49.         callback = _callback;
50.     }
51.    
52.     //按钮显隐逻辑
53.     private void CheckBtnActive()
54.     {
55.         if (sumCount <= 1)
56.         {
57.             btn_Left.gameObject.SetActive(false);
58.             btn_Right.gameObject.SetActive(false);
59.         }
60.         else
61.         {
62.             btn_Left.gameObject.SetActive(curIndex >= 1);
63.             btn_Right.gameObject.SetActive(curIndex <= sumCount-2);
64.         }
66.         var showIndex = curIndex + 1;
67.         callback?.Invoke(showIndex);
68.     }
69.    
70.     //绑定按钮点击回调
71.     private void BindBtnLogic(Button btn, UnityAction action)
72.     {
73.         btn.onClick.RemoveAllListeners();
74.         if (action != null)
75.         {
76.             btn.onClick.AddListener(action);
77.         }
78.     }
79. }

复制代码

帮助说明界面

1. using System.Text;
2. using UnityEngine;
3. using UnityEngine.UI;
5. public class ComDesc : MonoBehaviour
6. {
7.     public Text txt_Title;
8.     public Text txt_Desc;
9.     public RectTransform content;
11.     void Update()
12.     {
13.         if (Input.GetKeyDown(KeyCode.Space))
14.         {
15.             SetDesc("帮助", "好好学习,天天向上");
16.         }
17.             
18.         if (Input.GetKeyDown(KeyCode.A))
19.         {
20.             var str = "好好学习,天天向上";
21.             StringBuilder sb = new StringBuilder();
22.             for (var i = 1; i < 100; i++)
23.             {
24.                 sb.Append(str);
25.             }
26.             SetDesc("帮助", sb.ToString());
27.         }
28.     }
30.     /// <summary>
31.     /// 设置说明描述
32.     /// </summary>
33.     /// <param name="title">界面标题</param>
34.     /// <param name="desc">说明文本</param>
35.     public void SetDesc(string title,string desc)
36.     {
37.         txt_Title.text = title;
38.         txt_Desc.text = desc;
39.         LayoutRebuilder.ForceRebuildLayoutImmediate(content);
40.     }
41. }

复制代码

跑马灯消息提示

有消息队列缓存，等待队列中所有消息播放完后，提示才消失。

1. using System.Collections.Generic;
2. using DG.Tweening;
3. using UnityEngine;
4. using TMPro;
5. using UnityEngine.Events;
6. using UnityEngine.UI;
8. public class Marquee : MonoBehaviour
9. {
10.     public TMP_Text tmpTxt;
11.     public RectTransform maskNode;
12.     public CanvasGroup canvasGroup;
13.     private float maskWidth;
14.     private float unitTime = 0.2f;//计算动画时间自定义标准
15.     private Queue<MsgNode> marqueeMsg = new Queue<MsgNode>();
16.     private List<int> idList = new List<int>();
17.     private bool isPlay;//是否正在播放消息
18.    
19.     private class MsgNode
20.     {
21.         public int id;
22.         public string msg;
23.         public int loopCount;
24.     }
25.    
26.     void Start()
27.     {
28.         maskWidth = maskNode.rect.width;
29.     }
31.     // Update is called once per frame
32.     void Update()
33.     {
34.         if (Input.GetKeyDown(KeyCode.Space))
35.         {
36.             var id = Random.Range(1,100);
37.             var str = $"id:{id}好好学习，天天向上>>";
38.             AddMarqueeMsg(id,str,1);
39.         }
40.         
41.         if(marqueeMsg.Count > 0) {
42.             if (!isPlay)
43.             {
44.                 isPlay = true;
45.                 tmpTxt.rectTransform.anchoredPosition = Vector2.zero;
46.                 var data = marqueeMsg.Peek();
47.                 idList.Remove(data.id);
48.                 DisplayMarqueeMsg(data.msg,data.loopCount, () =>
49.                 {
50.                     marqueeMsg.Dequeue();
51.                     if (marqueeMsg.Count == 0)
52.                     {
53.                         canvasGroup.alpha = 0;
54.                     }
55.                     isPlay = false;
56.                 });
57.             }
58.         }
59.     }
61.     /// <summary>
62.     /// 在跑马灯消息队列中添加消息
63.     /// </summary>
64.     /// <param name="msgId">消息记录的唯一id</param>
65.     /// <param name="msg">消息内容</param>
66.     /// <param name="loopCount">循环播放时间</param>
67.     public void AddMarqueeMsg(int msgId, string msg, int loopCount)
68.     {
69.         if (idList.Contains(msgId))
70.         {
71.             Debug.LogError("消息已在预播队列");
72.             return;
73.         }
74.         
75.         if (canvasGroup.alpha < 0.95f)
76.         {
77.             canvasGroup.alpha = 1;
78.         }
79.         
80.         idList.Add(msgId);
81.         marqueeMsg.Enqueue(new MsgNode
82.         {
83.             id = msgId,
84.             msg = msg,
85.             loopCount = loopCount
86.         });
87.     }
88.    
89.     /// <summary>
90.     /// 跑马灯消息播放
91.     /// </summary>
92.     /// <param name="msgId">消息记录的唯一id</param>
93.     /// <param name="msg">消息内容</param>
94.     /// <param name="loopCount">循环播放时间</param>
95.     public void DisplayMarqueeMsg(string msg,int loopCount,UnityAction callback)
96.     {
97.         tmpTxt.text = msg;
98.         LayoutRebuilder.ForceRebuildLayoutImmediate(tmpTxt.rectTransform);
99.         var width = tmpTxt.rectTransform.rect.width+maskWidth;
100.         var duration = GetDuration(width);
101.         tmpTxt.rectTransform.DOAnchorPosX(-width, duration)
102.             .SetEase(Ease.Linear)
103.             .SetLoops(loopCount, LoopType.Restart)
104.             .OnComplete(() =>
105.             {
106.                 callback?.Invoke();
107.             });
108.     }
110.     //根据消息长度计算动画匀速运行时间
111.     private float GetDuration(float width)
112.     {
113.         var offset1 = (int)width / 100;
114.         var offset2 = width % 100 == 0 ?0:1;
115.         var offset = offset1 + offset2;
116.         return offset * unitTime;
117.     }
118. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。