Tasharen Entertainment Forum

Support => NGUI 3 Documentation => Topic started by: ArenMook on November 23, 2013, 03:06:56 AM

Title: UIGrid
Post by: ArenMook on November 23, 2013, 03:06:56 AM
Overview

UIGrid is a helper script that lets you easily arrange widgets into a fixed-size grid. It can be used both at edit time as well as run-time. If you want variable size cells instead, you can use the UITable (http://www.tasharen.com/forum/index.php?topic=6758) instead.

(http://www.tasharen.com/ngui/uigrid.jpg)

To use UIGrid, select a panel, right-click anywhere in the scene view, and choose the Grid from the [/b]Create menu. You may also simply attach the UIGrid component to any empty game object.

(http://www.tasharen.com/ngui/creategrid.jpg)

The initial Arrangement determines which way the children will be positioned. Horizontal means they will extend toward the right, and Vertical means they will extend downwards.

Max Per Line field controls the number of columns in the Horizontal arrangement, and the number of rows in the Vertical arrangement.

Cell Width and Height determines the spacing between the items within the grid.

By default, the Grid will simply reposition all of its children, and the order will be the order that the children happen to have been created. If you want to change this and sort them in a specific order, you can name them alphabetically ("001", "002", "003", etc), and check the Sorted checkbox. Doing so will make the Grid sort them in order first before adjusting their position.

Lastly, if you want to keep the spacing left by invisible (disabled) children, turn off the Hide Inactive flag. By default this flag is on, and invisible children are simply ignored.

Pro-Tip

The Grid is useful for positioning things at run-time, but you can also execute it at Edit time. Simply right-click it and choose the Execute option. You can then safely delete the component if you don't need it.

(http://www.tasharen.com/ngui/execute.jpg)

Class Documentation

http://tasharen.com/ngui/docs/class_u_i_grid.html

If you have a question regarding this component or would like me to clarify something, just post a reply here.
Title: Re: UIGrid
Post by: optimisticmonkey on December 07, 2013, 12:42:10 PM
How do I center the grid in the parent container?
Title: Re: UIGrid
Post by: ArenMook on December 07, 2013, 04:11:28 PM
Grid always begins at its origin point. To center it, just offset its local position by (number of children * cell height or width * 0.5).
Title: Re: UIGrid
Post by: dominus85 on December 08, 2013, 06:06:54 AM
The problem is when you have a dynamic number of children that change at runtime.. You cannot set this from editor..

Would be great to be able to set the pivot point for the grid
Title: Re: UIGrid
Post by: charliehelman on January 11, 2014, 03:53:54 PM
The problem is when you have a dynamic number of children that change at runtime.. You cannot set this from editor..

Would be great to be able to set the pivot point for the grid

I have the same issue. It would be nice if this functionality was supported by UIGrid. Still, doesn't seem like a workaround would be too complicated. I'll see if I can't get something working myself.

Edit: I modified the UIGrid script to add this functionality. I added a drop down menu to the UIGrid component in inspector for selecting alignment (right, center, and left) and based on that selection modified the local position of the grid accordingly in the Reposition() method. Is it okay if I share it the code?

My additions:
  1.         public enum Alignment
  2.         {
  3.                 Left,
  4.                 Centered,
  5.                 Right,
  6.         }
  7.  
  8.         public Alignment alignment = Alignment.Left;
  9.  
  10. // ...Snip...
  11.  
  12.                 switch (alignment)
  13.                 {
  14.                         case Alignment.Left :
  15.                                 myTrans.localPosition = new Vector3 (0f, myTrans.localPosition.y, myTrans.localPosition.z);
  16.                                 break;
  17.  
  18.                         case Alignment.Centered :
  19.                                 float centerOffset = myTrans.childCount * cellWidth * 0.5f;
  20.                                 centerOffset = -centerOffset + (centerOffset * 1/myTrans.childCount);
  21.                                
  22.                                 myTrans.localPosition = new Vector3 (centerOffset, myTrans.localPosition.y, myTrans.localPosition.z);
  23.                                 break;
  24.  
  25.                         case Alignment.Right :
  26.                                 myTrans.localPosition = new Vector3 (-(myTrans.childCount - 1) * cellWidth, myTrans.localPosition.y, myTrans.localPosition.z);
  27.                                 break;
  28.                 }
  29.  

The entire file:
  1. //----------------------------------------------
  2. //            NGUI: Next-Gen UI kit
  3. // Copyright © 2011-2014 Tasharen Entertainment
  4. //----------------------------------------------
  5.  
  6. using UnityEngine;
  7. using System.Collections.Generic;
  8.  
  9. /// <summary>
  10. /// All children added to the game object with this script will be repositioned to be on a grid of specified dimensions.
  11. /// If you want the cells to automatically set their scale based on the dimensions of their content, take a look at UITable.
  12. /// </summary>
  13.  
  14. [AddComponentMenu("NGUI/Interaction/Grid")]
  15. public class UIGrid : UIWidgetContainer
  16. {
  17.         public delegate void OnReposition ();
  18.  
  19.         public enum Arrangement
  20.         {
  21.                 Horizontal,
  22.                 Vertical,
  23.         }
  24.  
  25.         public enum Alignment
  26.         {
  27.                 Left,
  28.                 Centered,
  29.                 Right,
  30.         }
  31.  
  32.         public Alignment alignment = Alignment.Left;
  33.  
  34.         /// <summary>
  35.         /// Type of arrangement -- vertical or horizontal.
  36.         /// </summary>
  37.  
  38.         public Arrangement arrangement = Arrangement.Horizontal;
  39.  
  40.         /// <summary>
  41.         /// Maximum children per line.
  42.         /// If the arrangement is horizontal, this denotes the number of columns.
  43.         /// If the arrangement is vertical, this stands for the number of rows.
  44.         /// </summary>
  45.  
  46.         public int maxPerLine = 0;
  47.  
  48.         /// <summary>
  49.         /// The width of each of the cells.
  50.         /// </summary>
  51.  
  52.         public float cellWidth = 200f;
  53.  
  54.         /// <summary>
  55.         /// The height of each of the cells.
  56.         /// </summary>
  57.  
  58.         public float cellHeight = 200f;
  59.  
  60.         /// <summary>
  61.         /// Whether the grid will smoothly animate its children into the correct place.
  62.         /// </summary>
  63.  
  64.         public bool animateSmoothly = false;
  65.  
  66.         /// <summary>
  67.         /// Whether the children will be sorted alphabetically prior to repositioning.
  68.         /// </summary>
  69.  
  70.         public bool sorted = false;
  71.  
  72.         /// <summary>
  73.         /// Whether to ignore the disabled children or to treat them as being present.
  74.         /// </summary>
  75.  
  76.         public bool hideInactive = true;
  77.  
  78.         /// <summary>
  79.         /// Whether the parent container will be notified of the grid's changes.
  80.         /// </summary>
  81.  
  82.         public bool keepWithinPanel = false;
  83.  
  84.         /// <summary>
  85.         /// Callback triggered when the grid repositions its contents.
  86.         /// </summary>
  87.  
  88.         public OnReposition onReposition;
  89.  
  90.         /// <summary>
  91.         /// Reposition the children on the next Update().
  92.         /// </summary>
  93.  
  94.         public bool repositionNow { set { if (value) { mReposition = true; enabled = true; } } }
  95.  
  96.         bool mReposition = false;
  97.         UIPanel mPanel;
  98.         bool mInitDone = false;
  99.  
  100.         void Init ()
  101.         {
  102.                 mInitDone = true;
  103.                 mPanel = NGUITools.FindInParents<UIPanel>(gameObject);
  104.         }
  105.  
  106.         void Start ()
  107.         {
  108.                 if (!mInitDone) Init();
  109.                 bool smooth = animateSmoothly;
  110.                 animateSmoothly = false;
  111.                 Reposition();
  112.                 animateSmoothly = smooth;
  113.                 enabled = false;
  114.         }
  115.  
  116.         void Update ()
  117.         {
  118.                 if (mReposition) Reposition();
  119.                 enabled = false;
  120.         }
  121.  
  122.         static public int SortByName (Transform a, Transform b) { return string.Compare(a.name, b.name); }
  123.  
  124.         /// <summary>
  125.         /// Recalculate the position of all elements within the grid, sorting them alphabetically if necessary.
  126.         /// </summary>
  127.  
  128.         [ContextMenu("Execute")]
  129.         public void Reposition ()
  130.         {
  131.                 if (Application.isPlaying && !mInitDone && NGUITools.GetActive(this))
  132.                 {
  133.                         mReposition = true;
  134.                         return;
  135.                 }
  136.  
  137.                 if (!mInitDone) Init();
  138.  
  139.                 mReposition = false;
  140.                 Transform myTrans = transform;
  141.  
  142.                 int x = 0;
  143.                 int y = 0;
  144.  
  145.                 if (sorted)
  146.                 {
  147.                         List<Transform> list = new List<Transform>();
  148.  
  149.                         for (int i = 0; i < myTrans.childCount; ++i)
  150.                         {
  151.                                 Transform t = myTrans.GetChild(i);
  152.                                 if (t && (!hideInactive || NGUITools.GetActive(t.gameObject))) list.Add(t);
  153.                         }
  154.                         list.Sort(SortByName);
  155.  
  156.                         for (int i = 0, imax = list.Count; i < imax; ++i)
  157.                         {
  158.                                 Transform t = list[i];
  159.  
  160.                                 if (!NGUITools.GetActive(t.gameObject) && hideInactive) continue;
  161.  
  162.                                 float depth = t.localPosition.z;
  163.                                 Vector3 pos = (arrangement == Arrangement.Horizontal) ?
  164.                                         new Vector3(cellWidth * x, -cellHeight * y, depth) :
  165.                                         new Vector3(cellWidth * y, -cellHeight * x, depth);
  166.  
  167.                                 if (animateSmoothly && Application.isPlaying)
  168.                                 {
  169.                                         SpringPosition.Begin(t.gameObject, pos, 15f);
  170.                                 }
  171.                                 else t.localPosition = pos;
  172.  
  173.                                 if (++x >= maxPerLine && maxPerLine > 0)
  174.                                 {
  175.                                         x = 0;
  176.                                         ++y;
  177.                                 }
  178.                         }
  179.                 }
  180.                 else
  181.                 {
  182.                         for (int i = 0; i < myTrans.childCount; ++i)
  183.                         {
  184.                                 Transform t = myTrans.GetChild(i);
  185.  
  186.                                 if (!NGUITools.GetActive(t.gameObject) && hideInactive) continue;
  187.  
  188.                                 float depth = t.localPosition.z;
  189.                                 Vector3 pos = (arrangement == Arrangement.Horizontal) ?
  190.                                         new Vector3(cellWidth * x, -cellHeight * y, depth) :
  191.                                         new Vector3(cellWidth * y, -cellHeight * x, depth);
  192.  
  193.                                 if (animateSmoothly && Application.isPlaying)
  194.                                 {
  195.                                         SpringPosition.Begin(t.gameObject, pos, 15f);
  196.                                 }
  197.                                 else t.localPosition = pos;
  198.  
  199.                                 if (++x >= maxPerLine && maxPerLine > 0)
  200.                                 {
  201.                                         x = 0;
  202.                                         ++y;
  203.                                 }
  204.                         }
  205.                 }
  206.  
  207.                 switch (alignment)
  208.                 {
  209.                         case Alignment.Left :
  210.                                 myTrans.localPosition = new Vector3 (0f, myTrans.localPosition.y, myTrans.localPosition.z);
  211.                                 break;
  212.  
  213.                         case Alignment.Centered :
  214.                                 float centerOffset = myTrans.childCount * cellWidth * 0.5f;
  215.                                 centerOffset = -centerOffset + (centerOffset * 1/myTrans.childCount);
  216.                                
  217.                                 myTrans.localPosition = new Vector3 (centerOffset, myTrans.localPosition.y, myTrans.localPosition.z);
  218.                                 break;
  219.  
  220.                         case Alignment.Right :
  221.                                 myTrans.localPosition = new Vector3 (-(myTrans.childCount - 1) * cellWidth, myTrans.localPosition.y, myTrans.localPosition.z);
  222.                                 break;
  223.                 }
  224.  
  225.                 if (keepWithinPanel && mPanel != null)
  226.                         mPanel.ConstrainTargetToBounds(myTrans, true);
  227.  
  228.                 if (onReposition != null)
  229.                         onReposition();
  230.         }
  231. }
  232.  
  233.  
I'm very new to programming so I apologize if I made a mistake or my additions are hard to read.
Title: Re: UIGrid
Post by: ArenMook on January 11, 2014, 06:35:27 PM
Sure, thanks.
Title: Re: UIGrid
Post by: mmASH on January 13, 2014, 07:20:43 PM
Should we wait for any updates in new version about this, or will be better write some custom script?  ;)
Title: Re: UIGrid
Post by: ArenMook on January 14, 2014, 06:49:54 PM
UIGrid and UITable improvements are on the list of things to do.
Title: Re: UIGrid
Post by: mmASH on January 15, 2014, 10:11:56 AM
ok, thanks will be waiting for that
also nice to have in UIGgrid something like auto detect for columns count, so it will fit itself into parent  :)
Title: Re: UIGrid
Post by: dominus85 on January 18, 2014, 02:11:06 PM
This is a modified script we use.. I took the original script from this forum somewhere and it's slightly modified

The problems that appear are with the children pivot point but if you use the same for all, you should be cool

  1. //----------------------------------------------
  2. //            NGUI: Next-Gen UI kit
  3. // Copyright © 2011-2013 Tasharen Entertainment
  4. //----------------------------------------------
  5.  
  6. using UnityEngine;
  7. using System.Collections.Generic;
  8.  
  9. /// <summary>
  10. /// All children added to the game object with this script will be repositioned to be on a grid of specified dimensions.
  11. /// If you want the cells to automatically set their scale based on the dimensions of their content, take a look at UITable.
  12. /// </summary>
  13. using System;
  14.  
  15. [AddComponentMenu("NGUI/Interaction/GridPivot")]
  16. public class UIGridPivot : UIWidgetContainer
  17. {
  18.     public enum Arrangement
  19.     {
  20.         Horizontal,
  21.         Vertical,
  22.     }
  23.    
  24.     public enum Pivot
  25.     {
  26.         TopLeft,
  27.         TopCenter,
  28.         TopRight,
  29.         MiddleLeft,
  30.         MiddleCenter,
  31.         MiddleRight,
  32.         BottomLeft,
  33.         BottomCenter,
  34.         BottomRight
  35.     }
  36.    
  37.     /// <summary>
  38.     /// Where should the Pivot point of the grid be?
  39.     /// </summary>
  40.    
  41.     public Pivot pivot;
  42.    
  43.     /// <summary>
  44.     /// Type of arrangement -- vertical or horizontal.
  45.     /// </summary>
  46.    
  47.     public Arrangement arrangement = Arrangement.Horizontal;
  48.    
  49.     /// <summary>
  50.     /// Maximum children per line.
  51.     /// If the arrangement is horizontal, this denotes the number of columns.
  52.     /// If the arrangement is vertical, this stands for the number of rows.
  53.     /// </summary>
  54.    
  55.     public int maxPerLine = 0;
  56.    
  57.     /// <summary>
  58.     /// The width of each of the cells.
  59.     /// </summary>
  60.    
  61.     public float cellWidth = 200f;
  62.    
  63.     /// <summary>
  64.     /// The height of each of the cells.
  65.     /// </summary>
  66.    
  67.     public float cellHeight = 200f;
  68.    
  69.     /// <summary>
  70.     /// Whether the grid will smoothly animate its children into the correct place.
  71.     /// </summary>
  72.    
  73.     public bool animateSmoothly = false;
  74.    
  75.     /// <summary>
  76.     /// Whether the children will be sorted alphabetically prior to repositioning.
  77.     /// </summary>
  78.    
  79.     public bool sorted = false;
  80.    
  81.     /// <summary>
  82.     /// Whether to ignore the disabled children or to treat them as being present.
  83.     /// </summary>
  84.    
  85.     public bool hideInactive = true;
  86.    
  87.     /// <summary>
  88.     /// Reposition the children on the next Update().
  89.     /// </summary>
  90.    
  91.     public bool repositionNow { set { if (value) { mReposition = true; enabled = true; } } }
  92.    
  93.     bool mStarted = false;
  94.     bool mReposition = false;
  95.    
  96.     void Start ()
  97.     {
  98.         mStarted = true;
  99.         bool smooth = animateSmoothly;
  100.         animateSmoothly = false;
  101.         Reposition();
  102.         animateSmoothly = smooth;
  103.         enabled = false;
  104.     }
  105.    
  106.     void Update ()
  107.     {
  108.         if (mReposition) Reposition();
  109.         enabled = false;
  110.     }
  111.    
  112.     static public int SortByName (Transform a, Transform b) { return string.Compare(a.name, b.name); }
  113.    
  114.     /// <summary>
  115.     /// Recalculate the position of all elements within the grid, sorting them alphabetically if necessary.
  116.     /// </summary>
  117.    
  118.     [ContextMenu("Execute")]
  119.     public void Reposition ()
  120.     {
  121.         if (Application.isPlaying && !mStarted)
  122.         {
  123.             mReposition = true;
  124.             return;
  125.         }
  126.        
  127.         mReposition = false;
  128.         Transform myTrans = transform;
  129.  
  130.         // Current column
  131.         int column = 0;
  132.  
  133.         // Current row
  134.         int row = 0;
  135.        
  136.         List<Transform> list = new List<Transform>();
  137.        
  138.         for (int i = 0; i < myTrans.childCount; ++i)
  139.         {
  140.             Transform t = myTrans.GetChild(i);
  141.             if (t && (!hideInactive || NGUITools.GetActive(t.gameObject))) list.Add(t);
  142.         }
  143.        
  144.         if (sorted)
  145.         {
  146.             list.Sort(SortByName);
  147.         }
  148.  
  149.         int columns = list.Count - 1;
  150.         if (maxPerLine > 0)
  151.         {
  152.             columns = list.Count > maxPerLine ? maxPerLine : list.Count - 1;
  153.         }
  154.        
  155.         int rows = 1;
  156.         if (maxPerLine > 0)
  157.         {
  158.             rows = (int)Math.Ceiling((double)list.Count / maxPerLine);
  159.         }
  160.        
  161.         for (int i = 0, imax = list.Count; i < imax; ++i)
  162.         {
  163.             Transform currentChild = list[i];
  164.            
  165.             if (!NGUITools.GetActive(currentChild.gameObject) && hideInactive) continue;
  166.            
  167.             float depth = currentChild.localPosition.z;
  168.             Vector3 pos = new Vector3(0, 0, depth);
  169.            
  170.             switch (pivot)
  171.             {
  172.                 case Pivot.TopLeft:
  173.                 case Pivot.TopCenter:
  174.                 case Pivot.TopRight:
  175.                     pos.y = -cellHeight * row;
  176.                     break;
  177.                 case Pivot.MiddleLeft:
  178.                 case Pivot.MiddleCenter:
  179.                 case Pivot.MiddleRight:
  180.                     pos.y = -cellHeight * (-rows / 2f + row + 0.5f);
  181.                     break;
  182.                 case Pivot.BottomLeft:
  183.                 case Pivot.BottomCenter:
  184.                 case Pivot.BottomRight:
  185.                     pos.y = -cellHeight * (row + 1 - rows);// -cellHeight * lines + cellHeight * y;
  186.                     break;
  187.                 default:
  188.                     break;
  189.             }
  190.            
  191.             switch (pivot)
  192.             {
  193.                 case Pivot.TopLeft:
  194.                 case Pivot.MiddleLeft:
  195.                 case Pivot.BottomLeft:
  196.                     pos.x = cellWidth * column;
  197.                     break;
  198.                 case Pivot.TopCenter:
  199.                 case Pivot.MiddleCenter:
  200.                 case Pivot.BottomCenter:
  201.                     pos.x = cellWidth * (-columns / 2f + column); // -cellWidth * (columns / 2f) + cellWidth * x;
  202.                     break;
  203.                 case Pivot.TopRight:
  204.                 case Pivot.MiddleRight:
  205.                 case Pivot.BottomRight:
  206.                     pos.x = cellWidth * (column - 1 - columns);
  207.                     break;
  208.                 default:
  209.                     break;
  210.             }
  211.            
  212.             if (animateSmoothly && Application.isPlaying)
  213.             {
  214.                 SpringPosition.Begin(currentChild.gameObject, pos, 15f);
  215.             }
  216.             else currentChild.localPosition = pos;
  217.            
  218.             if (++column >= maxPerLine && maxPerLine > 0)
  219.             {
  220.                 column = 0;
  221.                 ++row;
  222.             }
  223.         }
  224.        
  225.         //Debug.LogError(transform.localPosition + " total width : " + totalWidth);
  226.        
  227.         UIScrollView drag = NGUITools.FindInParents<UIScrollView>(gameObject);
  228.         if (drag != null) drag.UpdateScrollbars(true);
  229.     }
  230. }
Title: Re: UIGrid
Post by: seanb on February 01, 2014, 08:16:01 PM
What is the correct way to reposition a vertical grid after loading dynamic data? I used to have this working correctly before UIDraggablePanel was converted to UIScrollView, but I can't seem to get it working since the change. I have searched the forum thoroughly and tried all advice you and others have given. My (condensed) old way of doing it:

  1.  
  2. public GameObject myGrid;
  3. public GameObject myCellPrefab;
  4.  
  5. IEnumerator loadGrid(ArrayList data){
  6.        
  7.         //Empty Grid
  8.         foreach(Transform child in myGrid.transform){
  9.                 NGUITools.Destroy(child.gameObject);
  10.         }
  11.        
  12.         //Load New Data
  13.         foreach(string item_name in data){
  14.                 GameObject item = NGUITools.AddChild(myGrid, myCellPrefab);
  15.                 item.FindChild("Label").GetComponent<UILabel>().text = item_name;
  16.         }
  17.  
  18.         //Adding WaitForEndOfFrame() used to work, now does not help
  19.         //yield return new WaitForEndOfFrame();
  20.  
  21.         myGrid.GetComponent<UIGrid>().Reposition();
  22.  
  23. }
  24.  

I've tried the following with no luck:
- Adding "yield return new WaitForEndOfFrame();" after each block
- Adding "repositionNow=true" after emptying the grid, after loading the grid, or both
- Adding "Reposition()" after emptying the grid, after loading the grid, or both
- Adding "ResetPosition()" to the UIScrollView.
- Using DestroyImmediate instead of Destroy

It looks find on the first load, but after the second load everything is misaligned because the cells are not being destroyed before Reposition() is called. Each load doubles the entries because the items are not being destroyed at all.

-edit-
After struggling with this for days, I found that the only way to get this working correctly is to use Unity's Destroy() to destroy all old entries, followed by WaitForEndOfFrame() . NGUITools.Destroy() does not work in my case, no matter what I try it retains old entries that were supposed to be destroyed.
Title: Re: UIGrid
Post by: ArenMook on February 04, 2014, 03:23:49 AM
You should not be using NGUITools.Destroy while iterating through the list of children, as NGUITools.Destroy unparents the object before destroying it. Unity's own Destroy function does not. So you can Destroy an object, then iterate through the list of children and it would still be there as if nothing happened.

Instead of doing that, do this:
  1. while (myGrid.transform.childCount > 0)
  2.     NGUITools.Destroy(myGrid.transform.GetChild(0).gameObject);
  3. // ...add new data, then:
  4. myGrid.GetComponent<UIGrid>().Reposition();
No need to wait for the next frame either.
Title: Re: UIGrid
Post by: MOST2K2 on February 04, 2014, 12:42:20 PM
Cant find a simple example how to add components programmatically to UIGrid.
I want to use it as a highscore table.
Title: Re: UIGrid
Post by: ArenMook on February 05, 2014, 04:43:03 PM
Use the same NGUITools.AddChild() to add children to a game object that has the UIGrid script attached. UIGrid works with the game object's children. It doesn't have any other lists.
Title: Re: UIGrid
Post by: MOST2K2 on February 06, 2014, 12:21:45 PM
Ok ArenMook.
Could you give any advice how to make a simple scrollable highscore board with 2 columns (player, score)?
Title: Re: UIGrid
Post by: ArenMook on February 08, 2014, 01:27:37 PM
Grid with 1 column. Each row is a prefab with 2 labels underneath. Instantiate these rows under your grid as many times as you need.
Title: Re: UIGrid
Post by: Lautaro on February 11, 2014, 01:00:34 PM
Hi guys! Thanks for a great product. I wanted to ask if its UIGrid i should ask to keep a set of 8 prefabs aligned in a grid, or is it something else? Ive read several things but find it difficult to know what the updated information is. Anyway i get this weird result. It looks like this:
http://i.imgur.com/CHqwhIS.png

This is how i instantiate the prefabs:

  1.                 var grid = GetComponent<UIGrid> ();
  2.                                 for (int i = 0; i < amountOfSlots; i++) {
  3.                                                 //                      GameObject go = Instantiate (ZoneScene.prefab_InventorSlot) as GameObject;
  4.                                                 GameObject go = NGUITools.AddChild (grid.gameObject, ZoneScene.prefab_InventorSlot);
  5.  
  6.                                                 print ("go: " + go);
  7.                                                
  8.  
  9.                                 }
  10.  
  11.                                 grid.Reposition ();
Title: Re: UIGrid
Post by: ArenMook on February 11, 2014, 09:10:29 PM
Yup, that's perfectly fine. I've even used UIGrid to automatically position other things... like 3D game objects.
Title: Re: UIGrid
Post by: Deozaan on March 03, 2014, 04:19:26 PM
I am really confused by the UIGrid Arrangement option. It seems to be backwards.

I'm trying to make a vertical grid (a column of items with 1 item per row, extending up and down vertically on the screen), but selecting "Vertical" makes a horizontal grid, and selecting "Horizontal" makes a vertical grid.

Is this intentional behavior? Common sense as well as your documentation would seem to indicate otherwise.
Title: Re: UIGrid
Post by: Lautaro on March 03, 2014, 04:37:39 PM

I'm trying to make a vertical grid (a column of items with 1 item per row, extending up and down vertically on the screen), but selecting "Vertical" makes a horizontal grid, and selecting "Horizontal" makes a vertical grid.


Because you have MAX PER LINE set to 1. :D
Then it makes one column, and then it starts with next. Set it to 8 or whatever and you will see the difference. (havent tried it but i am pretty sure)
Title: Re: UIGrid
Post by: Deozaan on March 03, 2014, 05:35:50 PM
Because you have MAX PER LINE set to 1. :D
Then it makes one column, and then it starts with next. Set it to 8 or whatever and you will see the difference. (havent tried it but i am pretty sure)

Thank you. That was indeed the problem. I could have sworn I didn't mess with Max Per Line until after the problems started happening, but changing it back to 0 gives me the intended results.

Thanks again!
Title: Re: UIGrid
Post by: blitzer on March 24, 2014, 11:45:52 PM
Is my current understanding that there is no current way to either align or re-size a UIGrid according to its parent at this time? Any clarification is appreciated.
Title: Re: UIGrid
Post by: jimbbq on March 25, 2014, 05:06:20 PM
I have just bought NGUI and began to explore it. it is amazing so far following the tutorial on youtube! thanks a lot for creating such an amazing library!

I have a question on dynamically adding items to the grid and have the grid arrange the item dynamically. I use playmaker, but I am also familiar with c sharp/javascript, so either solutions would be fine.

I have a grid inside scroll view with 3 items which I can scroll vertically. Then I create a button, and when the button is clicked, I want to add a new item into the grid. I learn that (from youtube and this post) to ask the grid to automatically arrange the items, I right click UIGrid script and select execute. But how do I do it when the game is running?

thanks again!

[edit] silly me, as soon as I created this post, I found a solution , which is to call Reposition method...however the newly created items in the grid are not clipped by the scroll view?? also the new items are not draggable despite having UIDragDropItem script. any clue why it is the case?

[edit] I solved it again......now another problem....I have a vertical scroll bar, when the items are added to the grid, the scroll bar display is not updated...how do I resolve it? thanks!
Title: Re: UIGrid
Post by: ArenMook on March 26, 2014, 03:29:56 AM
@blitzer: No, UIGrid is a simple positioning tool. If you want its number of columns and/or rows to vary, create a custom script to change the UIGrid's properties as needed.

@jimbbq: UIScrollView.UpdateScrollBars function can do that for you.
Title: Re: UIGrid
Post by: jimbbq on March 26, 2014, 11:49:40 AM
brilliant!! it works now!

just for future reference, UpdateScrollbars (with small b for bars!) . took me a while to figure out  :-[

Title: Re: UIGrid
Post by: aGosh on April 08, 2014, 03:19:07 AM
Hello!
How can I fix it? I need to remove this indent.
Thanks
Title: Re: UIGrid
Post by: ArenMook on April 09, 2014, 04:09:40 AM
Why do you have so many panels in there? It's hard to tell what's going on. What you're doing has nothing to do with the grid. Grid simply positions children. Your issue is with the way you set up your scroll views. Use the support forum rather than the documentation forum.
Title: Re: UIGrid
Post by: RDeluxe on June 10, 2014, 06:18:45 AM
Hi,

Just to clarify something: can the UIGrid AddChild(Transform) method be used to dynamically add children to a Grid (and display them automatically) ? I tried to use this method (or GetChildList() and then add children to the list), and the size of the method is changing correctly, but the new elements are not displayed.

For the moment I still get the GameObject containing the UIGrid script, and then use NGUI.addChild(T) , but I'm wondering why the other method is not working.

Title: Re: UIGrid
Post by: ArenMook on June 11, 2014, 06:08:20 AM
UIGrid.AddChild is kind of pointless right now. It used to have a point, but due to how Unity stores transform child list it turned out to be not useful at all.

Adding children to the grid's game object is enough. No need to use UIGrid's AddChild.
Title: Re: UIGrid
Post by: RDeluxe on June 12, 2014, 10:55:08 AM
Okay, thank you for your answer.

I have another weird behavior. I don't know if it's due to my wrong understanding of the "pivot" settings :

(http://i.imgur.com/E6CmgNA.png)

I would think that a Top-Right Pivot would make the grid start in the Top right corner of its parent. (The parent scrollview has a "Top" content origin setting).

I must admit that the Grid was kind of hard to settle correctly. Right now I still have some troubles finding the right parameters to get what I want...

For example, I don't quite understand that my centers are not similar (on the y axis) :

(http://i.imgur.com/v0Qr0EF.png)

The centers should be on the same vertical line, right ? (with a "top" pivot parameter, which is "top center").
Title: Re: UIGrid
Post by: ArenMook on June 13, 2014, 06:15:21 AM
Grid's pivot point controls where the origin point will lie. TopRight means the content's top-right-most element will have the local position of (0, 0, 0).
Title: Re: UIGrid
Post by: Fractalbase on June 30, 2014, 04:57:53 PM
I haven't attempted this yet, but is nesting UIGrids possible/advised?
Title: Re: UIGrid
Post by: ArenMook on July 01, 2014, 05:05:03 AM
Sure, it's fine. Grids don't use their bounds in any way. They simply reposition their immediate children.
Title: Re: UIGrid
Post by: ddub on July 26, 2014, 03:26:58 PM
Hey Aren,

I have a UIGrid set up in a scrollbar. The children (my game icons in the grid) are active initially but on start, I have a script that removes some dynamically, based on some previous user-based input. However, because the children are all active initially, the UIGrid isn't repositioning the ones left active immediately. It will update them when I click inside of the scrollview though.

Do I just need to set some check in the update, or delay the grid's positioning for the repositioning to work correctly?
Title: Re: UIGrid
Post by: ArenMook on July 27, 2014, 03:02:44 AM
You should call the Reposition() function yourself after modifying the child list in any way, or enabling/disabling items there. Same goes for calling scroll view's ResetPosition().
Title: Re: UIGrid
Post by: ddub on July 28, 2014, 05:28:59 PM
Ah gotcha, that makes sense. Thanks Aren!
Title: Re: UIGrid
Post by: FDMP on July 31, 2014, 06:33:26 PM
Hello I'm using nested UI Grid to create a Scroll View that shows multiple (pages) matrices of 3x3 elements.
Here is the Hierarchy:

ScrollView
--Grid                      //Main grid
----Grid                   //First page
--------Element1
--------Element2
--------Element3
--------Element4
--------Element5
--------Element6
--------Element7
--------Element8
--------Element9
----Grid                   //Second page
--------Element10
--------Element12
--------Element13
--------Element14
--------Element15
--------Element16
--------Element17
--------Element18
--------Element19

I can successfully generate pages. I parent the the elements to the page grid and then in the page grid, call:
  1. UIGrid.Reposition();
So far so good. The problem lies when y call UIGrid.Reposition() in the main grid, I also call:
  1. ScrollView.ResetPosition();
but the pages are stack one on top of another. I noticed that if I call ScrollView.ResetPosition() and UIGrid.Reposition() in the frame after I fill the elements, it works well.

It's a bug or I'm missing something? I'm using NGUI 3.6.8

Thanks.
Title: Re: UIGrid
Post by: ArenMook on August 01, 2014, 09:37:32 PM
You're basically trying to reset position of the scroll view before widgets are actually there. If I understand what you're doing correctly, this is what you're doing:

- Create Element1
--- Element1 Awake()
--- Element1 OnEnable()
- Create Element2
--- Element2 Awake()
--- Element2 OnEnable()
...
- Reposition()
- ResetPosition()

The widgets aren't going to be added to the panel until after their Start() executes, which happens later. If you want it to be immediate, call the widget's CreatePanel() function.
Title: Re: UIGrid
Post by: brianmyrick on October 22, 2014, 03:18:06 PM
How would I go about limiting a grid so that I can't drag more than X number of children into it?
Title: Re: UIGrid
Post by: ArenMook on October 23, 2014, 03:46:10 PM
ExampleDragDropItem.OnDragDropRelease has the code for what happens when you drop something. Write your own item class that will do some logic checking for whether its possible to drop the item there or not.
Title: Re: UIGrid
Post by: cartman412 on December 02, 2014, 02:16:09 PM
Haven't seen this asked so I hope it's not repeated.

Is there any way to create a grid with non-uniform elements and make them stick to one after the other?

To expand a bit on the question:

I have a vertical grid, with elements of different heights and I want them to appear one right after the other. This would be extremely simple if all the elements had the same height but it seems that a the ngui grid cannot deal with elements of different sizes?

Would I have to customize the script in order to achieve this?

Title: Re: UIGrid
Post by: ArenMook on December 04, 2014, 04:25:19 AM
No, grid is always uniform. What you are thinking of is UITable.
Title: Re: UIGrid
Post by: cartman412 on December 04, 2014, 08:00:13 AM
You are right ^^ Thank you :)
Title: Re: UIGrid
Post by: crust on December 08, 2014, 02:44:20 PM
Hi I think I might have found an odd little bug.

What I'm doing is moving a transform from one UIGrid to another UIGrid and I'm using the smooth tween option.  When I move the first transform, it tweens into place correctly -- however, once it is in place, its spring position component is never activated again and it gets stuck in the 0,0,0 position.

The problematic code is this if statement:
  1. if (animateSmoothly && Application.isPlaying && Vector3.SqrMagnitude(t.localPosition - pos) >= 0.0001f)
  2. {
  3.         SpringPosition sp = SpringPosition.Begin(t.gameObject, pos, 15f);
  4.         sp.updateScrollView = true;
  5.         sp.ignoreTimeScale = true;
  6. }
  7. else t.localPosition = pos;
  8.  

Specifically this little bit that doesn't turn on the spring position component when the distance needed to travel is very small:
  1. Vector3.SqrMagnitude(t.localPosition - pos) >= 0.0001f
  2.  

The result is that its position is always stuck at 0,0,0 -- because the x and y always start at 0,0 in the for loop and the second half of reset position (apply origin offset) will do its lerp on the spring position component (which never gets turned on)
Title: Re: UIGrid
Post by: ArenMook on December 09, 2014, 02:04:17 PM
Hmm... interesting. Well, just change that part to:
  1.                         if (animateSmoothly && Application.isPlaying)
  2.                         {
  3.                                 SpringPosition sp = SpringPosition.Begin(t.gameObject, pos, 15f);
  4.                                 sp.updateScrollView = true;
  5.                                 sp.ignoreTimeScale = true;
  6.                         }
  7.                         else t.localPosition = pos;
Title: Re: UIGrid
Post by: crust on December 09, 2014, 06:54:27 PM
yep  :D
Title: Re: UIGrid
Post by: amraffay on May 05, 2015, 01:13:03 PM
Hi there,
Currently we have to give fix column/row numbers to Grid, what if?

we apply anchors to grid, and grid automatically use the needed column/rows, so if i see it on mobile it shows 2 columns if i see it on desktop it shows 10 columns.

One more question is currently we have to give fixed size column sizes, i know table uses variable size, but instead of we giving size to grid, grid could use the size based on children?

Regards
Title: Re: UIGrid
Post by: ArenMook on May 05, 2015, 10:50:27 PM
The grid component is very simple. It has no dimensions, and there is nothing to anchor. Likewise the columns/rows remains a fixed number. Nothing is preventing you from writing a script that will adjust the grid's number of columns/rows then calling Reposition() on the grid though.
Title: Re: UIGrid
Post by: amraffay on May 06, 2015, 12:31:46 AM
but an update for something similar'd be great for noobs like me.
Title: Re: UIGrid
Post by: Dune on October 21, 2016, 12:49:46 AM
People for the last two years have asked for an align / anchor for the grid, and I've seen the replies, that UIGrid has no positioning. And that is true, it doesn't. But the GameObject it is loaded into does. Should I instead AddComponent the UIGrid onto the same GameObject as the UIScrollView? (edit: tried this, it didn't work)

When I run the game normally, it is fine, but when I resize the game window to maximum the grid pops off the Scroll View and all my items are hidden. If then in the scene view I grab the arrow control (W) and drag the grid's GameObject back to the scroll view, I can see my items. Since I have to use W to move the grid, it appears it has alignment.

What is the right solution?

Edit - Maybe found a solution, but now I can't scroll the scrollview...

Added a widget as a child of the Scroll View. Widgets have Anchors.
Then added the grid's GameObject as a child of that. Moved it to the desired position.
Removed the grid.Reposition() I was calling in script and the sv.ResetPosition() I was calling before and after the AddChild instantiates.
Run & Resize, the grid stays anchored in place.

Title: Re: UIGrid
Post by: ArenMook on October 24, 2016, 07:15:51 AM
Yeah that's a good approach. All widgets have anchors, while the grid just repositions children. If the grid's parent is anchored, the grid itself will appear anchored using the pivot point of its parent.
Title: Re: UIGrid
Post by: sintua on July 04, 2017, 12:51:11 PM
What is the purpose of UIGrid.ConstrainWithinPanel()?

If the UIGrid only repositions objects, then I don't know how it'd also constrain to a panel, and though I see the code I can't figure out what it's actually supposed to do.
I thought this would change the grid size or limits to fit it in the dimensions of the parent panel, or ideally work with Cell Snap to fit all the elements within the panel, but it seems to have no effect whether it's on or off.
Title: Re: UIGrid
Post by: ArenMook on July 06, 2017, 06:30:27 AM
IIRC it calculates the dimensions of the grid's content and positions the grid so that the contents fit within the panel's bounds, or at least positioning it so that the grid is aligned in the panel's top left corner. It's basically just an alignment tool.