Ugui exercise (5) scrollview

I. Related Components

• Scrollrect
• Mask
• Grid layout Group
• Scrollbar

Step 2

1. Create a panel named scrollrect and add the scrollrect component.

2. Create a sub-panel under scrollrect, name it grid, and add the grid layout group component.

3. Create an image under the grid, press Ctrl + D, and copy multiple images.

4. In the scene view, you can see the image arrangement (Note: two rows are arranged)

5. Arrange the image in the grid into a row. Practice: stretch the length of the grid and extend it.

6. In the game view, we can see that the image has exceeded scroll rect.

7. Add a mask component to scroll rect

8. After the mask component is added, the image is no longer exceeded, but it still cannot be drag

9. set parameters

10. After the parameters are set, the drag is ready.

2.2 add scrollbar

11. Create a panel named hscrollbar and add the scrollbar component.

12. Create an empty gameobject under hscrollbar, name it stretch, add the rect transform component, and set stretch to all

13. Create an image under stretch named Handler

14. Set handler parameters for hscrollbar

15. Set horizontal scrollbar for the scrollbar at the same time

Iii. Scroll view Effect

Ugui exercise (5) scrollview