Unity3D: how to implement Tabbed UI

Unity3D does not ship with the tabbed UI, however, we can cheat to implement this!

The key ideas include:

• To use Toggle control
• To make Toggle control look like a tab control

The following code illustrates how this is done:

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();
}

The EditorStyles.toolbarButton is important to make the toggle control look like a tab!

Given the iTabSelected variable, we can then draw different UI accordingly:

private void DoGUI(int iTabSelected)
{
    if (iTabSelected == 0)
    {
        GUILayout.Space(10);
        GUILayout.BeginVertical();
        {
            GUILayout.Button("Tab1.Button1");
            GUILayout.Button("Tab1.Button2");
        }
        GUILayout.EndVertical();
    }

    if (iTabSelected == 1)
    {
        GUILayout.Space(10);
        GUILayout.BeginVertical();
        {
            GUILayout.Label("Tab2.Label1");
            GUILayout.Label("Tab2.Label2");
        }
        GUILayout.EndVertical();
    }
}

Happy Coding!