New UI Widgets

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.

 

Really appreciate that

 

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

 

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();

 

Hi @ilih
here is my feature request for new version of ui widgets, please provide a Split button if possible.
https://www.syncfusion.com/javascript-ui-controls/js-split-button
Thanks

 

I'll add example for it.

 

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?

 

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.

 

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.

 

Switch.cs
StartCoroutine(CurrentCoroutine);
Errors out if the switch is in an inactive tab.

 

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)

 

Fixed it, thanks!

 

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.

 

Thanks

 

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

 

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.

 

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.

 

@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

 

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.

 

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?

 

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.

 

Thanks, after testing the solution I ended up using:
if (ListView.DisplayedIndicesLast >(ListView.DataSource.Count - 5))

 

Is it possible to get Highlighted Indices?

 

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.         }

 

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?

 

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;

 

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

 

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?

 

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);

 

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);

 

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.         }

 

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.         }

 

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

 

If I understand correctly, you want to know where created instances of the DefaultItem?
This is ListViewComponentPool.CreateComponent() function.

 

Thanks

 

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.  

 

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.

 

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?

 

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.

 

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.

 

I modified the FileListView to Vertical Direction. Could that be a problem?

 

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

 

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.

 

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.

 

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.

 

OK, thanks. It was a combination of having it set for tiled view and having a layout element on the TMPro item.

 

Thank you very much

 

What is the recommended way to get the indices of a button in a listview on a click event?

 

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.     }

 

The first item in one of my listviews does not display unless i scroll or drag up. Any ideas?