Any simple examples for creating a tabbed menu?

Questions & Answers
1

I’m looking to create a simple tabbed menu (probably using NGUI) for a game UI. As an example 5 tabs along the top of a panel, on clicking a tab the panel content is swapped. I’ve read this can be done using enums to set a unique panel to active… but that’s all the info I can find. For something so straightforward I though there would be some resource out there - I’m completely new to Unity and C#, but well versed in AS3 (so the syntax isn’t massively different).

Any help would be massively appreciated!

5

See if this link is helpful, snapshot below:

37670-unitytabdemo.gif

private int iTabSelected = 0;
public void OnGUI()
{
    GUILayout.BeginVertical();
    {
        GUILayout.BeginHorizontal();
        {
            if (GUILayout.Toggle(iTabSelected == 0, "Tab1", EditorStyles.toolbarButton))
                iTabSelected = 0;

            if (GUILayout.Toggle(iTabSelected == 1, "Tab2", EditorStyles.toolbarButton))
                iTabSelected = 1;
        }
        GUILayout.EndHorizontal();
        //Draw different UI according to iTabSelected
        DoGUI(iTabSelected);    
    }
    GUILayout.EndVertical();
}

private void DoGUI(int iTabSelected)
{
    if (iTabSelected == 0)
    {
        //Draw some control
    }

    if (iTabSelected == 1)
    {
        //Draw some control
    }
}
4

Created one that mimics the Unity tabs, Editor GUI only

[31720-untitled-1.jpg*|31720]

/// <summary>
/// Creates tabs from buttons, with their bottom edge removed by the magic of Haxx
/// </summary>
/// <remarks> 
/// The line will be misplaced if other elements is drawn before this
/// </remarks> 
/// <returns>Selected tab</returns>
public static int Tabs(string[] options, int selected)
{
    const float DarkGray = 0.4f;
    const float LightGray = 0.9f;
    const float StartSpace = 10;

    GUILayout.Space(StartSpace);
    Color storeColor = GUI.backgroundColor;
    Color highlightCol = new Color(LightGray, LightGray, LightGray);
    Color bgCol = new Color(DarkGray, DarkGray, DarkGray);

    GUIStyle buttonStyle = new GUIStyle(GUI.skin.button);
    buttonStyle.padding.bottom = 8;

    GUILayout.BeginHorizontal();
    {   //Create a row of buttons
        for (int i = 0; i < options.Length; ++i)
        {
            GUI.backgroundColor = i == selected ? highlightCol : bgCol;
            if (GUILayout.Button(options*, buttonStyle))*

{
selected = i; //Tab click
}
}
} GUILayout.EndHorizontal();
//Restore color
GUI.backgroundColor = storeColor;
//Draw a line over the bottom part of the buttons (ugly haxx)
var texture = new Texture2D(1, 1);
texture.SetPixel(0, 0, highlightCol);
texture.Apply();
GUI.DrawTexture(new Rect(0, buttonStyle.lineHeight + buttonStyle.border.top + buttonStyle.margin.top + StartSpace, Screen.width, 4),texture);

return selected;
}
*

2

I don’t have any experience with NGUI, so this is how it worked for me with classic UnityGUI:

Create a variable, which will store info, which page should be viewed. When user clicks on button “options”, you just need to change variable.

Then, draw this page.

Code should look like this

int selectedPage = 0;
    void OnGUI() {
    if(GUI.Button(new Rect(10, 10, 100, 30), "Load game") selectedPage = 1;
    if(GUI.Button(new Rect(110, 10, 100, 30), "Options") selectedPage = 2;
    if(selectedPage == 1){
       GUI.Box(Rect(10, 50, Screen.width-20, Screen.height-60), "Load game");
       if (GUI.Button(Rect(Screen.width-110, 50, 100, 30), "Close")) selectedPage = 0;
    }
    if(selectedPage == 2){
       GUI.Box(Rect(10, 50, Screen.width-20, Screen.height-60), "Options");
       if (GUI.Button(Rect(Screen.width-110, 50, 100, 30), "Close")) selectedPage = 0;
    }
    }

This code is just a template. For info how to draw GUI, see Unity Script Reference and GUI Controls. Also you can use switch instead of if if you got more tabs.

3

I guess I just need to create a TabButton class which has a public variable for what ever page it refers to and update the panels Active state in an OnClick handler - I just thought there may have been a native class for it. Cheers.