Unity3d中Tab控件的实现

1.按如下结构建立一个Tabs

2.Tabs上添加Toggle Group组件

3.Tab上添加Toggle、ToggleHighlightStaysActiveAfterLosingFocus

4.Page上添加Canvas Group

5.在Menu上添加TabMenu，系统会自动识别，无需手动赋值(识别错误的话见下文)。这样就完成了Tab控件的制作

6.如果Page下有Toggle，TabMenu会识别错误，需要手动赋值。

解决方法：注释TabMenu.cs以下代码，再手动赋值

7.设定初始选中项，将对应的Tab下的Toggle的isOn勾上，其余Tab的取消勾选就可以了。

附：

TabMenu.cs代码

using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Events;
using UnityEngine.UI;namespace ChristinaCreatesGames.UI
{public class TabMenu : MonoBehaviour{[Header("Current Index")][SerializeField] private int pageIndex = 0;[Header("Components")][SerializeField] private ToggleGroup toggleGroup;[SerializeField] private List<Toggle> tabs = new List<Toggle>();[SerializeField] private List<CanvasGroup> pages = new List<CanvasGroup>();[Header("Event to call")]public UnityEvent<int> OnPageIndexChanged;private void Initialize(){toggleGroup = GetComponentInChildren<ToggleGroup>();tabs.Clear();pages.Clear();tabs.AddRange(GetComponentsInChildren<Toggle>());pages.AddRange(GetComponentsInChildren<CanvasGroup>());}private void Reset(){Initialize();}private void OnValidate(){Initialize();OpenPage(pageIndex);tabs[pageIndex].SetIsOnWithoutNotify(true);}private void Awake(){foreach (var toggle in tabs){toggle.onValueChanged.AddListener(CheckForTab);toggle.group = toggleGroup;}}private void OnDestroy(){foreach (var toggle in tabs){toggle.onValueChanged.RemoveListener(CheckForTab);}}private void CheckForTab(bool value){for (int i = 0; i < tabs.Count; i++){if (!tabs[i].isOn) continue;pageIndex = i;}OpenPage(pageIndex);}private void OpenPage(int index){EnsureIndexIsInRange(index);for (int i = 0; i < pages.Count; i++){bool isActivePage = (i == pageIndex);pages[i].alpha = isActivePage ? 1.0f : 0.0f;pages[i].interactable = isActivePage;pages[i].blocksRaycasts = isActivePage;}if (Application.isPlaying)OnPageIndexChanged?.Invoke(pageIndex);}private void EnsureIndexIsInRange(int index){if (tabs.Count == 0 || pages.Count == 0){Debug.Log("Forgot to setup Tabs or Pages");return;}pageIndex = Mathf.Clamp(index, 0, pages.Count - 1);}public void JumpToPage(int page){EnsureIndexIsInRange(page);tabs[pageIndex].isOn = true;}}
}

ToggleHighlightStaysActiveAfterLosingFocus.cs代码

using UnityEngine;
using UnityEngine.UI;namespace ChristinaCreatesGames.UI
{public class ToggleHighlightStaysActiveAfterLosingFocus : MonoBehaviour{[SerializeField] private Toggle toggle;[SerializeField] private Image  imageToKeepFocusActive;private void Reset(){toggle = GetComponent<Toggle>();}private void Awake(){toggle.onValueChanged.AddListener(OnToggleValueChanged);OnToggleValueChanged(toggle.isOn);}private void OnDestroy(){toggle.onValueChanged.RemoveListener(OnToggleValueChanged);}private void OnToggleValueChanged(bool isOn){if (imageToKeepFocusActive == null) return;imageToKeepFocusActive.color = toggle.isOn ? toggle.colors.highlightedColor : Color.clear;}}
}

参考视频