- Home /
set child control size and child force expand on a grid layout
How can I in unity grid layout component set option child control size and child force expand like in horizontal and vertical layout. And if there isn't, can you point out away to do that with another component combine with grid layout component.
Answer by RodrigoAbreu · Nov 19, 2018 at 04:16 AM
You can achieve that from a script attached to your grid layout object and it depends on the setup of your gridLayout, something like this.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class GridLayoutAutoExpand : MonoBehaviour
{
public GridLayoutGroup gridLayout;
public CanvasScaler canvasScaler;
public int amountPerRow = 3;
void Start ()
{
RecalculateGridLayout();
}
void RecalculateGridLayout ()
{
if(gridLayout != null)
{
gridLayout.constraint = GridLayoutGroup.Constraint.FixedRowCount;
int count = gridLayout.transform.childCount;
Vector2 scale = canvasScaler.referenceResolution;
Vector3 cellSize = gridLayout.cellSize;
Vector3 spacing = gridLayout.spacing;
int amountPerColumn = count / amountPerRow;
float childWidth = (scale.x - spacing.x * (amountPerRow-1)) / amountPerRow;
float childHeight = (scale.y - spacing.y * (amountPerColumn-1)) / amountPerColumn;
cellSize.x = childWidth;
cellSize.y = childHeight;
gridLayout.cellSize = cellSize;
}
}
}
And in runtime it's recalculated to be like this (considering the original spacing).
Answer by adrianfrancisco · Feb 23 at 12:36 PM
EDIT: Nevermind my comment, I just discovered that by setting the canvas to scale with screen size, and set Match to 0 (Match width only) it works the same, so no need for the script
What worked for me was just multiplying the cell size by the ratio of the resolutions. So The resolution in which I has working and setting up everything was 1920*1080, and then since I was going to work with different devices like phones and tablets I found the device's resolution with Display.main.renderingHeight and Display.main.renderingWidth. They might be switched in my code because the mobile phones are meant to be used in Portrait mode. Anyways this code worked for me, it took me a time to figure it out since I couldn't make the previous answer by RodrigoAbreu work. There's a strange constant that I have to multiply to when the device's ratio is higher than the normal HD resolution, and I don't know why, it as just trial and error. But when that ratio is smaller, like in phones, it works and it makes sense.
Also important, I wanted to keep it squared, that's why in the end childHeight = childWidth, but if it is not meant to be squared then probably you'll need to add childHeight = cellSize.y * (ratioDevice / ratioHD); etc.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class GridLayoutAutoExpand : MonoBehaviour
{
public GridLayoutGroup gridLayout;
public CanvasScaler canvasScaler;
void Start()
{
RecalculateGridLayout();
}
void RecalculateGridLayout()
{
if (gridLayout != null)
{
Vector2 resolutionRender = new Vector2(Display.main.renderingHeight, Display.main.renderingWidth);
float ratioDevice = resolutionRender.x / resolutionRender.y;
float ratioHD = 1080f / 1920f;
Vector3 cellSize = gridLayout.cellSize;
float childWidth;
float cosmologicConstant = 11f / 0.1875f; //I have no idea why do I need to multiply by this number if ratioDevice > ratioHD.
if (ratioDevice <= ratioHD)
{
childWidth = cellSize.x * (ratioDevice / ratioHD);
}
else
{
childWidth = cellSize.x * (ratioDevice / ratioHD) - (ratioDevice - ratioHD) * cosmologicConstant;
}
float childHeight = childWidth;
cellSize.x = childWidth;
cellSize.y = childHeight;
gridLayout.cellSize = cellSize;
}
}
}
Your answer
Follow this Question
Related Questions
Multiple Cars not working 1 Answer
Distribute terrain in zones 3 Answers
Change each cell size based on amount of text in grid layout group 1 Answer
Dynamically added buttons aren't aligned in GridLayoutGroup 0 Answers
An OS design issue: File types associated with their appropriate programs 1 Answer