New UI Widgets

It's ScrollRect, not ListView.
ScrollRect does not have Interactable option, so it is not affected by the CanvasGroup.interactable.

I added DisableScrollRect option to ListView in v1.12.3b1
If option enabled, then the ScrollRect component will be disabled if ListView is not interactable.

 

Hi @ilih,
another issue with combobox im having is, that it has 4 items, but only last 3 items appear "first time i click" then i scroll down and then 4 items appear (because space is enough to show 4+ items) and then whenever i click it always show all the items.
so only first time it fails to show all items.


UPDATE 2:
Does listview on combobox clicking uses a new canvas? if so? can i customize the canvas? because im using custom canvas scale settings

 

What are the ListView settings: ListType, Multiselect, and SelectedIndex?

Also please try to add the following line to ComboboxCustom.cs in ShowList() function:

listView.ScrollToPosition(listView.GetScrollPosition() + 0.1f);

before the line

if (listView.SelectComponent())

It does not fix the problem but can work as a workaround.

No, the new canvas is not created, but ListView gameobject is moved to the root canvas to display it over other widgets.

 

Released v1.12.3

Changelog:

• added Pinchable component: drag, rotate, resize multi-touch support
• added ListViewAutoResize component: auto-resize ListView or TileView according to items counts until specified maximum size reached
• [Serializable] attribute of TreeNode<TItem> class not available for Unity 2020.1 and later versions
• ListView: added DisableScrollRect property to disable ScrollRect if ListView is not Interactable
• ListView and TreeView Drag&Drop: added Interactable support

 

Hi @ilih,
In which function you set "Current" item data after user selects an item from ComboBox list?
I need to override this function to do different setting

 

Hello,
I'm trying to upgrade from 1.10.3f1 but I'm getting a lot of TextMeshPro reference errors, for example:

I'm on Unity 2019.4.7 and TextMeshPro 2.1.1. Any idea how to solve this?
I've tried to delete library and regenerate project, but the issue is still there
Many thanks

 

protected virtual void SetData(TComponent component, TItem item)

Disabling TMPro support and enabling it back should solve the problem: "Menu / Edit / Project Settings... / New UI Widgets / TextMeshPro Support Disable/Enable"

 

Ok, so I had to disable support, import update and then re-enable it
Now it works, thanks

 

Why does it feel like this function gets called for every item?
Isnt this function gets trigger only when user selects an item from Combobox List which then set it to ComboBox's Current View?

 

There are a few reasons:

• ListView has option Multiselect, and Combobox supports cases when Multiselect is enabled, so it can be more the one instance of the Current gameobject, but if Multiselect is disabled then this function will be called only once.
• ListView.SelectedIndices can be changed with a script, not only with UI interaction, and Combobox also should handle such changes.

 

Problem: package update replaces assembly definitions with TextMeshPro reference with the original ones without references.

I am thinking about a proper solution without manual disable/enable.
Currently, the package has a code that should run on every recompilation and fix missed references, but it does not work reliably.
Maybe I should include TextMeshPro references to all assembly definitions by default or either delete assembly definitions.

 

Quick question about TableWidget when inside a layout group.

When I have TableWidget inside a visual that is inside a broader visual that uses a layout group,
Oddly, the layout of the grid columns gets messed up.
Typically, it will look like columns inside of columns.
I've reproduced this with many layout groups including the stock Vertical Layout and your Easy Layout.
The problem immediately goes away if you remove the layout group.

I've changed the layouts adding panels and trying different visual hierarchies.
Sadly, they all seem to result in some corruption of the columns.

You have to enable control child width and height for this to happen.

I've worked around this by using creative anchoring.
However our screens would look much better with a layout group.

 

Are you tried to add LayoutElement component to the Table with FlexibleWidth = 1 and FlexibleHeight = 1?
By default, the Table has layout properties based on Image with preferred size 14x14 and probably this is causing a problem.

 

Hi, I generated an Autocomplete view for a custom data type, and I would like some help implementing custom UI logic.

The default implementation seems to work like this:
- View gets shown with autocomplete text input, without list.
- start typing in autocomplete text input, then list shows up with matching words.
- if deselect autocomplete text input, then hide list.

What I would like to accomplish is this:
- List of words shown with autocomplete text input above it.
- Typing causes list to show only the words that match, but without resizing the view.
- View holding the list of words should always be shown.

Also, I noticed that "Data Source" doesn't get showing in my custom Autocomplete component, even thought it's marked as public.

 

This should be by default, or you need to highlight input text on the list?

ListView is not resized by default.

You need to override

ShowOptions()

and

HideOptions()

methods like this:

Code (CSharp):

1.         protected override void ShowOptions()
2.         {
3.             DisplayListView.gameObject.SetActive(true);
4.         }
5.  
6.         protected override void HideOptions()
7.         {
8.         }

Type should have a Serializable attribute, otherwise if not be available in the Inspector window.

Code (CSharp):

1. [System.Serializable]
2. public class Item
3. {
4.    //...
5. }

 

Hi Ilia,

I've added a few overrides to my autocomplete view, however, I'm seeing broken scrolling behavior. You can see it here:



Also, here are the overrides I implemented:



Another question - I'm going to be using this library on mobile. Is there any way I can scroll the DisplayListView by dragging the items, while having the items intractable at the same time? Right now it will only drag if tap between the spacing of the items.

 

It looks like ListView DataSource is changed when the scrollbar reaches the bottom. Maybe you have some code related to that?
Does the same happen with ListViewIcons or only with this specific Autocomplete.DisplayListView?

Please add the following code to the Scripts/Drag-and-Drop/ListViewCustomDragSupport.cs
ListView will be automatically scrolled when the drag is near the border.
Distance to border can be specified with

AutoScrollArea

, scroll speed with

AutoScrollSpeed

.

Code (CSharp):

1.         /// <summary>
2.         /// Process OnDrag event.
3.         /// </summary>
4.         /// <param name="eventData">Current event data.</param>
5.         protected override void OnDrag(PointerEventData eventData)
6.         {
7.             base.OnDrag(eventData);
8.  
9.             if (IsDragged)
10.             {
11.                 ScrollRectDrag(eventData);
12.             }
13.         }
14.  
15.         /// <summary>
16.         /// Process OnEndDrag event.
17.         /// </summary>
18.         /// <param name="eventData">Current event data.</param>
19.         protected override void OnEndDrag(PointerEventData eventData)
20.         {
21.             base.OnEndDrag(eventData);
22.  
23.             AutoScrollStop();
24.         }
25.  
26.         /// <summary>
27.         /// Auto scroll area.
28.         /// </summary>
29.         [SerializeField]
30.         [Tooltip("Distance from the ScrollRect borders where auto scroll enabled.")]
31.         public float AutoScrollArea = 40f;
32.  
33.         /// <summary>
34.         /// Auto scroll speed.
35.         /// </summary>
36.         [SerializeField]
37.         public float AutoScrollSpeed = 200f;
38.  
39.         /// <summary>
40.         /// Scroll coroutine.
41.         /// </summary>
42.         protected Coroutine AutoScrollCoroutine;
43.  
44.         /// <summary>
45.         /// Auto scroll direction.
46.         /// </summary>
47.         protected int AutoScrollDirection = 0;
48.  
49.         protected PointerEventData AutoScrollEventData;
50.  
51.         protected virtual void AutoScrollStop()
52.         {
53.             if (AutoScrollCoroutine == null)
54.             {
55.                 return;
56.             }
57.  
58.             AutoScrollDirection = 0;
59.             ListView.StopCoroutine(AutoScrollCoroutine);
60.             AutoScrollCoroutine = null;
61.         }
62.  
63.         /// <summary>
64.         /// Scroll ListView when pointer is near ScrollRect border.
65.         /// </summary>
66.         /// <param name="eventData">Current event data.</param>
67.         protected virtual void ScrollRectDrag(PointerEventData eventData)
68.         {
69.             AutoScrollEventData = eventData;
70.  
71.             var target = ListView.ScrollRect.transform as RectTransform;
72.  
73.             Vector2 point;
74.             if (!RectTransformUtility.ScreenPointToLocalPointInRectangle(target, eventData.position, eventData.pressEventCamera, out point))
75.             {
76.                 AutoScrollStop();
77.                 return;
78.             }
79.  
80.             var rect_start = target.rect;
81.             var rect_end = target.rect;
82.  
83.             if (ListView.IsHorizontal())
84.             {
85.                 rect_start.width = AutoScrollArea;
86.  
87.                 rect_end.position = new Vector2(rect_end.position.x + rect_end.width - AutoScrollArea, rect_end.position.y);
88.                 rect_end.width = AutoScrollArea;
89.             }
90.             else
91.             {
92.                 rect_start.position = new Vector2(rect_start.position.x, rect_start.position.y + rect_start.height - AutoScrollArea);
93.                 rect_start.height = AutoScrollArea;
94.  
95.                 rect_end.height = AutoScrollArea;
96.             }
97.  
98.             var new_direction = 0;
99.             if (rect_start.Contains(point))
100.             {
101.                 new_direction = -1;
102.             }
103.             else if (rect_end.Contains(point))
104.             {
105.                 new_direction = +1;
106.             }
107.  
108.             if (new_direction != AutoScrollDirection)
109.             {
110.                 AutoScrollStop();
111.  
112.                 if (new_direction != 0)
113.                 {
114.                     AutoScrollDirection = new_direction;
115.                     AutoScrollCoroutine = ListView.StartCoroutine(AutoScroll());
116.                 }
117.             }
118.         }
119.  
120.         /// <summary>
121.         /// Auto scroll.
122.         /// </summary>
123.         /// <returns>Coroutine.</returns>
124.         protected virtual IEnumerator AutoScroll()
125.         {
126.             while (true)
127.             {
128.                 var delta = AutoScrollSpeed * Utilities.GetDeltaTime(ListView.ScrollUnscaledTime) * AutoScrollDirection;
129.                 var max = ListView.GetItemPositionBottom(ListView.DataSource.Count - 1);
130.                 var pos = Mathf.Clamp(ListView.GetScrollPosition() + delta, 0f, max);
131.  
132.                 ListView.ScrollToPosition(pos);
133.  
134.                 yield return null;
135.  
136.                 OnDrag(AutoScrollEventData);
137.             }
138.         }

 

Sadly, that didn't work..
I uploaded an image of what it looks like when I add a horizontal layout group.
Each of the Grids are in their own panel.

If I remove the HorizontalLayoutGroup located at the parent of the prefab then everything looks good.
I would just really like to have a dynamic UI that allows all the lists to grow.

Thanks for any help

 

Thanks for the screenshot, I understand the problem now.
Please try those settings: constraint to Column and count to 1 at ListView.Container EasyLayout component.

 

Hello,

As far is i can tell Drag&Drop in TreeViews only lets you put Nodes under other Nodes.
Do you have any Plans to support reordering of Nodes by Drag&Drop? (like in the non hirarchical list)

 

I'll do it when I come up with a way to make drag&drop work understandable for the user: in what cases will be a change in the hierarchy (current version), and in what cases will be reordering.

Reordering is possible, but make it work with current hierarchy changes at the same time is difficult.

 

Hi @ilih,
Can you please support for buttons in notify just like in Dialog

 

I'll think about it. Maybe it will be easier to add notification behavior to Dialog.

 

Sounds good.



I have another problem


transform.localPosition assign attempt for 'NotifyReplacement' is not valid. Input localPosition is { 316.960938, NaN, 0.000000 }.
UnityEngine.Transform:set_localPosition(Vector3)
EasyLayoutNS.EasyLayoutBaseType:SetPositions() (at Assets/New UI Widgets/Scripts/EasyLayout/EasyLayoutBaseType.cs:157)
EasyLayoutNS.EasyLayoutBaseTypeerformLayout(List`1, Boolean) (at Assets/New UI Widgets/Scripts/EasyLayout/EasyLayoutBaseType.cs:72)
EasyLayoutNS.EasyLayouterformLayout(Boolean) (at Assets/New UI Widgets/Scripts/EasyLayout/EasyLayout.cs:1342)
EasyLayoutNS.EasyLayout:RepositionElements() (at Assets/New UI Widgets/Scripts/EasyLayout/EasyLayout.cs:1142)
EasyLayoutNS.EasyLayout:SetLayo

UPDATE 2:
Please ignore this error, as it was happening due to using content size fitter.



====

So new question is hide animation (Slide Down) is working for Notification, but Show animation (slide up) is not working, it immediatly appears

 

Please check the notification container or parent game object RectTransform settings. Probably some value is NaN.

What notification animation are you use?

 

Hi @ilih
One major problem with Dialog and Notify is that they dont use generic, so its not possible to extend Notify and then Call its clone method to get subclass

For example, i want to extend Notify with close button show or hide state
So quick fix is, that you add this parameter in Notify.Show

 

Hi yes, it was due to Content Size Fitter, now working fine.


Another question is hide animation (Slide Down) is working for Notification, but Show animation (slide up) is not working, it immediatly appears

 

The Dialog was converted to generic in one of the lastest updates.
You can write this and Clone() method return instance of YourDialog type.

Code (CSharp):

1. public class YourDialog : DialogCustom<YourDialog>
2. {
3. }

Notify is not converted yet.

I'll check it.

 

Thanks, Here is the code for notify show animation which doesnt seem to work
PrefabNotify.Clone().Show(message, hideDelay, null, Notify.AnimationSlideUp, Notify.AnimationSlideDown );

 

Both

Notify.AnimationSlideUp

and

Notify.AnimationSlideDown

are animations to hide the notification, the difference between them is animation direction.

Add following code to the Notify.cs and you can use

Notify.ShowAnimationSlideUp

.

Code (CSharp):

1.         /// <summary>
2.         /// Slide animation to up.
3.         /// </summary>
4.         /// <param name="notification">Notification.</param>
5.         /// <returns>Animation coroutine.</returns>
6.         public static IEnumerator ShowAnimationSlideUp(Notify notification)
7.         {
8.             return ShowAnimationSlideBase(notification, false, +1f, 200f);
9.         }
10.  
11.         /// <summary>
12.         /// Base slide animation.
13.         /// </summary>
14.         /// <param name="notification">Notification.</param>
15.         /// <param name="isHorizontal">Is horizontal slide?</param>
16.         /// <param name="direction">Slide direction.</param>
17.         /// <param name="speed">Speed.</param>
18.         /// <param name="animateOthers">Animate other notifications.</param>
19.         /// <returns>Animation coroutine.</returns>
20.         public static IEnumerator ShowAnimationSlideBase(Notify notification, bool isHorizontal, float direction, float speed, bool animateOthers = true)
21.         {
22.             var layout = notification.GetComponentInParent<EasyLayout>();
23.             if (layout != null)
24.             {
25.                 layout.UpdateLayout();
26.             }
27.  
28.             var replacement = GetReplacement(notification);
29.  
30.             var layout_element = Utilities.GetOrAddComponent<LayoutElement>(notification);
31.             layout_element.ignoreLayout = true;
32.  
33.             var rect = notification.transform as RectTransform;
34.             var base_size = isHorizontal ? rect.rect.width : rect.rect.height;
35.             var base_pos = rect.anchoredPosition;
36.  
37.             var time = base_size / speed;
38.             var end_time = Utilities.GetTime(notification.UnscaledTime) + time;
39.             var axis = isHorizontal ? RectTransform.Axis.Horizontal : RectTransform.Axis.Vertical;
40.  
41.             while (Utilities.GetTime(notification.UnscaledTime) <= end_time)
42.             {
43.                 if (!animateOthers)
44.                 {
45.                     base_pos = replacement.anchoredPosition;
46.                 }
47.  
48.                 var t = 1 - ((end_time - Utilities.GetTime(notification.UnscaledTime)) / time);
49.                 var size = Mathf.Lerp(base_size, 0, t);
50.                 rect.anchoredPosition = isHorizontal
51.                     ? new Vector2(base_pos.x + (size * direction), base_pos.y)
52.                     : new Vector2(base_pos.x, base_pos.y + (size * direction));
53.  
54.                 if (animateOthers)
55.                 {
56.                     replacement.SetSizeWithCurrentAnchors(axis, base_size - size);
57.                     if (layout != null)
58.                     {
59.                         layout.NeedUpdateLayout();
60.                     }
61.                 }
62.  
63.                 yield return null;
64.             }
65.  
66.             layout_element.ignoreLayout = false;
67.  
68.             Replacements.Push(replacement);
69.             replacement.gameObject.SetActive(false);
70.             replacement.SetSizeWithCurrentAnchors(axis, base_size);
71.  
72.             if (layout != null)
73.             {
74.                 layout.NeedUpdateLayout();
75.             }
76.         }
77.  

 

Added nodes reordering in v1.12.3f1. This version will be available at the asset store after approve,

I added a generic Notify class in v1.12.3f1.
Works the same way as generic Dialog:

Code (CSharp):

1. public class MyNotify : NotificationCustom<MyNotify>
2. {
3.    // ...
4. }

Also added show animations for notifications.

 

you are the best

 

Hi @ilih,
where do i find example for https://ionicframework.com/docs/api/skeleton-text for Lists Views? I remember you implemented it.

 

Examples / ListView / ListViewLoading scene

 

In Ionic implementation, flare goes away in speed (already in your implementation)
but then ionic based wait for x amount of time before moving flare again.

So please add that "delay" parameter in UIFlare shader.

EDIT
[2] Also flare comes and goes away completely out of the view but your remains inside the container , please also improve this


Edit [3]
I'm not able to get that ionic like Pro effect , please advise


Thanks

 

Added "Flare Delay" in 1.12.5b1

• create a copy of DefaultItem to use as loading placeholder, set it as current DefaultItem
• replace all Text components inside DefaultItem with Image components
• set new material with UIFlare shader to created Image components
• create a script to load data and replace DefaultItem to the original one after loading (example script is ListViewLoading.cs)

 

v1.12.4 released
Changelog:

• Unity 4.6+ and Unity 5.x no more supported, now the oldest supported version is 2017.4
• fixed SendMessage warnings in Unity 2019.3 and later versions
• assembly definitions removed because of the all changes in .asmdef files are deleted on package update
• ListView: DefaultItem no more disabled by default in Editor mode
• ListViewDragSupport: added auto-scroll when the drag is near the border
• Notify: now you can create derived classes with NotificationCustom<T>
• TreeView Drag&Drop: now nodes can be reordered

 

I'm a few builds behind so you may have fixed this, but just in case I found this crash:
InputFieldExtended.cs
public string Value
{
get
{
return text;
}
set
{
#if UNITY_5_3_4 || UNITY_5_3_OR_NEWER
// BUG! Use text, not m_Text, so we go through InputField.SetText and fix the caret position
if (text != value)
{
text = value;
UpdateLabel();
}
#else
text = value;
#endif
}
}
The crash I was seeing happened if you had a number in the spinner with leading 0's. So if you typed in 0000010 and the caret was say next to the 1 and you hit return. The ValidateOnEnd code would set the Value but the Value setter was setting "m_Text" to "10" , not "text". Since it didn't go through the InputField.text setter, it bypassed the InputField.SetText() validation code that ensured the caret was in a valid location. Then in InputField.UpdateLabel it would call InputField.SetDrawRangeToContainCaretPosition(int caretPos) and use 5 or 6 for the caret position in a string that was only 2 characters long and crash. I've changed your code to use "text" above and now it works without crashing.

 

Thanks, I'll add this fix in the next update.

 

Sometimes in list view variable height, it will not let me view the bottom of the list. It keeps kicking me up a few items. Restarting the app fixes the list, sometimes calling a manual resize fixes it, sometimes not.

 

Is ListView.PrecalculateItemSizes enabled?
What package version and Unity version are you use?

 

Precalculated item size is enabled.
unity 2018.4.26f1, ui 1.11.1f1

 

Please try to update the package to 1.12.4f1.
I think I already fixed it in one of the updates.

 

I did a test upgrade and got this error:

NullReferenceException: Object reference not set to an instance of an object
UIWidgets.TabButtonComponentBase.SetButtonData (UIWidgets.Tab tab) (at Assets/New UI Widgets/Scripts/Tabs/TabButtonComponentBase.cs:22)
UIWidgets.Tabs+TabButtonInfo.SetTab (UIWidgets.Tab tab) (at Assets/New UI Widgets/Scripts/Tabs/Tabs.cs:76)
UIWidgets.Tabs.SetButtonName (UIWidgets.Tabs+TabButtonInfo button, System.Int32 index) (at Assets/New UI Widgets/Scripts/Tabs/Tabs.cs:456)
UIWidgets.Extensions.ForEach[T] (System.Collections.Generic.IEnumerable`1[T] enumerable, System.Action`2[T1,T2] handler) (at Assets/New UI Widgets/Scripts/Utilites/Extensions.cs:25)
UIWidgets.Tabs.CreateButtons () (at Assets/New UI Widgets/Scripts/Tabs/Tabs.cs:446)
UIWidgets.Tabs.UpdateButtons () (at Assets/New UI Widgets/Scripts/Tabs/Tabs.cs:286)
UIWidgets.Tabs.Init () (at Assets/New UI Widgets/Scripts/Tabs/Tabs.cs:278)
UIWidgets.Tabs.Start () (at Assets/New UI Widgets/Scripts/Tabs/Tabs.cs:252)

 

After investigating more all of the tab headers have changed from TabButtonComponentTMPro to TabButtonComponentBase

 

Please check is TMPro Support enabled in Edit / Project Settings,,, / New UI Widgets?
Looks like for some reason it became disabled after the update: TabButtonComponentBase was added because TabButtonComponentTMPro is not available with disabled TMPro Support.

I do not understand why because assembly definitions were removed in this update, so asmdef files overwriting should not happen and the update should not cause such a problem.

 

I manually added the TextAdapter script to the header sections and it seems happy now.
No worries, these tabs have saved my project tons of time and organization, thanks

 

I upgraded to latest 1.12.4f1 and the listview still bounces up so you can't view the bottom of the list at certain sizes. Any ideas?

 

Holly S***.. That worked perfectly..
Thank you.
I am beginning to sound like a broken record.
I can't tell you how much we appreciate the support.

 

Please check the following things:

• Change ListView.Container EasyLayout.Margin to (0, 0) and check if problem still exists
• Check Examples/ListView/ListViewVariableHeight/ListViewVariableHeight and Examples/ListView/Chat/Chat scenes, are problem is reproduced with those scenes?
• What is a base class for your ListView? Is it ListViewCustom<> or some other class?
• Just in case: any warnings in the console window?