Best way to create a tabbed menu using NGUI

Unity Engine
1

I read some people asking about this and created my own solution. Thought I would share it and get feedback.

Note: this solution requires the NGUI package (which I greatly recommend).

I created two custom methods. TabButton and TabManager.

TabButton is attached to something that’s already a UIButton. I can then use the UIButton “On Click” settings to call a custom method in TabButton called MyClick.

Here’s some code from TabButton

public GameObject tabManager;
    	public int tabCode;
    	string functionName = "changeTab";
    	
    	public void MyClick ()
    		{
    			if (tabManager == null) return;
    			if ((tabCode < 1) || (tabCode > 6)) return;
     			
    			tabManager.SendMessage(functionName, tabCode);
    		}

TabManager points to some kind of “root” UI object, where each child object is a different tab. The Tab Manager object will get a unique tabCode (an integer from 1 to 6) from the TabButton, and use it to open one tab and close any others.

Here’s the tab manager

public class TabManager : MonoBehaviour {

	public int NumberOfTabs;
	public GameObject Tab1;
	public GameObject Tab2;
	public GameObject Tab3;
	public GameObject Tab4;
	public GameObject Tab5;
	public GameObject Tab6;
	
	private int activeTab = 0;

Need this to keep track of up to 6 tab GameObjects to open. (For me those objects are panels), and how many I’ll actually use.

// Use this for initialization
	void Start () {
		if (NumberOfTabs > 0) NGUITools.SetActive(Tab1,false);
		if (NumberOfTabs > 1) NGUITools.SetActive(Tab2,false);
		if (NumberOfTabs > 2) NGUITools.SetActive(Tab3,false);
		if (NumberOfTabs > 3) NGUITools.SetActive(Tab4,false);
		if (NumberOfTabs > 4) NGUITools.SetActive(Tab5,false);
		if (NumberOfTabs > 5) NGUITools.SetActive(Tab6,false);

	}
	
	// Update is called once per frame
	public void Update () {
	}

Some essentials. Default state is all tabs closed. (Uses the “SetActive” function on NGUI’s panels).

void closeActiveTab (int tabcode)
		{
			if (tabcode <= NumberOfTabs)
				{
					switch(tabcode)
						{
							case 1:
								NGUITools.SetActive(Tab1,false);
								break;
							case 2:
								NGUITools.SetActive(Tab2,false);
								break;
							case 3:
								NGUITools.SetActive(Tab3,false);
								break;
							case 4:
								NGUITools.SetActive(Tab4,false);
								break;
							case 5:
								NGUITools.SetActive(Tab5,false);
								break;
							case 6:
								NGUITools.SetActive(Tab6,false);					
								break;
							default:
								Debug.Log ("ERROR: Could not close Tab: "+tabcode+".");
								break;
						}
				}

		}

This is a function that takes a code (int from 1 to 6) and uses it to close the relevant tab.

	public void changeTab (int tabcode)
		{
			if ((tabcode <= NumberOfTabs)  (tabcode >= 1))
				{
					// Close the active tab first
					if (activeTab != 0) { closeActiveTab (activeTab); }
					// IF they click the active tab, they close everything.
					if (tabcode == activeTab)
						{
							activeTab = 0;
							return;
						}
					activeTab = tabcode;
					switch(tabcode)
						{
							case 1:
								NGUITools.SetActive(Tab1,true);
								break;
							case 2:
								NGUITools.SetActive(Tab2,true);
								break;
							case 3:
								NGUITools.SetActive(Tab3,true);
								break;
							case 4:
								NGUITools.SetActive(Tab4,true);
								break;
							case 5:
								NGUITools.SetActive(Tab5,true);
								break;
							case 6:
								NGUITools.SetActive(Tab6,true);
								break;
							default:
								Debug.Log("ERROR. Could not open tab: "+tabcode+".");
								break;
						}
				}
			else 
				{ 
					Debug.Log ("Warning: Invalid tab code: "+tabcode+"."); 
				}
				
		}

This one is the key method. This takes a tab code (usually from the MyClick method of the TabButton) and opens the correct tab. There’s a few checks to close the active tab first. And if the player clicks on a tab that’s already active, it treats that as the player trying to toggle the tab.

I hope people will like it! I think I could make it tighter but I’m new at this. I think maybe there’s a way to do it with an array instead of 6 separate objects…

2

Hi Ashking.

Excelent. You help me a lot with that tip. Thank you man.