Unity3D ScrollRect flexible layout recipe

Unity3D_ScrollRect.md

ScrollRect Layout recipe

Used for creating a scrollable list of items, such as a chat panel.

• Create a new ScrollRect component
• Navigate to its Content child
• Add a VerticalLayout component
  • set Child Controls Size → width: true, height: true
  • set Child Force Expand → width: false, height: false
  • set the padding / spacing to whatever you like
• Add a ContentSizeFitter
  • set HorizontalFit: Unconstrained
  • set VerticalFit: Preferred Size

If you add a GameObject to the Content's RectTransform programatically; don't forget to use go.SetParent(contentRect, false); The false argument is for using the relative parent transform, not the world transform which might scale the gameobject.

Add width-filling basic component

• Add any UI component to the Content child of the Scroll Rect
• Add to that an ElementLayout component
  • set FlexibleWidth: 1
  • set other preferred or minimal layout settings if you like

Add width-filling HorizontalGroup component

• Same as above, but also add a HorizontalGroup with pretty much the same layout setup as the VerticalGroup. It won't interfere with the layout of its parent layout group.
  • set Child Controls Size → width: true, height: true
  • set Child Force Expand → width: false, height: false If you now add multiple children with varying FlexibleWidth they will auto-flow nicely