Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. We have updated the language to the Editor Terms based on feedback from our employees and community. Learn more.
    Dismiss Notice
  3. Join us on November 16th, 2023, between 1 pm and 9 pm CET for Ask the Experts Online on Discord and on Unity Discussions.
    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,226
    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?
     
    yong2khoo likes this.
  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:
    24
    exactly wat i was searching for from days!!!..Thansks ur a life saver!! :) :p
     
  8. JonnyHilly

    JonnyHilly

    Joined:
    Sep 4, 2009
    Posts:
    749
    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:
    26

    ///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:
    64
    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?
     
    ilmario and ThisIsDangerous like this.
  13. ThisIsDangerous

    ThisIsDangerous

    Joined:
    Dec 3, 2018
    Posts:
    39
    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,226
    I might just steal that and put it in, sounds handy. (no promises though)
     
    ilmario, Nodrap and ThisIsDangerous like this.
  15. phil-Unity

    phil-Unity

    Unity UI Lead Developer Unity Technologies

    Joined:
    Nov 23, 2012
    Posts:
    1,226
    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:
    24
    Thank you for helping me!