Search Unity

  1. Looking for a job or to hire someone for a project? Check out the re-opened job forums.
    Dismiss Notice
  2. Good news ✨ We have more Unite Now videos available for you to watch on-demand! Come check them out and ask our experts any questions!
    Dismiss Notice

Order of elements in Layout Groups

Discussion in 'UGUI & TextMesh Pro' started by dcarrigg, Sep 10, 2014.

  1. dcarrigg

    dcarrigg

    Joined:
    May 21, 2014
    Posts:
    24
    When using a Horizontal, Vertical, or Grid Layout Group, is there any way to control the order of the elements?

    I imagine this is a common thing: You add a handful of elements to a panel with a Layout Group, then want to make sure they're sorted by their display name (or id, or value, or whatever other property interests you).
     
  2. phil-Unity

    phil-Unity

    Unity UI Lead Developer Unity Technologies

    Joined:
    Nov 23, 2012
    Posts:
    1,191
    My understanding is that you order the children of the layout in the order you want them to appear.
     
  3. dcarrigg

    dcarrigg

    Joined:
    May 21, 2014
    Posts:
    24
    Interesting.

    I'm adding elements to my UI dynamically at runtime through scripts. Would this mean they're sorted based on the order in which they're added? To change the order, would I need to remove them all and then re-add them to the parent panel in the order I want to see?
     
  4. ortin

    ortin

    Joined:
    Jan 13, 2013
    Posts:
    221
    Yes.
    No.
    http://docs.unity3d.com/460/Documentation/ScriptReference/RectTransform.html
    SetAsFirstSibling - Move the transform to the start of the local transfrom list.
    SetAsLastSibling - Move the transform to the end of the local transfrom list.
    SetSiblingIndex - Sets the sibling index.
     
  5. dcarrigg

    dcarrigg

    Joined:
    May 21, 2014
    Posts:
    24
    Perfect, thanks!
     
  6. ortin

    ortin

    Joined:
    Jan 13, 2013
    Posts:
    221
  7. Raptcha911

    Raptcha911

    Joined:
    Sep 19, 2014
    Posts:
    17
    exactly wat i was searching for from days!!!..Thansks ur a life saver!! :) :p
     
  8. JonnyHilly

    JonnyHilly

    Joined:
    Sep 4, 2009
    Posts:
    742
    when you use SetSiblingIndex does the index have to be a valid number (e.g. 0-9 if there are 10 elements) or can it be an arbitrary integer outside the 0-9 range? .... used for say weighted priority sorting.
     
  9. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    Interesting... but Probably not?!? :[

    when i have kissUI autosort, it does the same thing... well, except for children in a Layout. It sets the immediate children at the same Depth. Does unityUI do that too, i wonder.
     
  10. zero_null

    zero_null

    Joined:
    Mar 11, 2014
    Posts:
    159
    I have a my list sorted but I have no idea how can I apply that sorting to their siblings.
     
  11. NatCou

    NatCou

    Joined:
    Jan 29, 2017
    Posts:
    15

    ///Instantiate your stuff into panel and then randomise
    GameObject _card = Instantiate(card_prefab, transform.position, transform.rotation) as GameObject;
    _card.transform.position = tempPositionAndScale;
    _card.transform.SetParent(cardPanel.transform, false);


    //or order the child elements in panel..
    public void OrderPanelAlpabetically()
    {
    GameObject[] count = GameObject.FindGameObjectsWithTag("CardsPanel");
    GameObject[] countOrdered = count.OrderBy(go => go.name).ToArray();
    for (int i = 0; i < countOrdered.Length; i++)
    {
    countOrdered[i].transform.SetSiblingIndex(i);
    }
    }
     
    Last edited: Mar 16, 2019
  12. fraeri

    fraeri

    Joined:
    Nov 8, 2018
    Posts:
    35
    I'm having the Problem, that I need the vertical layout group inverted. So first child should be at the bottom, second on top of that. But in the Hierarchie the should remain the same. Anybody got a solution for that?
     
    ThisIsDangerous likes this.
  13. ThisIsDangerous

    ThisIsDangerous

    Joined:
    Dec 3, 2018
    Posts:
    29
    That's what I needed too. This doesn't seem to be done right out of the box though it really could have been a basic functionality.

    To make it work bare bones you have to reverse the loop inside the Unity UI's class HorizontalOrVerticalLayoutGroup in the SetChildrenAlongAxis method.

    Change the following in two places:
    Code (CSharp):
    1. for (int i = 0; i < rectChildren.Count; i++)
    to a reverse:
    Code (CSharp):
    1.  for (int i = rectChildren.Count - 1; i >= 0; i--)
    This should effectively reverse distribution along axes and depth sorting too.

    You will probably want to be able to toggle the reversion, so make something like this:
    Code (CSharp):
    1. for (int i = m_Reverse ? rectChildren.Count - 1 : 0; m_Reverse ? i >= 0 : i < rectChildren.Count; i += m_Reverse ? -1 : 1)
    Be sure to expose 'm_Reverse' in the inspector.
     
  14. phil-Unity

    phil-Unity

    Unity UI Lead Developer Unity Technologies

    Joined:
    Nov 23, 2012
    Posts:
    1,191
    I might just steal that and put it in, sounds handy. (no promises though)
     
    Nodrap and ThisIsDangerous like this.
  15. phil-Unity

    phil-Unity

    Unity UI Lead Developer Unity Technologies

    Joined:
    Nov 23, 2012
    Posts:
    1,191
    should land for 2020. Before its asked sorry wont be backported as it doesnt meet the requirements for 19.3 as we try to stabilize.
     
  16. MTGKS

    MTGKS

    Joined:
    Jul 12, 2018
    Posts:
    2
    Here is the solution I came up with:
    Code (CSharp):
    1. namespace UnityEngine.UI
    2. {
    3.     [AddComponentMenu("Layout/Reverse Vertical Layout Group")]
    4.  
    5.     public class ReverseVerticalLayoutGroup : VerticalLayoutGroup
    6.     {
    7.         protected ReverseVerticalLayoutGroup() { }
    8.  
    9.         /// <summary>
    10.         /// This allows for UI elements to remain in the hierarchy according to draw order
    11.         /// while allowing them to display in reversed vertical order.
    12.         /// </summary>
    13.         public override void SetLayoutVertical()
    14.         {
    15.             RectTransform[] reversedRectChildren = new RectTransform[rectChildren.Count];
    16.             int rectChildrenCount = rectChildren.Count;
    17.             int lastIndex = rectChildrenCount - 1;
    18.             for (int i = lastIndex; i >= 0; i--)
    19.                 reversedRectChildren[lastIndex - i] = rectChildren[i];
    20.             for (int i = 0; i < rectChildrenCount; i++)
    21.                 rectChildren[i] = reversedRectChildren[i];
    22.  
    23.             base.SetLayoutVertical();
    24.         }
    25.     }
    26. }
     
  17. twice7713

    twice7713

    Joined:
    Apr 24, 2018
    Posts:
    21
    Thank you for helping me!
     
unityunity