Search Unity

  1. 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
  2. Ever participated in one our Game Jams? Want pointers on your project? Our Evangelists will be available on Friday to give feedback. Come share your games with us!
    Dismiss Notice

New UI Widgets

Discussion in 'Assets and Asset Store' started by ilih, Feb 11, 2015.

  1. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    796
    I added DragHandle property to DragSupport class (this is also affecting all drag support classes for ListView) in v1.11.2b2.
    Add gameobject with DragSupportHandle component to DefaultItem (this will be draggable area) and then set it as DragSupport.DragHandle property.

    You can check the example in the Examples/Drag-and-Drop/DragHandle scene.
     
    jGate99 likes this.
  2. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,029
    Really appreciate that :)
     
  3. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,029
    Hi @ilih,
    im getting null error on this line on
    Code (CSharp):
    1.     protected override void Start()
    2.         {
    3.             flexSettings.PropertyChanged += FlexSettingsChanged;
    I believe reason is because im creating a new easylayout on runtime like this

    Code (CSharp):
    1.      EasyLayout easyLayout = InputContentArea.gameObject.AddComponent<EasyLayout>();
    2.             easyLayout.LayoutType = LayoutTypes.Grid;
    3.             easyLayout.GridConstraint = GridConstraints.FixedColumnCount;
    4.             easyLayout.GridConstraintCount = nestedInfo.NumberOfRowsOrColumns;
    5.  
    6.             easyLayout.Margin = Vector2.zero;
    7.             easyLayout.Spacing = new Vector2(20, 20);
    8.             easyLayout.ChildrenWidth = ChildrenSize.FitContainer;
    please advise
     
  4. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    796
    Please modify EasyLayout.cs
    Replace lines
    Code (CSharp):
    1.         EasyLayoutFlexSettings flexSettings;
    2.  
    3.         // ...
    4.  
    5.         EasyLayoutStaggeredSettings staggeredSettings;
    6.  
    7.         // ...
    8.  
    9.         EasyLayoutEllipseSettings ellipseSettings;
    with new lines:
    Code (CSharp):
    1.         EasyLayoutFlexSettings flexSettings = new EasyLayoutFlexSettings();
    2.  
    3.         // ...
    4.  
    5.         EasyLayoutStaggeredSettings staggeredSettings = new EasyLayoutStaggeredSettings();
    6.  
    7.         // ...
    8.  
    9.         EasyLayoutEllipseSettings ellipseSettings =  new EasyLayoutEllipseSettings();
     
    jGate99 likes this.
  5. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,029
  6. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    796
    jGate99 likes this.
  7. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,029
    Hi @ilh,
    I'm using Drag Drop with a variable height list view, problem is drop indicator sometime doesnt position accurately but position in midde like this screenshot.
    Interestingly it positions fine, if you dont use scrollbar. But if you scroll down and then start dragging items then sometime poistion is wrong. So i assume its due to variable height nature of list items.
    Please advise how to solve this?
    Capture.PNG
     
  8. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    796
    Are you using
    GetNearestIndex()
    function from this post? This function works only for ListViewWithFixedSize.
    For a variable size you need to change
    ListViewTypeSize.GetIndexAtPosition()
    to public and replace
    ListView.GetNearestIndex()
    with this:
    Code (CSharp):
    1.             public override int GetNearestIndex(Vector2 point)
    2.             {
    3.                 if (IsSortEnabled())
    4.                 {
    5.                     return -1;
    6.                 }
    7.  
    8.                 var pos_block = IsHorizontal() ? point.x : -point.y;
    9.                 var lr = ListRenderer as ListViewTypeSize;
    10.                 var index = lr.GetIndexAtPosition(pos_block);
    11.  
    12.                 return Mathf.Min(index, DataSource.Count - 1);
    13.             }
    I'll plan to make a setting before/after/nearest for the drop position in the next update so it can be changed from the Inspector window without code modification.
     
    jGate99 likes this.
  9. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,029
    Thanks for your reply,
    I actually tried this but still see line not positioning properly in some cases.
    So ill wait for a example with variable height drag drop where you'll have it solved.

    PS: Happy New Year
    New UI widgets brought so many features in 2019, and hopefully 2020 will make this already powerful library even more legendary.
     
  10. tim44

    tim44

    Joined:
    May 15, 2019
    Posts:
    37
    Switch.cs
    StartCoroutine(CurrentCoroutine);
    Errors out if the switch is in an inactive tab.
     
  11. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    796
    Ok, I make example for it.

    Sorry for the problem.
    Fix:
    Replace line in function
    SetMarkPosition()
    in Switch.cs
    if (animate)

    with new line:
    if (animate && gameObject.activeInHierarchy)
     
    jGate99 likes this.
  12. tim44

    tim44

    Joined:
    May 15, 2019
    Posts:
    37
    Fixed it, thanks!
     
  13. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    796
    Please check v1.11.2b3.
    I added DropPosition for the ListViewDrop scripts and made an example for variable size located at Examples\Drag-and-Drop\ListViewVariableSizeDrop scene.

    Sorry, I'll be unavailable until next week.
     
    jGate99 likes this.
  14. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,029
    Thanks :)
     
  15. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,029
    Hi @ilih,

    Can you please provide a generic dialog/popup with content area , this way we can use same dialog with Title, Close button and X number of buttons but different content inside.

    From example, one dialog/popup can be used to show user profile popup, and then leaderboards popup, and then someother popup but reusing same instance of popup.

    An ideal extra feature'd be if we can specify max height of content area and after that scrollbar appear or popup fits if content height is less than max height

    Thanks
     
  16. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    796
    You already can do this:
    Code (CSharp):
    1. dialogPrefab.Clone().Show(
    2.                 title: "Dialog Title",
    3.                 message: "Content",
    4.                 buttons: actions,
    5.                 // ...
    6. );
    You can put Text gameobject to ScrollView with enabled auto-hide scrollbar and use the Content Size Fitter component to change the height of the Text gameobject.
     
    jGate99 likes this.
  17. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,029
    Sorry for the confusion in my message, i want to pass content inside dialog on runtime like this
    Code (CSharp):
    1.  
    2. dialogPrefab.Clone().Show(
    3.  
    4.                 title: "Dialog Title",
    5.                 content: isLeaderboard ? leaderboarduGUIComp : profileUGUIComp
    6.                 buttons: actions,
    7.                 onContentRemoveCallBack,
    8.                 onContentAddCallBack
    9.  
    10. );
    so ill provide a ugui component (already instantiated in hidden hearhachy) which this dialog simply replace with any existing content inside it.
    User willl b reponsible of removing using callback so user can move it back to hidden hearhchy.
     
  18. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,029
    @ilih
    Can you please also make Dialog a base class so in one derived class we have TMPro integration while on other we have Old Text control integration. I'm personally interested in TMPro based.
    Thanks
     
  19. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    796
    Ok, I'll think about it.

    This is done with additional class DialogInfoBase (DialogInfo for default Text and DialogInfoTMPro for TMPro), this component should be added to Dialog.
     
    jGate99 likes this.
  20. tim44

    tim44

    Joined:
    May 15, 2019
    Posts:
    37
    I'm planning to add 50 items at a time on demand as the user scrolls. How do I get an event or detect scrolling to or close to the end of the list?
     
  21. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    796
    You can use ScrollRect.onValueChanged event and check last displayed index:
    Code (CSharp):
    1.  
    2.     public class AddAtScroll : MonoBehaviour
    3.     {
    4.         [SerializeField]
    5.         public ListViewIcons ListView;
    6.  
    7.         protected virtual void Start()
    8.         {
    9.             ListView.ScrollRect.onValueChanged.AddListener(OnScroll);
    10.         }
    11.  
    12.         void OnScroll(Vector2 scroll)
    13.         {
    14.             if (ListView.DisplayedIndicesLast == (ListView.DataSource.Count - 1))
    15.             {
    16.                 ListView.DataSource.AddRange(...);
    17.             }
    18.         }
    19.     }
    Also possible to use ScrollRectEvents component with a pull events but it works only with drag (not scroll), so it should be used only on touch devices.
    Example: main demo scene -> Miscellaneous -> ScrollRectEvents and script Examples/TestScripts/TestScrollRectEvents.
     
    tim44 likes this.
  22. tim44

    tim44

    Joined:
    May 15, 2019
    Posts:
    37
    Thanks, after testing the solution I ended up using:
    if (ListView.DisplayedIndicesLast >(ListView.DataSource.Count - 5))
     
    Last edited: Jan 10, 2020
    ilih likes this.
  23. tim44

    tim44

    Joined:
    May 15, 2019
    Posts:
    37
    Is it possible to get Highlighted Indices?
     
  24. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    796
    Add this property to ListViewCustom.cs to get Highlighted Indices.
    Code (CSharp):
    1.         public List<int> HighlightedIndices
    2.         {
    3.             get
    4.             {
    5.                 var result = new List<int>();
    6.  
    7.                 var item_under_navigation = FindItem(EventSystem.current.currentSelectedGameObject, Container);
    8.                 if (item_under_navigation != null)
    9.                 {
    10.                     result.Add(item_under_navigation.Index);
    11.                 }
    12.  
    13.                 var item_under_pointer = FindItem();
    14.                 if ((item_under_pointer != null) && (!result.Contains(item_under_pointer.Index)))
    15.                 {
    16.                     result.Add(item_under_pointer.Index);
    17.                 }
    18.  
    19.                 return result;
    20.             }
    21.         }
     
    tim44 likes this.
  25. tim44

    tim44

    Joined:
    May 15, 2019
    Posts:
    37
    New UI is working on Oculus just like a mouse would with the Curved UI asset.
    1. Can I adjust the sensitivity on the listview so a click registers more frequently than a drag?
    2. Can I do a scroll call manually, then I can scroll with the stick?
     
  26. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    796
    I do not have Oculus, so I am not sure how exactly it's can be done, but UI receives events from EventSystem and EventSystemhas InputModule component to determine it will be click or drag event.
    So try to check EventSystem gameobject and InputModule components with it, probably they have some settings regarding sensitivity. Or maybe it even some common setting regarding Oculus sensitivity, not just UI.

    You can scroll using ListView.ScrollTo functions or with ScrollRect.verticalNormalizedPosition.
    Code (CSharp):
    1.             ListView.ScrollToAnimated(index);
    2.             ListView.ScrollTo(index);
    3.             ListView.ScrollToPositionAnimated(position);
    4.             ListView.ScrollToPosition(position);
    5.             ListView.ScrollRect.verticalNormalizedPosition = 0f;
     
    tim44 likes this.
  27. tim44

    tim44

    Joined:
    May 15, 2019
    Posts:
    37
    Scrolling works great.
    focusedScrollRect.verticalNormalizedPosition += (OVRInput.Get(OVRInput.Axis2D.SecondaryThumbstick).y * .02f);

    The dragging issue is solved by upping the DragThreshold setting in the Event System
     
    Last edited: Jan 11, 2020
  28. tim44

    tim44

    Joined:
    May 15, 2019
    Posts:
    37
    The stick scrolling gets way too fast as the list grows. Is there a total list height or something else I could compare to for reference?
     
  29. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    796
    Please try this:
    Code (CSharp):
    1.             var pos = ListView.GetScrollPosition();
    2.             pos += (OVRInput.Get(OVRInput.Axis2D.SecondaryThumbstick).y * .02f);
    3.             // probably 0.02f should increased to make scroll faster
    4.             ListView.ScrollToPosition(pos);
     
    tim44 likes this.
  30. tim44

    tim44

    Joined:
    May 15, 2019
    Posts:
    37
    You are right, it fixed it, thanks
    Code (CSharp):
    1. var pos = ListView.GetScrollPosition();
    2. pos -= (OVRInput.Get(OVRInput.Axis2D.SecondaryThumbstick).y * 20);
    3. ListView.ScrollToPosition(pos);
     
  31. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,029
    Hi @ilih,
    I want to use different renderers (item components) based on data, i noticed ChatList provide an implementation for this case where there are 2 renderers for same list control. So is there any other example or should i go ahead with chatlist and modify it according to my requirements?

    Edit:
    Another question is, i noticed that you are freeing both Incoming and Outcoming in to same incoming? any reason behind it? Thanks
    Code (CSharp):
    1. /// <summary>
    2.         /// Free current component.
    3.         /// </summary>
    4.         public override void MovedToCache()
    5.         {
    6.             if (CurrentComponent != null)
    7.             {
    8.                 CurrentComponent.Free(IncomingTemplate.transform.parent);
    9.                 CurrentComponent = null;
    10.             }
    11.         }
     
    Last edited: Jan 12, 2020
  32. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    796
    You can also check GroupedListView, but it's mostly the same.

    IncomingTemplate and OutcomingTemplate have the same parent gameobject in the hierarchy, so no need to determine which one to use.
    But if parent gameobjects are different then you can change code like this:
    Code (CSharp):
    1.         protected ChatLine Item;
    2.  
    3.         public void SetData(ChatLine item)
    4.         {
    5.             Item = item;
    6.             // ...
    7.         }
    8.  
    9.         public override void MovedToCache()
    10.         {
    11.             if (CurrentComponent != null)
    12.             {
    13.                 var template = GetTemplate(Item.Type);
    14.                 var parent = (template as MonoBehaviour).transform.parent;
    15.  
    16.                 CurrentComponent.Free(parent);
    17.                 CurrentComponent = null;
    18.             }
    19.         }
     
    jGate99 likes this.
  33. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,029
    Hi @ilih
    Which function in ListViewCustom class create new renderers/visual components for list items? There is a property i want to set from ListViewCustom for any newly created (not reused from cached) renderer?
    Thanks
     
  34. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    796
    If I understand correctly, you want to know where created instances of the DefaultItem?
    This is ListViewComponentPool.CreateComponent() function.
     
    jGate99 likes this.
  35. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,029
    Thanks :)
     
  36. tim44

    tim44

    Joined:
    May 15, 2019
    Posts:
    37
    Can you add a highlight on mouse over to the switch widget please?
    I was able to cobble this together, is there a cleaner way?
    Code (CSharp):
    1. using System.Collections;
    2. using System.Collections.Generic;
    3. using UnityEngine;
    4. using UIWidgets;
    5. using UnityEngine.EventSystems;
    6.  
    7. public class highlightOver : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler
    8. {
    9.     private Color startcolorMarkOff;
    10.     private Color startcolorMarkOn;
    11.     private Color startcolorBackgroundOff;
    12.     private Color startcolorBackgroundOn;
    13.  
    14.     public Color HighlightColorMarkOff;
    15.     public Color HighlightColorMarkOn;
    16.     public Color HighlightColorBackgroundOff;
    17.     public Color HighlightColorBackgroundOn;
    18.  
    19.     public void OnPointerEnter(PointerEventData eventData)
    20.     {
    21.         var c = gameObject.GetComponent<Switch>();
    22.  
    23.         startcolorMarkOn = c.MarkOffColor;
    24.         startcolorMarkOff = c.MarkOnColor;
    25.         startcolorBackgroundOff = c.BackgroundOffColor;
    26.         startcolorBackgroundOn = c.BackgroundOnColor;
    27.  
    28.         c.MarkOffColor = HighlightColorMarkOff;
    29.         c.MarkOnColor = HighlightColorMarkOn;
    30.         c.BackgroundOffColor = HighlightColorBackgroundOff;
    31.         c.BackgroundOnColor = HighlightColorBackgroundOn;
    32.  
    33.     }
    34.  
    35.     public void OnPointerExit(PointerEventData eventData)
    36.     {
    37.         var c = gameObject.GetComponent<Switch>();
    38.  
    39.         c.MarkOffColor = startcolorMarkOn;
    40.         c.MarkOnColor = startcolorMarkOff;
    41.         c.BackgroundOffColor = startcolorBackgroundOff;
    42.         c.BackgroundOnColor = startcolorBackgroundOn;
    43.     }
    44.  
    45. }
    46.  
     
    Last edited: Jan 16, 2020
  37. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    796
    You need to change TargetGraphic to Mark.
    To highlight Background at the same time you need to add SelectableHelper component and change TargetGraphic to Background.
     
    Last edited: Jan 16, 2020
    tim44 likes this.
  38. tim44

    tim44

    Joined:
    May 15, 2019
    Posts:
    37
    I converted the FileListView over to TMPro. When I drag down, each row has a position where the text from two different rows will swap back and forth creating a flashing effect. Any ideas on a fix?
     
  39. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    796
    Not understand about converting: there should be no manual conversion with replacing scripts.
    The right way is to enable TMPro support with "Project Settings / New UI Widgets / TextMesh Pro support - Enable" and then create a widget from the menu and it will have TMPro text component.

    What version are you use? You can check it in "New UI Widgets/version.txt" file.
     
  40. tim44

    tim44

    Joined:
    May 15, 2019
    Posts:
    37
    By converting I mean, created FileListView, then realized I wanted TMPro, then enabled, then changed component to TMPro type. version is 1.11.1f1. After your post, I did more testing and the problem is program specific and only to that one listview, I imported the prefab into a new project and it works normally and all other listviews in the projects work good. I may just recreate it when I have time.
     
  41. tim44

    tim44

    Joined:
    May 15, 2019
    Posts:
    37
    I modified the FileListView to Vertical Direction. Could that be a problem?
     
  42. tim44

    tim44

    Joined:
    May 15, 2019
    Posts:
    37
    OK, I found out it is Curved UI messing with it, it's only that particular listview though. That one doesn't like canvas shape Cylinder, a couple of the other shapes work
     
  43. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    796
    Yes, you need also to change ListType to ListView with Fixed size or Variable Size and change DefaultItem width to fit only one item in the horizontal direction (or change Container.EasyLayout settings to Grid with Column Constraint = 1).

    FileListView by default use TileView with Variable Size: for the horizontal direction items have variable width and fixed height, for vertical direction items have fixed width and variable height.
    And by default DefaultItem has variable width and Container can fit more than one item in the horizontal direction.
    Because of this expected positions of the displayed items do not match with actual ones and items not displayed correctly.
     
  44. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    796
    Please, can you check it with default ScrollView and multiple copies of the DefaultItem with different text placed inside ScrollView.content with Vertical Layout Group? Without any ListView, just simple ScrollView with DefaultItems.
    If the problem not reproduced then it's a bug with ListView.
     
  45. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    796
    Please check v1.11.2b5.

    Widget can be created with menu "New UI Widgets / Input / SplitButton".
    Example scene at Examples/Buttons.

    Added parameters RectTransform content and Action onClose to Dialog.Show method.
    example at Examples/Dialog: DialogWithCustomContent scene and TestDialogWithCustomContent script.
     
    jGate99 likes this.
  46. tim44

    tim44

    Joined:
    May 15, 2019
    Posts:
    37
    OK, thanks. It was a combination of having it set for tiled view and having a layout element on the TMPro item.
     
    ilih likes this.
  47. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,029
    Thank you very much :)
     
  48. tim44

    tim44

    Joined:
    May 15, 2019
    Posts:
    37
    What is the recommended way to get the indices of a button in a listview on a click event?
     
  49. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    796
    ListViewItem
    class has an
    Index
    field (base class for the DefaultItem component).
    Add function to DefaultItem component class (if component created with widget generation) or create derived class (if it a standard component) and then replace the standard component with a new one.
    Code (CSharp):
    1.     public class YourDefaultItem : BaseDefaultItemComponent
    2.     {
    3.         protected override void Start()
    4.         {
    5.             base.Start();
    6.  
    7.             onPointerClick.AddListener(ProcessClick);
    8.             // available clicks events:
    9.             // - onPointerClick(PointerEventData eventData) - on every click
    10.             // - onClick() - on first click
    11.             // - onDoubleClick(int index) - raised on double click
    12.         }
    13.  
    14.         void ProcessClick(PointerEventData eventData)
    15.         {
    16.             Debug.Log("click on item with index: " + Index);
    17.         }
    18.  
    19.         protected override void OnDestroy()
    20.         {
    21.             onPointerClick.RemoveListener(ProcessClick);
    22.  
    23.             base.OnDestroy();
    24.         }
    25.  
    26.         // .. other code
    27.     }
     
    tim44 likes this.
  50. tim44

    tim44

    Joined:
    May 15, 2019
    Posts:
    37
    The first item in one of my listviews does not display unless i scroll or drag up. Any ideas?
     
unityunity