As I mentioned in my last post, I found all the various tutorials for tab controls to be overly complicated. I set out to produce an easier method. I saw that this looked similar to a Observer Pattern so I applied the concepts of it in the construction of the tab control. Before we start, I did not actually implement the pattern in terms of setting up the interfaces and such but applied pieces of it to simplify the process. With all that said then lets start and dig into how to make a Unity Tab Control.
Unity Tab Control
First, open the Unity Hub and press the New button.
After the project comes up, lets focus on some of the setup. First, build a Scripts folder.
We need to create an empty object that will hold our tab control.
With that object lets create nested within the empty object a panel element.
We need to see things so let switch over to the Scene tab and press the 2D button so we can see thing directly.
We don’t want the panel covering everything so lets shrink it along the Y axis.
With our header panel in place, now we need a button so lets use an image to achieve that so create an image nested under the panel.
With images require a place to stick them so in the Project tab, create a new folder called Images.
Drag and drop your button image into the Image folder and select it. We need to swap it over to a Spite so do that in the Inspector tab and press Apply.
Select the Image in the Hierarchy tab. Your Project tab should be selected to the Images folder.
Drag the button image to the Source Image textbox in the Inspector tab.
With that done lets get the image sized up and placed in the correct location. It is easiest to use the Inspector for this if you know the numbers.
Since this is going to be a button, we need a button script.
With that done lets select the Panel’s GameObject.
Create another panel under the GameObject.
Renaming and Cleaning Up.
In my case the panel does not show up because it is a 0,0 sized element. Lets fix this in the Inspector.
Now we need to straighten up the mess that are our elements. Select GameObject. Set the position to 0,0 in the X,Y of the Position in the Inspector tab.
Select the Panel for the header. Set it to X, Y of 0,880.
Select the body panel and set the transform in the Inspector panel to 0, -200.
We need to clean stuff up. Lets rename all the pieces.
Name the GameObject, TabControl. Panel 1 is Panelheader. Image turns to ImageTab1 and the body panel named PanelTab1.
Lets duplicate the image tab button.
Drag it over to its new location and rename it to ImageTab2.
It’s time to do the same with the PanelTab1.
Rename it to PanelTab2. We also want to disable the Panel 2.
Scripting
Create a couple of new C# Scripts.
Name it to the TabManager and Tab.
TabManager
using System.Collections; using System.Collections.Generic; using UnityEngine; public class TabManager : MonoBehaviour { public List<Tab> tabs = new List<Tab>(); public void Notify(int tabIndex) { tabs.ForEach(x => x.Disable()); tabs[tabIndex].Enable(); } }
We don’t actually need a Register and Remove since the IDE will handle that part for us. The only need is the list of tab that will be subscribed. We also setup the Notify function along with an index. The Notify will disable the panels and then enable the index tabbed panel.
Tab
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class Tab : MonoBehaviour { public Image image; public GameObject panel; public void Disable() { panel.SetActive(false); } public void Enable() { panel.SetActive(true); } }
We setup the Disable and Enable functions. These control the panel viability.
Select Panel Image
To help show the script working we need a text field to show the difference.
Set the text to be easy to see.
After all that here is what it looks like after.
Wiring It All Up
Select the TabControl in the Hierarchy tab. We need to drag the TabManager Script from the Project tab to the Inspector section of the TabControl.
Set the Size from 0 to 2.
Select the ImageTab1.
Drag the Tab script from the Project tab and drop it on the Inspector tab.
We need wire everything together so in the Tab Script section of the Inspector of the ImageTab1. Drag the ImageTab1 from the Hierarchy tab and drop on the Image textbox.
Drag the panel we want, PanelTab1 to the Panel textbox and Inspector tab.
Here is what it looks like after everything is done.
Repeat the same step on the ImageTab2.
Wrapping up we need to configure the tab control. Select the TabControl in the Hierarchy tab.
Next, we need to drag the ImageTab1 to the Element 0 textbox in the Inspector tab.
In conclusion to this section here is what the Tab Manager looks like after being configured.
On Click Events, Setting Up the Button
Finally we are in the home stretch. We need to turn on the OnClick event for the Image Buttons we created. Because of the need to have button events we need to select out button so select ImageTab1.
Press the plus button on the OnClick section.
Drag the TabControl from the Hierarchy tab to the textbox in the On Click section. We need to select the Notify function.
In the textbox, set the index. On this first one it is correct. When you do it on ImageTab2 switch it over to 1. Because of the way the tab control works, you can find the needed value is to look to the order defined in the TabControl.
So here is what it looks like when you duplicate these steps for ImageTab2.
Finally, give it a go and the text will appear and disappear. Feel free to leave a comment below if you have any additional questions about the Unity Tab Control.