How to make child of layout group always fit the screen size and be placed side by side?

Question

Hello, I have a next gameobject $$anonymous$$erarchy:

EDIT: Be aware: The screen is indicated by 4 arrows pointing at 4 corners of the 2 images I gonna post next.

Canvas :::: UI Scale Mode: Scale With Screen Size

    l
   Scroll View :::: Anchors: Stretch, Stretch , left:0 , right:0 , top:0, bottom: 0
            l
        Viewport :::: Anchors: Stretch, Stretch , left:0 , right:0 , top:0, bottom: 0
                  l
              Content :::: Anchors: Stretch, Stretch , left:0 , right:0 , top:0, bottom: 0

Content has: (beside 3 c$$anonymous$$lderns (Image components)) :

Horizontal layout group: C$$anonymous$$ld Alignment: Middle Center

Control C$$anonymous$$ld Size: Width (checked), Height(checked)

Use C$$anonymous$$ld Scale: Width (not checked), Height(not checked)

C$$anonymous$$ld Force Expand: Width (checked), Height(checked)

And i get t$$anonymous$$s result: alt text

Instead of t$$anonymous$$s:

` alt text

Why is a c$$anonymous$$ld fit to screen, instead of having the size of the screen and side to side to one another? How can I do t$$anonymous$$s?

EDIT: What I actually want to ac$$anonymous$$eve, is to have an array of gameobjects with an Image component, that is always having a screen size and be placed side by side to one another. And when I slide left or right on my screen, to move images left or right (that's why I put it in scroll view's content).

Answer 1

I don't know if you're still looking for an answer to t$$anonymous$$s question, since it has been some time. But since a lot of people follow it, I thought lets answer with the solution I just found after working on t$$anonymous$$s for a couple of hours and t$$anonymous$$nking way way to difficult.

The solution is actually pretty simple. You have a scrollview with a horizontal layout group component and content size fitter on the content object.

alt text

I set it up like the image above. Then, on your content objects you add the following code

 using UnityEngine;
 
 namespace _Code {
     [ExecuteInEditMode]
     public class ForceUpdateRectToMainCanvas : MonoBehaviour {
         [SerializeField] private RectTransform mainCanvas;
         private RectTransform rectTransform;
 
         private void OnEnable()
         {
             UpdateRect();
         }
 
         private void OnRectTransformDimensionsChange()
         {
             UpdateRect();
         }
 
         private void UpdateRect()
         {
             rectTransform = GetComponent<RectTransform>();
             rectTransform.sizeDelta = new Vector2(mainCanvas.sizeDelta.x, mainCanvas.sizeDelta.y);
         }
     }
 }

T$$anonymous$$s sets the size delta of the c$$anonymous$$ld objects in your scroll view, to the size of your canvas. Also in Editor mode. And since the Horizontal layout group does not control c$$anonymous$$ld size, it just works! :)

Hope t$$anonymous$$s helps for anyone who might have t$$anonymous$$s issue now or in the future.

How to make child of layout group always fit the screen size and be placed side by side?

1 Reply

Your answer

Welcome to Unity Answers

Follow this Question

Related Questions