Search Unity

[FREE] Reorderable List

Discussion in 'Unity UI (uGUI) & TextMesh Pro' started by Ziboo, Oct 28, 2015.

  1. Ziboo

    Ziboo

    Joined:
    Aug 30, 2011
    Posts:
    326
    Hey,
    I had some time and needed to work on a Reorderable List system for one of my project.
    Here is a preview:


    It's waiting a pull request from Unity-UI-Extensions

    Make sure to get it when it has been approuved :)

    Cheers
     
    jcredible, hopeful and SimonDarksideJ like this.
  2. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,634
    Fantastic work @Ziboo , saw your PR, will get this reviewed and committed as soon as I can.

    Would be great to see this also working horizontally and in a grid as well. (maybe even in the radial layout??)
     
  3. Ziboo

    Ziboo

    Joined:
    Aug 30, 2011
    Posts:
    326
    Thanks, you're welcome :)

    Added support for HorizontalLayout and GridLayout too
     
    hopeful likes this.
  4. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,634
    Great work on the update, re-consuming that now.
    However I did note that you have a ContentSizeFitter on the child content, which according to the Unity UI Rules is invalid (gives you a warning as well). Although , I also note that be removing that, it causes some issues when dropping content back in to the list.

    Any ideas?
     
  5. Ziboo

    Ziboo

    Joined:
    Aug 30, 2011
    Posts:
    326
    I wanted to layout my test lists quickly so I made some dirty things in the scene (Lists>Column x)

    But, the list itself has a pretty standard setup:
    - ScrollRect
    -- Content (LayoutGroup + ContentSizeFitter)
    ---Element (LayoutElement)
    ---Element (LayoutElement)
    ---Element (LayoutElement)
     
  6. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,634
    Just tweeted, but copy here as well, if I try this setup, dropping / reordering of elements doesn't work:
    - EmptyGO (with Reorderable Script)
    -- Content (LayoutGroup + ContentSizeFitter)
    ---Element (LayoutElement)
    ---Element (LayoutElement)
    ---Element (LayoutElement)
     
  7. Ziboo

    Ziboo

    Joined:
    Aug 30, 2011
    Posts:
    326
    Yep you're right !
    The object having the Reorderable Script needs to have a UI element.
    It's needed when doing a raycast to see which list is under the cursor
     
  8. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,634
    Ahh right, ok continuing testing. I've done an initial checkin after consuming your code, so be sure to update your fork before any further updates.
    *edit = Yup, that works!
     
  9. Ziboo

    Ziboo

    Joined:
    Aug 30, 2011
    Posts:
    326
    sure thing ;)
     
  10. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,634
    Just tweaking scripts and making updates to ensure that's clear.
     
  11. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,634
    OK, hopefully last question.
    What is the purpose of the "Dragable Area"? It seems to just be the top level point to hold the "fakes" while dragging. Why not just use the GO with the script?
    Right, I see you use that to keep the Dragged component "on top" of the other elements. making a slight update to make this optional and use the top level canvas as a default.
     
    Last edited: Oct 29, 2015
  12. Ziboo

    Ziboo

    Joined:
    Aug 30, 2011
    Posts:
    326
    Because you can have a mask on the GO with the script. It's typicaly how I do my setup

    - ScrollRect (Image + Mask)
    -- Content (LayoutGroup + ContentSizeFitter)
    ---Element (LayoutElement)
    ---...

    Small improvement maybe would be the select the top parent canvas if Dragable Area is not set...
     
  13. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,634
    Yes, that is what I've done. I've also added additional events for grabbing an item and removing an item from a list :D. Should have the update pushed up soon, then I can back port it to 4.6 and push it to the 5.3 release ;S
     
  14. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,634
    #UIExtensions updated to V1.05, complete with the Re-Orderable Lists, editor extensions and a few of my own tweaks :D
    Thanks for the support!, Keep it coming.
     
    Cromfeli likes this.
  15. Maxter

    Maxter

    Joined:
    Mar 9, 2013
    Posts:
    7
    Hello, I tried to use reorderable list from UIExtensions, but stuck with a weird bug. I have several Text elements within a list element. After I drag&drop this element inside the same list, most of the text elements go blank.
    In the inspector:
    • their sizes appear correct
    • they have text
    • they are enabled and visible
    • hierarchy is correct
    But despite all that I can't see any text in 3 out of 4 text elements.

    UPD:
    While I was writing, I figured out what's wrong. After drag&drop Text elements became slightly smaller in height which caused text to disappear. I added Layout Element to them with Min Height set and it solved the problem.
     
  16. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,634
    Another bug was raised on the ReOrderable list. If it is on a Screen Space - Camera (with camera set) or World Space Canvas, it produces some weird results. Drag and drop doesn't work, elements get merged, etc.

    I suspect it is simply to do with the different coordinate system used in these cases. Any chance you can have a look?
     
  17. Ziboo

    Ziboo

    Joined:
    Aug 30, 2011
    Posts:
    326
    Hi,

    I'm sorry but I really don't have the time...
    I shared the script as is, and it's very cool that it joined the collection, but I'm not sure I will work on it again, except if I need it in one of my project, then I will improve and share it again.

    Sorry guys, hope someone will have the time to check on it.

    Good luck

    Cheers
     
  18. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,634
    Ok, no worries @Ziboo I'm in the same boat really. Only asked since you were the author if you had any thoughts on the picking / dragging coordinates and could offer support.

    I'll look again if I have the time while packaging this release, else the community can pitch in.

    Failing that, there's always adding a check to only allow it to be used in SS-Overlay for now :D
     
  19. Ziboo

    Ziboo

    Joined:
    Aug 30, 2011
    Posts:
    326
  20. eses

    eses

    Joined:
    Feb 26, 2013
    Posts:
    1,779
    Hi @SimonDarksideJ and @Ziboo

    I find UI extensions project interesting yet too complicated for me... learning... however took a look at Reorderable List code.

    DL'd and opened latest 5.3 package and opened "ReorderableList" test scene. And if I didn't mess anything right at start, it doesn't work with Screen Space Camera and World space camera at all. Dragged item will be offset from mouse cursor if editor game viewport is scaled.

    Seems like problem could be mostly on line 103, instead of 132-148.

    Code (csharp):
    1.  
    2. //Set dragging object on cursor
    3. _draggingObject.position = eventData.position;
    4.  
    Eventsystem position is used for dragged object position. IMHO It's not going to work based on screen position (many problems). Instead so far on my own projects, I've resorted to RectTransformUtility, and I've worked coordinates in respective parents space (or sometimes in worldspace). As dragged object seems to be always child of "Main" RT, and it seems to be available as _reorderableList.DraggableArea, it could be used as parent in this case:

    Code (csharp):
    1.  
    2. // Screen to rect space conversion
    3. Vector2 lPos = Vector2.zero;
    4. RectTransformUtility.ScreenPointToLocalPointInRectangle(_reorderableList.DraggableArea, eventData.position, eventData.enterEventCamera, out lPos);
    5. _draggingObject.localPosition = lPos;
    6.  
    With this, screen viewport scaling does not matter with Screen Space camera, World space camera works, it can be rotated, scaled, and Main RT too can be scaled, and Main can be of different size than whole canvas, dragged item should stay on cursor despite of these operations.

    There seems to be another issues with dragged item locking into center of canvas a some moments, when dragging near other rectTransforms, didn't try to figure it out...maybe it's caused by this change.

    Well, anyway, shoot this down if it's something else...
     
  21. eses

    eses

    Joined:
    Feb 26, 2013
    Posts:
    1,779
    @SimonDarksideJ - Another strange choice seems to be the fact that in demo scene, ("ReorderableList" file) main canvas has Canvas Scaler, and it's set to "Constant Pixel Size" which doesn't result in anything meaningful... I've mostly only used "Scale with Screen Size" -> results are more predictable.

    So maybe this too has caused some false alarms?
     
  22. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,634
    Nah because in the UI Extensions I extract all that so you can create it fro the menu, so it doesn't seem to make any difference there.
    From past experience it is the Coordinate system used between SS-O and SS-C/WS, one uses screenspace, the other world coord's
     
  23. eses

    eses

    Joined:
    Feb 26, 2013
    Posts:
    1,779
    @SimonDarksideJ

    I'm not sure if you understood what I meant with my second post, I tried to say, if demo scene UI scales along Unity editor screen size, like it does now in provided demo scene, it can look really messed up, on smaller viewport sizes, you can barely see buttons inside scroll rects, so some people might think it's somehow broken...

    That dragged sprite offset is definitely offset based on editor viewport size.
     
  24. JellyfishUmbrella

    JellyfishUmbrella

    Joined:
    May 6, 2015
    Posts:
    5
    Should I be able to move things from one list to another in code? Right now, I'm trying to add a "reset' ability to put a list back to its original state after a user has dragged a bunch of things out of it, but once I reparent my elements back to their original list, the drag-n-drop ability gets munched a bit. When I drag something out of my list after a reset, the position snapping doesn't work until I drop the element in the new list, and then regrab it. So it seems like the lists don't realize I've moved things out of them if I do it through code. Is there a better way to send items from list to list, and make sure the lists realize what's going on?

    Thanks,
    -Rich
     
  25. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,634
    It's all in the options. If you look at the demo scene, you can control how child elements are dragged from (cloned / move) and dropped (add / replace / etc) as well as whether a list supports dropping.
    If you want to reset a list, then your going to need either a prefab of it's original state, destroy the old and read the prefab. Or manage the children and rebuild the children for you. There is no state management as part of the control.

    Hope that helps.
     
  26. adamers

    adamers

    Joined:
    Apr 2, 2014
    Posts:
    5
    How can i save order of layout elements ?
     
  27. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,634
    The simplest way I can think of, is to ensure each item is unique and has a unique name. Then simply walk through the Child list and serialise the list of names in that order. Then when restoring, just instantiate each child in that same order.

    When children are reordered, it's their order in the child transform hierarchy that is finally ordered.
     
  28. freedom667

    freedom667

    Joined:
    Sep 6, 2015
    Posts:
    393
    how can we make it animated? I mean, as slidely?
     
  29. Leslie-Young

    Leslie-Young

    Joined:
    Dec 24, 2008
    Posts:
    1,052
    Anyone tried this with variable size elements in the target list and know of a solution to the following problem?

    There seems to be jitter on the element to be move up or down when moving a dragged element over it and that list element is not the same size as the 1st, and dragged, element.

    I tested with the 2nd top row list having its red element's min height set to 50 rather than 30.
     
  30. duckburger

    duckburger

    Joined:
    Dec 7, 2016
    Posts:
    6
    Hey, awesome component! Would this potentially support a smooth movement of the items around the "Fake" cell (like in iOS)?
     
  31. ComputerCables

    ComputerCables

    Joined:
    Jun 21, 2017
    Posts:
    4
    When you drag an item out and back in, it always resizes to 100x100, even if preferred width and height are changed. Can't get it to stay 64x64
     
  32. eskiroy

    eskiroy

    Joined:
    May 9, 2014
    Posts:
    11
unityunity