Unity 通用UI界面逻辑总结

概述

在游戏开发中，常常会遇到一些通用的界面逻辑，它不论在什么类型的游戏中都会出现。为了避免重复造轮子，本文总结并提供了一些常用UI界面的实现逻辑。希望可以帮助大家快速开发通用界面模块，也可以在次基础上进行扩展修改，以适应你项目的需求。

工程链接：GitCode - 全球开发者的开源社区,开源代码托管平台

二次确认界面

using UnityEngine;
using UnityEngine.Events;
using UnityEngine.UI;public class ConfirmDialog : MonoBehaviour
{private Text txt_title;private Text txt_content;private Button btn_Yes;private Button btn_No;void Start(){var root = gameObject.transform;txt_title = root.Find("txt_Title").GetComponent<Text>();txt_content = root.Find("txt_Content").GetComponent<Text>();btn_Yes = root.Find("btn/btn_Yes").GetComponent<Button>();btn_No = root.Find("btn/btn_No").GetComponent<Button>();txt_title.text = "提示";//测试代码InitDialog("好好学习，天天向上！", () => {Debug.Log("Yes"); },() => {Debug.Log("No"); });}/// <summary>/// 重载一：使用默认标题 “提示”/// </summary>/// <param name="content">需要确认的内容</param>/// <param name="yesAction">确认按钮回调</param>/// <param name="noAction">取消按钮回调</param>public void InitDialog(string content, UnityAction yesAction = null, UnityAction noAction = null){txt_title.text = "提示";CoreLogic(content, yesAction, noAction);}/// <summary>/// 重载一：使用自定义标题/// </summary>/// <param name="title">自定义标题</param>/// <param name="content">需要确认的内容</param>/// <param name="yesAction">确认按钮回调</param>/// <param name="noAction">取消按钮回调</param>public void InitDialog(string title, string content, UnityAction yesAction = null, UnityAction noAction = null){txt_title.text = title;CoreLogic(content, yesAction, noAction);}//公共逻辑提取private void CoreLogic(string content, UnityAction yesAction = null, UnityAction noAction = null){txt_content.text = content;BindBtnLogic(btn_Yes, yesAction);BindBtnLogic(btn_No, noAction);btn_Yes.gameObject.SetActive(yesAction != null);btn_No.gameObject.SetActive(noAction != null);}//绑定按钮点击回调private void BindBtnLogic(Button btn, UnityAction action){btn.onClick.RemoveAllListeners();if (action != null){btn.onClick.AddListener(action);}}
}

切页标签

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

using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Events;
using UnityEngine.UI;class TabNode
{ public int index;public GameObject offBg;public GameObject onBg;public Text offTxt;public Text onTxt;public Button btn;public UnityAction callback;
}public class SwitchPageTab : MonoBehaviour
{public Transform tabRoot;//标签组的父节点public GameObject tabObj;//标签页预制体模板private int _selectIndex;//选中的标签页索引private List<TabNode> _objList = new List<TabNode>();private Dictionary<int, UnityAction> _callbackDic = new Dictionary<int, UnityAction>();private void Start(){_selectIndex = -1;InitCount(4);BindSelectCallback(0, "背包", (() =>{Debug.Log("查看背包");}));BindSelectCallback(1, "英雄", (() =>{Debug.Log("查看英雄");}));BindSelectCallback(2, "商店", (() =>{Debug.Log("查看商店");}));BindSelectCallback(3, "活动", (() =>{Debug.Log("查看活动");}));OnSelectLogic(0);}/// <summary>/// 初始化调用/// </summary>/// <param name="count">标签的数量</param>public void InitCount(int count){_objList.Clear();ClearAllChild(tabRoot);for (var i = 0; i < count; i++){var obj = Instantiate(tabObj, tabRoot);obj.SetActive(true);var trans = obj.transform;var node = new TabNode{offTxt = trans.Find("btn/offBg/offTxt").GetComponent<Text>(),onTxt = trans.Find("btn/onBg/onTxt").GetComponent<Text>(),onBg = trans.Find("btn/onBg").gameObject,offBg = trans.Find("btn/offBg").gameObject,btn = trans.Find("btn").GetComponent<Button>(),};var index = i;BindBtnLogic(node.btn, () =>{OnSelectLogic(index);});_objList.Add(node);}}/// <summary>/// 绑定指定页签索引的回调函数/// </summary>/// <param name="index">页签索引</param>/// <param name="txt">页签问本</param>/// <param name="callback">选中回调</param>public void BindSelectCallback(int index,string txt,UnityAction callback){if (_callbackDic.ContainsKey(index)){Debug.LogError("已经注册过了！");return;}if (callback == null){Debug.LogError("回调为空！");return;}if (index < 0 || index > _objList.Count){Debug.LogError("索引越界！");return;}var node = _objList[index];node.onTxt.text = txt;node.offTxt.text = txt;_callbackDic.Add(index,callback);}/// <summary>/// 调用指定索引对应的回调函数/// </summary>/// <param name="index"></param>private void OnSelectLogic(int index){if (index == _selectIndex){return;}_selectIndex = index;var isExist = _callbackDic.TryGetValue(_selectIndex, out UnityAction callback);if (isExist){callback?.Invoke();SetSelectStatus(index);}}/// <summary>/// 控制指定页签的UI表现/// </summary>/// <param name="index"></param>private void SetSelectStatus(int index){var count = _objList.Count;for (var i = 0; i < count; i++){var isActive = index == i;var node = _objList[i];node.onBg.SetActive(isActive);node.offBg.SetActive(!isActive);}}//清除指定父节点下的所有子物体private void ClearAllChild(Transform parentRoot){var childCount = parentRoot.childCount;for (var i = childCount - 1; i >= 0; i--){var child = parentRoot.GetChild(i);DestroyImmediate(child.gameObject);}}//绑定按钮点击回调private void BindBtnLogic(Button btn, UnityAction action){btn.onClick.RemoveAllListeners();if (action != null){btn.onClick.AddListener(action);}}
}

飘字提示

简易版本

using UnityEngine;
using UnityEngine.Pool;
using DG.Tweening;
using UnityEngine.UI;public class SimpleTip : MonoBehaviour
{//提示栏预制体public GameObject tipObj;//提示栏显示的父节点public Transform tipRoot;//对象池private ObjectPool<GameObject> tipPool;//飞行高度private float flyHeight = 500;void Start(){InitTipPool();}void Update(){if (Input.GetKeyDown(KeyCode.Space)){ShowTip("货币不足！");}}void ShowTip(string tipStr){var obj = tipPool.Get();var rectValue = obj.GetComponent<RectTransform>();var group = obj.GetComponent<CanvasGroup>();var txt = obj.transform.Find("txt").GetComponent<Text>();txt.text = tipStr;obj.SetActive(true);group.alpha = 1;ResetLocal(obj.transform);rectValue.DOAnchorPosY(flyHeight, 1f).OnComplete(() =>{group.DOFade(0, 0.1f).OnComplete(() =>{tipPool.Release(obj);});});}//初始化对象池void InitTipPool(){tipPool = new ObjectPool<GameObject>(() =>{//创建新对象调用var obj = Instantiate(tipObj, tipRoot);obj.SetActive(false);return obj;},(go) =>{//获取对象调用go.SetActive(true);ResetLocal(go.transform);},(go) =>{// 在对象放回池子时调用go.SetActive(false);ResetLocal(go.transform);go.transform.SetParent(tipRoot);},(go) =>{Destroy(go); });}//重置本地信息void ResetLocal(Transform trans){trans.localPosition = Vector3.zero;trans.localEulerAngles = Vector3.zero;trans.localScale = Vector3.one;}
}

升级版本

using System.Collections.Generic;
using DG.Tweening;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.Pool;public class GoodTip : MonoBehaviour
{//提示栏显示的父节点public Transform root;//提示栏模板预制体public GameObject tipObj;//对象池节点public Transform objectPool;//最多显示的提示栏数量，超过就隐藏private int limitCount = 5;//提示栏之间的偏移private float offset = 20;//提示飞行高度private float flyHeight = 100;//提示栏生成数量，只用于逻辑运算private int tipCount = 0;//提示栏高度private float tipHeight;private Queue<GameObject> visualTipQueue = new Queue<GameObject>();//是否可继续生成提示栏，防止频繁点击造成异常private bool isOk = true;private float timer = 0f;private bool startTimer = false;private float displayTime = 0.65f;//提示停留展示时间private ObjectPool<GameObject> tipPool;void Start(){var rect = tipObj.GetComponent<RectTransform>();tipHeight = rect.rect.height;InitTipPool();}private void Update(){if (startTimer){//定时统一清理提示消息timer += Time.deltaTime;if (timer > displayTime){ClearAllMsg();timer = 0f;startTimer = false;}}if (Input.GetKeyDown(KeyCode.Space)){ShowTip("货币不足！");}}public void ShowTip(string tip){if (!isOk){return;}startTimer = false;isOk = false;var obj = tipPool.Get();var rect1 = obj.GetComponent<RectTransform>();var group = obj.GetComponent<CanvasGroup>();var sequence = DOTween.Sequence();if (visualTipQueue.Count > 0){sequence.AppendCallback(() =>{foreach (var item in visualTipQueue){var rectValue = item.GetComponent<RectTransform>();rectValue.DOAnchorPosY(rectValue.anchoredPosition.y+tipHeight+offset, 0.2f);}});sequence.AppendInterval(0.2f);}sequence.AppendCallback(() =>{group.alpha = 1;obj.transform.SetParent(root);obj.transform.localScale = new Vector3(0, 0, 1);obj.SetActive(true);rect1.anchoredPosition = Vector2.zero;visualTipQueue.Enqueue(obj);tipCount++;var txt  = obj.transform.Find("txt").GetComponent<Text>();txt.text = tip;if (tipCount > limitCount){var result = visualTipQueue.Dequeue();tipPool.Release(result);tipCount--;}});sequence.Append(obj.transform.DOScale(Vector3.one, 0.1f));sequence.AppendInterval(0.1f);sequence.OnComplete(() =>{timer = 0f;isOk = true;startTimer = true;});}//初始化对象池void InitTipPool(){tipPool = new ObjectPool<GameObject>(() =>{//创建新对象调用var obj = Instantiate(tipObj, objectPool);obj.SetActive(false);return obj;},(go) =>{//获取对象调用go.SetActive(true);ResetLocal(go.transform);},(go) =>{// 在对象放回池子时调用go.SetActive(false);ResetLocal(go.transform);go.transform.SetParent(objectPool);},(go) =>{Destroy(go); });}//重置本地信息void ResetLocal(Transform trans){trans.localPosition = Vector3.zero;trans.localEulerAngles = Vector3.zero;trans.localScale = Vector3.one;}//清空消息public void ClearAllMsg(){var childCount = root.childCount;for (var i = 0; i < childCount; i++){var child = root.GetChild(i);var group = child.GetComponent<CanvasGroup>();var rectValue = child.GetComponent<RectTransform>();var sequence = DOTween.Sequence();sequence.AppendInterval(0.1f * i);sequence.Append(rectValue.DOAnchorPosY(rectValue.anchoredPosition.y + tipHeight+flyHeight, 0.2f));sequence.Append(group.DOFade(0, 0.1f).OnComplete(() =>{visualTipQueue.Dequeue();tipPool.Release(child.gameObject);tipCount--;}));}}
}

左右切换按钮组

本组件一般出现在查看英雄界面，点击左右两个按钮切换查看按钮的详细信息。在英雄列表中，第一个英雄的左按钮不显示，最后一个英雄的右按钮不显示。

using UnityEngine;
using UnityEngine.Events;
using UnityEngine.UI;public class SwitchCheck : MonoBehaviour
{public Button btn_Left;public Button btn_Right;public Text txt_Check;private int sumCount;private int curIndex;private UnityAction<int> callback;//外部逻辑回调void Start(){curIndex = 0;InitGroup(10, (index) =>{txt_Check.text = $"{index}/{sumCount}";});CheckBtnActive();BindBtnLogic(btn_Left, () =>{var nextIndex = curIndex - 1;if (nextIndex < 0){return;}curIndex = nextIndex;CheckBtnActive();});BindBtnLogic(btn_Right, () =>{var nextIndex = curIndex + 1;if (nextIndex >= sumCount){return;}curIndex = nextIndex;CheckBtnActive();});}public void InitGroup(int _sumCount,UnityAction<int> _callback){sumCount = _sumCount;callback = _callback;}//按钮显隐逻辑private void CheckBtnActive(){if (sumCount <= 1){btn_Left.gameObject.SetActive(false);btn_Right.gameObject.SetActive(false);}else{btn_Left.gameObject.SetActive(curIndex >= 1);btn_Right.gameObject.SetActive(curIndex <= sumCount-2);}var showIndex = curIndex + 1;callback?.Invoke(showIndex);}//绑定按钮点击回调private void BindBtnLogic(Button btn, UnityAction action){btn.onClick.RemoveAllListeners();if (action != null){btn.onClick.AddListener(action);}}
}

帮助说明界面

using System.Text;
using UnityEngine;
using UnityEngine.UI;public class ComDesc : MonoBehaviour
{public Text txt_Title;public Text txt_Desc;public RectTransform content;void Update(){if (Input.GetKeyDown(KeyCode.Space)){SetDesc("帮助", "好好学习,天天向上");}if (Input.GetKeyDown(KeyCode.A)){var str = "好好学习,天天向上";StringBuilder sb = new StringBuilder();for (var i = 1; i < 100; i++){sb.Append(str);}SetDesc("帮助", sb.ToString());}}/// <summary>/// 设置说明描述/// </summary>/// <param name="title">界面标题</param>/// <param name="desc">说明文本</param>public void SetDesc(string title,string desc){txt_Title.text = title;txt_Desc.text = desc;LayoutRebuilder.ForceRebuildLayoutImmediate(content);}
}

跑马灯消息提示

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

using System.Collections.Generic;
using DG.Tweening;
using UnityEngine;
using TMPro;
using UnityEngine.Events;
using UnityEngine.UI;public class Marquee : MonoBehaviour
{public TMP_Text tmpTxt;public RectTransform maskNode;public CanvasGroup canvasGroup;private float maskWidth;private float unitTime = 0.2f;//计算动画时间自定义标准private Queue<MsgNode> marqueeMsg = new Queue<MsgNode>();private List<int> idList = new List<int>();private bool isPlay;//是否正在播放消息private class MsgNode{public int id;public string msg;public int loopCount;}void Start(){maskWidth = maskNode.rect.width;}// Update is called once per framevoid Update(){if (Input.GetKeyDown(KeyCode.Space)){var id = Random.Range(1,100);var str = $"id:{id}好好学习，天天向上>>";AddMarqueeMsg(id,str,1);}if(marqueeMsg.Count > 0) {if (!isPlay){isPlay = true;tmpTxt.rectTransform.anchoredPosition = Vector2.zero;var data = marqueeMsg.Peek();idList.Remove(data.id);DisplayMarqueeMsg(data.msg,data.loopCount, () =>{marqueeMsg.Dequeue();if (marqueeMsg.Count == 0){canvasGroup.alpha = 0;}isPlay = false;});}}}/// <summary>/// 在跑马灯消息队列中添加消息/// </summary>/// <param name="msgId">消息记录的唯一id</param>/// <param name="msg">消息内容</param>/// <param name="loopCount">循环播放时间</param>public void AddMarqueeMsg(int msgId, string msg, int loopCount){if (idList.Contains(msgId)){Debug.LogError("消息已在预播队列");return;}if (canvasGroup.alpha < 0.95f){canvasGroup.alpha = 1;}idList.Add(msgId);marqueeMsg.Enqueue(new MsgNode{id = msgId,msg = msg,loopCount = loopCount});}/// <summary>/// 跑马灯消息播放/// </summary>/// <param name="msgId">消息记录的唯一id</param>/// <param name="msg">消息内容</param>/// <param name="loopCount">循环播放时间</param>public void DisplayMarqueeMsg(string msg,int loopCount,UnityAction callback){tmpTxt.text = msg;LayoutRebuilder.ForceRebuildLayoutImmediate(tmpTxt.rectTransform);var width = tmpTxt.rectTransform.rect.width+maskWidth;var duration = GetDuration(width);tmpTxt.rectTransform.DOAnchorPosX(-width, duration).SetEase(Ease.Linear).SetLoops(loopCount, LoopType.Restart).OnComplete(() =>{callback?.Invoke();});}//根据消息长度计算动画匀速运行时间private float GetDuration(float width){var offset1 = (int)width / 100;var offset2 = width % 100 == 0 ?0:1;var offset = offset1 + offset2;return offset * unitTime;}
}