Building Enterprise Apps with Unity — building the first UI panels.

We’ve created our main menu, but we’ve got many more windows to go, let’s start with the find case panel:

So according to the map, we’ll need a screen with a header, a gray background, text that says Please enter your case number, an input field, a button, and a footer.

Let’s create a new panel, rename it to Find_Case_Panel, and immediatly snip off its image component for its health, cleanliness and superior performance later.

Next, we’ll add a new image called White_Borders, and like all the other images, anchor-stretch, 0 it out, and preserve aspect.

Hmm..the borders need to be touching the top and bottom, let’s remove the preserve aspect ratio.

That’s much better! That’s actually the look we want.

We also need to add a logo, so new image, rename to Logo, slide the logo sprite into the source, preserve aspect, center stretch, zero it out. Bring it up to the top bar, and put in around 50 for the left and right rect transform.

Next, let’s add the gray overlay. Add a new image, add the gray overlay sprite, anchor stretch center, zero everything out.

It’s covering everything, we can fix that by clickign and dragging the image up behind the white_borders element.

Next, add UI/Text and name it Enter_Case_Number_Title. Text is “PLEASE ENTER YOUR CASE NUMBER”. Change the vertical to overflow and alignment to center. Anchor Center of course. Font size around 20, and L/R padding around 20.

Next, we’ll enter an input field: Add a UI/Input field, anchor stretch, rect l/r padding around 25.

For the input fields text, we want it to be centered both horizontally and vertically, and I’m guessing the font size should be around 20.

Let’s test the font size by hitting play and entering some text, if we need to make some adjustments, we’ll do that, but we’ll need to keep note of the font size as anything done in play mode gets lost as soon as we leave it.

Yep. 20 was way too small, 35 seems to look pretty good so we’ll put that in after we leave play mode. Next we’ll add the Search bar and bottom UI elements.

We’ll create a UI button, call it Search_Button, and put the button graphic into the source image slot. And guess what? Yup! Stretch center, 0 it out, preserve aspect, and put it near the bottom. We’ll also change the text to SEARCH, color it white, and change the fonts size to around 36.

Finally for the bottom UI, we’ll make another button, delete the text element, place the home icon into it, preserve aspect, anchor bottom left, and place it in the bottom left.

Next we’ll make the hamburger menu icon, duplicate the home button and rename it Menu_Button, and then we’ll place the hamburger icon (which is named setting) into it and move it to the right. Leave the anchor alone for now.

Next we’ll make the left and right arrows: Duplicate the Menu Icon and we’ll copy the left arrow into the source slot. move it near the center. Leave the anchor alone for now.

For the right arrow, we’ll just duplicate the left arrow and change the x scaling to -1 and nudge it over to the right.

And with that, we’ve completed our next panel. It’s time to make our next one but an issue has arisen:

The top and bottom UI panels appear in the rest of the screens so we’ll have to do a bit of reorganizing so we won’t have to recreate the UI every time. We’ll work on that tomorrow!