This is more for my future reference than anything else.
You can either watch an hour-long tutorial. Or you can look at this list of steps. Because it’s way too complicated for any sane human being to memorize.
Here’s the hour-long tutorial:
The following tutorial will make a scrollable panel with the following features:
- Vertical scroll
- Buttons (or any other content) have their preferred sizes
- The scrollable panel automatically scales to fit the content
- The content is clipped/masked using an image mask.
Here is your GameObject tree structure with names. I will be referring back to this. Create blank objects with this tree structure.
Panel Background ScrollView ScrollContent Button0 Button1 (other content)
Here’s what each object does, the components it needs and the settings required:
Panel is just the parent. Stuff it wherever and change its size however you like.
- Rect Transform Component. No specific settings required.
A background graphic for your scrollable area. It’s not required.
- Rect Transform Component (added automatically). No specific settings required.
- Canvas Renderer Component (added automatically). No specific settings required.
- Image Component. No specific settings required.
Sets up how the content is viewed.
- ScrollRect Component. Set the Content to ScrollContent.
- Mask Component. No specific settings.
- Canvas Renderer Component (added automatically).
- Image Component. Set an image to set up a clipping mask for the content in the scroll view.
Deals with layout.
- Vertical Layout Group Component. Disable force child expand Height.
- Content Size Fitter Component. Set vertical fit to “Preferred Size”.
Button0, Button1 etc.
- Layout Element Component. Set up the Min Height to something sane like 25
- Any components you want, labels, buttons whatever
And that’s all you need to do to set up a vertical scrollable list!
If you want scrollbars, good luck.