Day 145 — Working With Multiple Panels in Unity

Hey and welcome!

In this one we’re going to be adding in some new pages for the enterprise app with some new UI elements here and there. In order to create these new pages we’re going to be creating new panels for each page that we can link to when appropriate in the application.

Start things off by hiding your main menu panel and create a new one called “FindCasePanel” which you’ll also remove the image component for. In order to work on these individually you’ll click on the checkbox in the top left of the inspector to set the active status to true or false depending which one you’re working on and that will hide and unhide your panels.

Once you’ve done that you’ll need to piece together something that looks like this:

This bit is made up of three images which are Logo_Small, White_Borders and Grey_Overlay as well as a text object. Make sure that your grey overlay is first in the order of your objects so thats it’s behind your other UI elements.

Next we’re going to add in something new which is an Input field that can be found under the UI menu so add that into your new panel. Once you’ve done that you can adjust the rect transform to match the size and position of the input field in the gif below.

Inside your input field you’ll notice that there are two child objects for Placeholder and Text. Go into your Placeholder object first and change the text to “FIELD” and then adjust the alignment to the middle for both options so that the placeholder text is sitting in the center of the input field. Lastly for your text object here you can set the alignment to the middle again for both options and then set the font size to around 28 which you can adjust accordingly. When you have that all done you can run your app and test it out!

To wrap this one up you’re going to need to add in 5 new buttons, one using the Button image, one using the HomeButton image, two using the PlayButton image and the last one making use of the Setting image.

You’re aiming to have something like the above here. A couple of things to note is that the search button is the only one that uses text so you can delete the text component from the others so that it doesn’t show up. Secondly if you adjust the x value for the scale property to -1 you can flip the play button image so that you can have left and right facing arrows using the same image.

Last thing we’re going to do now is create a new panel to keep things tidy and easier for ourselves. You may realize that we’ll probably want to use the white borders at the top and bottom of the page along with everything in them for any future page that we use going forward so we’re going to store them in a separate panel that will sit in front of all the other panels.

So create a new panel making sure that it’s at the bottom of your other panels in the order and add in your white borders with everything in them so that it separates them from your search page here.

If done correctly you should have something like the above working for you when you activate and deactivate your search panel. Now for any future panels/pages we create it will automatically have that border included so it’s pretty handy!