UGUI制作Tab标签页

方法有2种

1.利用UGUI中的Button来制作。

using UnityEngine;
using UnityEngine.UI;
using System.Collections;
using System;
using System.Collections.Generic;
[Serializable]
public class TabControlEntry
{
    [SerializeField]
    private GameObject panel = null;
    public GameObject Panel { get { return panel; } }

    [SerializeField]
    private Button tab = null;
    public Button Tab { get { return tab; } }
}
 
  
 
  
 
  
 
  
using UnityEngine;
using UnityEngine.UI;
using System.Collections;
using System;
using System.Collections.Generic;

public class TabControl : MonoBehaviour
{
    [SerializeField]
    private List entries = null;

    [SerializeField]
    private GameObject panelContainer = null;
    [SerializeField]
    private GameObject tabContainer = null;

    [SerializeField]
    private GameObject tabPrefab = null;
    [SerializeField]
    private GameObject panelPrefab = null;

    protected virtual void Start()
    {
        foreach (TabControlEntry entry in entries)
        {
            AddButtonListener(entry);
        }

        if (entries.Count > 0)
        {
            SelectTab(entries[0]);
        }
    }

    public void AddEntry(TabControlEntry entry)
    {
        entries.Add(entry);
    }

    private void AddButtonListener(TabControlEntry entry)
    {
        entry.Tab.onClick.AddListener(() => SelectTab(entry));
    }

    private void SelectTab(TabControlEntry selectedEntry)
    {
        foreach (TabControlEntry entry in entries)
        {
            bool isSelected = entry == selectedEntry;

            entry.Tab.interactable = !isSelected;
            entry.Panel.SetActive(isSelected);
        }
    }
}
 
  
 
  
 
  
 
  
 2.通过Toggle来制作 
  
 
  
可以将Toggle中的Checkmark对象看作选中的标签页，Background对象看作是未被选中是的标签显示，将几个Toggle放到一个Group中，即是一组标签。同时，UGUI的最好的一个优势就是，同一个画布上，在Hierarchy视图中，位置越靠下的越后渲染，所以，我们可以通过transform中的SetAsLastSibling()方法将选中的Toggle动态放到最下面，这样就可以让选中的Toggle靠前显示，可以做成像谷歌浏览器页面的样式。