unity3d - How To Arrange a Desain Gameobject or UI to become Scrollable using Scroll Rect ? Unity C#

Question

Please help me..

How to arrange gameobject or UI to become like the screenshot and make it scrollable using scroll rect ?

The UI must be arrange like screenshot.

There is a border yellow contain the UI and it must be scroollable. and then there is a cyan border contain 5 Slot item or more and scrollable too. it can be generate automatically or manual. And then there is a magenta border contain 3 button UI. Button 1, button 2, and button 3. Each button have different size.

Why it must be scrollable ? Because The Cyan border Contain and the Magenta border contain can be more than one. So if it not scrollable then the object wouldn't enough to show in the yellow border box.

I have try to make it for 1 day and i can't finish it.

Please help me how to finish it and how to make it step by step.

if you have any question just comment it.

Thanks A lot

Answer 1

I found the answer myself.

That is how it work.

1. Create Gameobject Name Panelprocess In the Panelprocess add component : image, mask and scroll rect

2. Create child Gameobject Panelproceess Name ListProcess

   In the ListProcess add component : Grid Layout Group and contain size fitter at Grid Layout Group component set the value like below :

   cell size : x ( 285 ) y ( 65 ) constraint : fixed column count constraint count : 1

   at Contain size fitter set the value like below :

   horizontal fit : preffered size vertical fit : preffered size

3. Create child Gameobject ListProcess Name Item1 (UI Image), Button1 (UI Image), Item2 (UI Image), Button2 (UI Image)

4. Create child Gameobject Item1 Name Slot1 (UI Image), Slot2 (UI Image), Slot3 (UI Image), Slot4 (UI Image), Slot5 (UI Image)

   Note : Arrange the position and size of slot according to the screenshot Do step 4 for Item2 too

5. Create child Gameobject BUtton1 Name Btn1, Btn2, Btn3 Note : Arrange the position and size of each btn1, btn2, btn3 accroding to the screenshot. Do step 5 for Button2 too

6. Back to gameobject Panelprocess at Panelprocess component : Scroll Rect (set the setting like below) :

   content : (Drag the ListProcess gameobject to content) Horizontal : unchecked vertical : checked MOvement Type : Elastic

Now Play it. The Grid Layout Group now contain and object with a different size and scrollable.

Done