[Unity] Basic usage of Scroll View

1. Rendering


2. Target function:

(1) Place a series of Toggles in the limited space on the left, and slide to select different Toggles.

(2) Slide the text page/slider to see all the text

3. Implementation tools:

   Scroll View (scroll view, can be created at GameObject->UI->Scroll View)

4. Scroll View analysis:


(1) The Scroll Rect component is hung on the Scroll View object, in which Content, Viewport, and Vertical Scrollbar have been automatically specified (if you add a Scroll Rect component to the game object, pay attention to assigning values ​​to these properties, where Content and Viewport are required).

(2) Briefly introduce the common properties of this component. Because the reason for using the scroll view is that the limited space cannot display enough content, so two parts must be specified during production: the limited space to be displayed, and the full content to be displayed.

         All that really needs to be displayed is the Content section. You can add Layout components (such as Vertical Layout or Grid Layout, etc.) to Content to organize the layout of UI elements. When editing, you will find that Content beyond the boundaries of the Scroll View cannot be seen. This is because there is a Mask component on the Viewport, which defines the "limited space for display" through the mask, which can be modified by directly changing the size of the Viewport.

(3) In addition, pay attention to the Movement Type attribute. Generally, I choose Clamped, and there will be no displacement of Content when sliding, which is more comfortable. If you have selected Clamped and the displacement will occur, you can check whether the Content fills the Viewport.

(4) Interia property: If checked, there will be a feeling of inertia when sliding, and Deceleration Rate is the speed of stopping.

(5) The Visibility property below the Scrollbar, "Auto Hide And Expand Viewport" means: If the content of the Content is all within the display range, the Scrollbar will be automatically hidden.

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325641505&siteId=291194637