It’s been few days I have been working to create a vertical scroll view with grid layout , everything works fine except i want that the number of column count to be 5 for the max iDevice and i want that count to decrease for when the device is smaller ,currently i have my horizontal checkbox for scrollrect unmarked as i don’t want horizontal scroll but that puts the scroll items out of the screen .
How can i achieve such a behaviour with grid layout.
You mean like this? Note the slider on the right. It’s also “drag’n’scrollable”.
In your UI canvas, create a panel, and a slider that will serve as scrollbar.
Create a secondary panel within the first panel so it fits, and assign these components in this order:
Items containers needs to have:
- Mask
- ScrollRect - inside assign your child canvas as Content, and optionally any sliders you may have.
Item Panel (the child panel) needs to have:
- Grid layout - put the size of the items to your liking, or change the Constraint to “Fixed Columns count”
- Content Size Fitter - this will dynamically size the panel to accomodate contents, so if it gets larger than parent it will be scrollable (and won’t be visible outside of parent because parent has Mask).
Be careful when you instantiate prefabs into the Item Panel - make sure that after instantiating you put it in the correct layer, and always manually set it’s RectTransform’s localScale to 1 (for some reason no matter what I did, scale always went to hell).
Thanks a lot . sorted content size fitter problem by setting "Grid layout constraint with fixed row count ".
It makes flexible grid layout with scrolling.