Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 13 Next capture
2021 2022 2023
1 capture
13 Jun 22 - 13 Jun 22
sparklines
Close Help
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
0
Question by oldmanvegas · Jun 19, 2013 at 04:15 PM · guinoob

Any simple examples for creating a tabbed menu?

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!

Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

4 Replies

· Add your reply
  • Sort: 
avatar image
7

Answer by DavidStudio · Dec 27, 2014 at 08:00 AM

See if this link is helpful, snapshot below:

UnityTabbed UI

 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
     }
 }


unitytabdemo.gif (40.0 kB)
Comment
Add comment · Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image vikingfabian-com · Dec 28, 2014 at 07:16 AM 0
Share

You can get the same result with just using GUI.Toolbar

avatar image
5

Answer by vikingfabian-com · Aug 29, 2014 at 03:21 PM

Created one that mimics the Unity tabs, Editor GUI only

alt text

 /// <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[i], 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;
 }



untitled-1.jpg (19.9 kB)
Comment
Add comment · Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image dreasgrech · Jan 06, 2016 at 08:40 PM 0
Share
  • Perfect, exactly what I was looking for.

avatar image
0

Answer by kubci98 · Jun 22, 2013 at 03:05 PM

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.

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image
0

Answer by oldmanvegas · Jul 03, 2013 at 04:10 PM

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.

Comment
Add comment · Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image kubci98 · Jul 07, 2013 at 01:23 PM 0
Share

you dont need to have public variable, if whole tabbed menu and its content will be in one script.

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this Question

Answers Answers and Comments

20 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

OnGui not getting called 1 Answer

Having trouble getting text to show up. 0 Answers

I get a weird error when i try to use GUISkin on a timer 1 Answer

Smoothly transform gameobject to specific coordinates with the click of a GUI 1 Answer

Where do I assign GUI scripts? 1 Answer


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges