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 hierarchy:

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 childerns (Image components)) :

Horizontal layout group: Child Alignment: Middle Center

Control Child Size: Width (checked), Height(checked)

Use Child Scale: Width (not checked), Height(not checked)

Child Force Expand: Width (checked), Height(checked)

And i get this result: alt text

Instead of this:

` alt text

Why is a child fit to screen, instead of having the size of the screen and side to side to one another? How can I do this?

EDIT: What I actually want to achieve, 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 this 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 this for a couple of hours and thinking 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);
         }
     }
 }

This sets the size delta of the child objects in your scroll view, to the size of your canvas. Also in Editor mode. And since the Horizontal layout group does not control child size, it just works! :)

Hope this helps for anyone who might have this 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

Follow this Question

Related Questions