Claim Overview: Scroll View
--
Objective: Implement scrolling window to view the claim.
Set the Canvas UI scale mode is to Screen Space overlay with a resolution of X 1080 Y 1920. This is important because it impacts the position of all child objects. Disable all other children except Border_Panel, which is the modular navigation panel previously described. Now create an empty game object, named Overview_Container, placing it above the Border_Panel as a child of the Canvas. This will insure that the navigation tools are on top of the contents of the Overview_Container. Add an UI > Image named Background as a child of Overview_Container. Setup the Backgound with anchors stretch-stretch, zeroing the left, right, top, bottom and pos Z, to fill the Canvas for the mobile device. The BG Dark sprite is used as the source image.
There will be three objects that will stay on screen and not scroll: the case number, divider line and back button. First add a new UI > Text called Claim_Number_text as child of Overview_Container below the Background, so it is in front of the background. Enter text for the case number in the text field an set font size to 56 with color white, as shown below.
The divider line, Top_Divider, is an image, like the background. Setup the Top_Divider with anchors stretch-stretch, with left 120, right 120, top 580, height 100 and pos Z 0, to fill the Canvas for the mobile device. The Grey_Line sprite is used as the source image, checking preserve aspect.
Add UI > Button, renaming it Back_Button. Setup the Top_Divider’s rect transform with anchors stretch-stretch, with left 120, right 120, top 1250, bottom 0 and pos Z 0, to fill the Canvas for the mobile device. The Grey_Line sprite is used as the source image, checking preserve aspect. The game view should appear as shown below, with an empty center area.
Add a UI > Scroll View as a child of Overview_Container, and position it above the Back_Button, but below the Top_Divider. The empty area will contain the scroll view, so set the Scroll View’s rect transform to left 0, right 0, top 430, bottom 510 and pos Z 0, which works with the Canvas resolution of 1080 x 1920. Uncheck Horizontal and delete the Scrollbar_Horizontal child object, as it is not needed. Delete the image component from Scroll View.
Scroll View contains a child component Viewport, which contains an image component with the source component UIMask. The rect transform’s W delta and H delta is initially set to -17, which provides a space for the scrollbar. Move the Scrollbar_Vertical to be a child of the Canvas and adjust the Scroll View’s rect transform W delta and H delta to zero. The Scroll View controls this Viewport mask, which hides child Content outside of the Scroll View. Now drag the Scrollbar_Vertical back to be a child of Scroll_View. Adjust the Scrollbar Vertical’s rect transform as shown below.
The game view should now look as shown below, with the vertical scroll within the background but to the right of the screen.
Add A UI > Panel as a child of the Canvas, naming it Overview_Panel. Delete its image component and adjust the rect transform to have a top of -1010, zeroing the left, right, bottom and pos Z. Temporarily disable Scroll View and Border_Panel, to add six UI > Text objects and one UI > Raw Image, adjusting their positions to appear as shown below. This process is similar to that shown the Claim_Number_txt object described earlier.
Replacing the Viewport’s Content game object with the Overview_Panel. This panel is oversized and is masked by the Viewport. Now enable the Scroll View and Border_Panel. The hierarchy window should appear below, as the order is important.
The claim overview screen is now complete with scrolling content view, as shown below.
Key learning is that a scrolling window has three critical elements: 1) the view area set by Scroll View’s rect transform, 2) the mask provided by Viewport, and 3) the content for the scroll view, in this case provided by the Overview_Panel.
This article uses assets from GameDevHQ Filebase.
