RSS

Unity3D: how to implement Tabbed UI

27 Dec

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

UnityTabDemo

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!

 
2 Comments

Posted by on December 27, 2014 in Programming, Unity 3d

 

Tags: , , , , , , , , , ,

2 responses to “Unity3D: how to implement Tabbed UI

  1. alia

    February 7, 2015 at 8:17 pm

    Thank you, i was looking for tabbed tutorial and found this! thanks!

     
  2. Kamil Aykırı

    June 12, 2016 at 9:30 pm

    Thanks very nice sharing. I might have a question, I wonder Toggle buttons for adjusting the width and height, can we put the picture button?

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: