Creating a Custom Tab System in Unity

in the modern day of gaming will find tabs everywhere no not those kind of tabs the kind of tabs we see in professional notebooks or more accurately the ripped up pieces of post-it notes you stuck to the end of your much cheaper much crappy a notebook to easily flip between page sections these tab systems are usually seen in options menus to switch between different settings or sometimes between different front-end screens entirely and in a fine moment of full-on verisimilitude some games even go the whole hog and re represent the skeuomorphic design by actually having literal pages to flip through either way it's clear that tabs are a pretty common occurrence unfortunately unity doesn't have any kind of tab system out of the box the closest thing that exists is the toggle system but I've always found it to be less than ideal so if you're looking to add some page flipping tab switching action into your project you're going to need to roll your own solution hey there i'm matt and welcome to game dev guide in this video we're going to take a look at how to build a dynamic tab system by extending unities UI tools we're going to build a tab button script that blends some of unities button functionality with our own active tab state we're also going to build a controller component that manages groups of tabs as well as handle some of the default behaviors we might expect from our tab system such as switching through different pages of a UI panel based on the currently selected tab so let's get started okay so I've put together a little demo scene here I'm just using Kenny's RPG UI pack and an RPG icon pack from the asset store as you can see it's just a basic layout for an inventory screen over here we have our tab area which is just five different image game objects we want to make tabs out of we've also got five individual pages for each of the tabs as we press each tab button we'd like to switch the corresponding game object on and turn the others off we could do this by adding a button component to each of our tabs and then setting the logic for each button telling it which page to turn off or on but this is incredibly tedious and time-consuming if we were to add another tab in here we'd have to go through the whole process again so it doesn't really scale well what we'd ideally like to do is build a controller script that manages each of these tabs and toggles our state whenever a new tab is selected or interacted with at the same time we're going to need a script that designates a game object as a tab button so our controller knows what script to manage so in our tab area here let's create a new script called tab group then let's select one of the children here and create a new script called tab button while we're here let's give both of these scripts a nice icon let's go over here and select our script in the project window we'll go over here choose other and then I'll just choose this tab icon image and for this one I'll set the tab group image now notice how the icon has changed in the project window here and if we go back onto our game object we can see it's now got this nice icon here in the inspector it's just a little bit of flair but I also find it quite nice when I'm working with a series of connected scripts creating some uniform icons can really help visualize relationships between certain scripts and components so now that we've got our scripts let's start building our tab workflow first let's open up our tab group script in the top here let's add a list of tab buttons [Music] then let's replace this with a public method could subscribe which takes in a type of tab button then when the first button subscribes to our group let's create the list and then let's add the button to our list so now we have a tab group component that our tabs can subscribe to let's also add three methods that will control our tabs let's create a non tab enter method that takes in a tab button a non tab exit method that takes in a tab button and finally a non tab selected method that also takes in a tab button these methods are going to change the state of our buttons whenever one of our tabs is interacted with but we'll leave them empty for now next let's add some functionality to our tabs themselves let's open up our tab button script firstly let's add a reference to a tab group which we'll set in the inspector let's also add a reference to our background image on our tab this is going to be switched by our tab group based on whether or not our tab is selected we'll add a required component attribute to the top here to guarantee that an image is part of our button and in our start method let's assign the image using getcomponent and then tell our tab button to subscribe to the tab group now we need to tell our tabs to talk to the tab group whenever they're interacted with while we could simply derive our script from the button class and access the click events in there I don't really want all the functionality of the button component and I want more fine-grained control over the different button event States fortunately there's a really easy way to hook into the event system and execute code when a specific mouse event occurs over UI up the top here if we add a unity engine event systems into our usings we can then access the I point to enter handler I pointer click handler and the I point to exit handler interfaces by implementing these on our script unity will now cool this code when any of these three events occur on our UI element so let's now all tell our tab group when these events occur by calling the methods we set up earlier back in our tab group let's have the controller toggle the state of our tabs based on which one is selected up the top here let's add a sprite for when a tab is idle it's also add a sprite for when a tab is hovered and another sprite for when a tab is selected now I'm using a sprite swapping method here but you could easily have these as colors instead if you preferred let's write a new method called reset tabs that we'll use to set all of our tabs to idle and in here we'll create a for each loop on all of our tab buttons and for each button we'll set the background sprite to idle now we'll add this as the first line to each of our on tab methods here then we'll set the sprite on each tab button based on the event so for on tab enter we use our hover sprite and for on tab selected we use our selected sprite now if we go back into unity let's set up our sprites on our tab group so we'll use this one for the idle sprite this one for the hover sprites and let's use this one for the selected sprite then let's also add the tab button script to our other tabs here and select them all linking them to the tab group and when we play you can see our tab sprites all swap nicely the only problem is our selected tab also resets itself when the system is interacted with again so we need to store our currently selected tab in the system at the top of our tab group here let's create a selected tab reference and when a tab is selected we'll assign that as our selected tab before the reset method will then go into our reset tabs method and tell the method to skip over the currently selected tab and finally we'll also tell our enter method to only change the sprite if the tab isn't already selected now if we go back into unity and try it out we can see that the system now has a reference to our selected tab lovely that's looking great so with the button visuals working we want to add some default behavior into our system the most likely use case for a tab layout like this is to switch between game objects in the UI so let's add that functionality into our system at the top of our tab group script let's add a list of game objects called objects to swap then in our tab selected method let's get the index of our tab in the list the idea here is that the order of the game objects in this list will be the same as the child index of each of our tabs so let's create a new int called index and get the sibling index from the transform of our tab button now we'll iterate through our game objects for int I equals 0 I is less than objects to swap counts i + + and then here if i equals the index we'll set the game object as active otherwise we'll disable it now back in unity if we assign our pages from our page area here into our tab group and then hit play you can see we have a functional tab system that keeps an active tab and also swaps to the appropriate page for each tab but Matt what if we need more than just swapping between pages in a panel you might be saying that is a good point avid viewer well said yo-you maybe rather than swapping a page when one of these tabs is activated we actually want to control audio options or execute some kind of method on another script to do this we'll need to add a callback on our button and have our tab group control activate the callbacks whenever a state change occurs let's go into our tab button script and add two new methods a select method and a deselect method then in our tab group in the on tab selected method before we assign our selected tab let's check if a tab already exists and tell it it's now deselected by calling the deselect method on it then after assigning the new tab let's call the select method now whenever the tab changes the correct method is called the last thing to do is add some functionality in here for the selection we want our tab system to be flexible so we don't really want to hard-code anything so there's two ways we could handle this one thing we could do is hook this callback into a larger event system which I've actually covered how to do in a previous video and recommend giving it a watch after this video if you haven't already seen it however for now let's create a bespoke unity event on the tab itself so each callback can be individually controlled in the inspector at the top of our tab button let's create a public unity event called on tab selected and another unity event called on tab deselected then let's invoke each of these from inside our select and our deselect methods like this back in unity we can now do anything we want when our tabs change state by simply adding a new cool back here I've got this little heart icon that I'd like to toggle on and off with each active tab so let's just go through and set that up and with that setup let's hit play as you can see our tab system now calls our selected and D selected functions on our tabs while I'm sure there's a lot more you can do with a system like this hopefully this is a great starting point for building a more complex and more flexible tab system for your UI let me know what you think about this in the comments below but that's pretty much it for now if you've enjoyed this video be sure to hit that like button and if you're new to the channel be sure to subscribe if you'd like to see more tips tricks and tutorials from me and feel free to check out some of the other videos on the channel there's also a discord server for game dev guide which is a great place to chat about the videos gaming or anything in general with other community members so you're welcome to join and hang out simply click the link below for that one as always thank you very much for watching and I'll see you again next time you

Channel: Game Dev Guide

Views: 124,044

Keywords: unity, learn, games, gamedev, how to, making games in unity, tutorial, unity tutorial, learning unity, unity3d tutorial, programming, making games, tab system, unity ui, tab group, options menu, menu system, unity tab

Id: 211t6r12XPQ

Length: 13min 45sec (825 seconds)

Published: Mon Jun 10 2019

Reddit Comments

[u/theKryton]

Really clean video format, thanks!

[u/hieutran196]

Nice, thanks!

[u/GandalfTheBlackOne]

Thanks