Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 14 Next capture
2021 2022 2023
2 captures
12 Jun 22 - 14 Jun 22
sparklines
Close Help
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
0
Question by lv2lrn4lf_unity · Nov 19, 2018 at 03:22 AM · c#gridlayout

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.

Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

2 Replies

· Add your reply
  • Sort: 
avatar image
2

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;    
         }
     }
 }

alt text

And in runtime it's recalculated to be like this (considering the original spacing).

alt text


capture.png (7.1 kB)
capture1.png (7.0 kB)
Comment
Add comment · Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image CharlesFSG · Aug 21, 2021 at 02:19 AM 0
Share

Thank you sir!

avatar image
0

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;
         }
     }
 }
Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this Question

Answers Answers and Comments

562 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

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

Avoid new lines between elements inside a EditorWindow 1 Answer


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges