Daily Progress: Building Enterprise Apps with Unity — Setting up the Case Overview panel
The previous screens we’ve made were pretty simple compared to what we’ll be doing today, we’ve got many fields like a case, name, date, location, location notes, photo, and notes for the photo. All of these elements will be scrollable via a scrollbar to the right and stay within the bounds of the UI.
aside from the scroll-bar, everything else is pretty familiar territory so let’s get to it.
Create a new panel, remove the image component and place it above the Border panel so it stays behind the UI.
Next, we add a new UI image, renamed to Background, drag the BG_Dark sprite into the source, center anchor stretch, 0 all and we’re done with that!
Time to add some text, create a text element called Title_Case_Number, and some fake text like “CASE NUMBER 000000001138. select overflow for horizontal overflow. and leave vertical overflow at truncate. Make the text white, font size around 22, anchor left, position about 180x.
Next we’ll add the grey divider image, anchor stretch horizontally, 50 for left right padding and place it under the case text. 185y should be good.
Duplicate the Title_Case text and call it Title_Name and place any fake name in the text. Move it down around 60 units in y. If you’re unsure of the exact number, Unity allows you to use math in the number boxes so if y says 185, just add “-60” to it, and it will do the math for you.
Duplicate Title_Name to Title_Date and place any date in the text field, again move down 60. Check that…Actually 50 looks better.
Duplicate the date text and call it Title_Location, again put some fake info in, since it’s an address, turn on horizontal and vertical overflow and move it down 50.
Duplicate Title_Location and call it Title_Location_Notes, Change horizontal to Wrap and move it down 85 and again, put in some fake info.
Duplicate Title_Notes and rename it to Title_Photo and only place PHOTO: in the text. Move it down 85.
Using the move tool, I adjusted the text to what I felt flowed a little better.
Next we’ll insert a raw image, anchor stretch all, 0 all, 50 padding for l/r. I placed it at top 420, bottom 5.
The next part required a bit of technical shenanigans, since the scrollbar only works in play mode, we’ll need to enter it to see how it will look in the final product. We’ll take a look at that tomorrow…
