New UI Widgets

Please try this instead last line:

Code (CSharp):

1. ScrollRect.content.anchoredPosition = new_position;
2. ScrollRect.Rebuild(UnityEngine.UI.CanvasUpdate.PostLayout);
3. ScrollRect.content.anchoredPosition = new_position;

It is not mistake - you should set same value two times and call Rebuild in between.

 

Still Same

 

Also try disable ListView.LimitScrollValue and change ScrollRect Movement Type to Unrestricted or Elastic.

 

Hi all,

I just purchased "New UI Widgets" and I have an error with ListView :

Code (CSharp):

1. Trying to remove Text (UnityEngine.UI.Text) from rebuild list while we are already inside a rebuild loop. This is not supported.
2. UnityEngine.GameObject:SetActive(Boolean)
3. UIWidgets.ScrollRectPaginator:<UpdatePageButtons>m__0(ScrollRectPage) (at Assets/UIWidgets/Standart Assets/ScrollRectUtilites/ScrollRectPaginator.cs:428)
4. System.Collections.Generic.List`1:ForEach(Action`1)
5. UIWidgets.ScrollRectPaginator:UpdatePageButtons() (at Assets/UIWidgets/Standart Assets/ScrollRectUtilites/ScrollRectPaginator.cs:428)
6. UIWidgets.ScrollRectPaginator:set_Pages(Int32) (at Assets/UIWidgets/Standart Assets/ScrollRectUtilites/ScrollRectPaginator.cs:206)
7. UIWidgets.ScrollRectPaginator:RecalculatePages() (at Assets/UIWidgets/Standart Assets/ScrollRectUtilites/ScrollRectPaginator.cs:721)
8. UnityEngine.Events.UnityEvent:Invoke()
9. UIWidgets.ResizeListener:OnRectTransformDimensionsChange() (at Assets/UIWidgets/Standart Assets/Utilites/ResizeListener.cs:45)
10. UnityEngine.UI.ScrollRect:LateUpdate()

It has something to do with the way the ScrollRectPaginator caches pages :

Code (CSharp):

1. var to_cache = DefaultPages.GetRange(Pages, DefaultPages.Count - Pages);
2.  
3.                 to_cache.ForEach(x => x.gameObject.SetActive(false));
4.                 DefaultPagesCache.AddRange(to_cache);
5.                 DefaultPages.RemoveRange(Pages, DefaultPages.Count - Pages);
6.  
7.                 if (SRNextPage!=null)
8.                 {
9.                     SRNextPage.SetPage(Pages - 1);
10.                 }

I tried to fix it by myself but it's harded than expected, does someone have a solution ? I really need to use ListView

Thank you for your answer(s)

 

What Unity version you use? It's not reproduced on the versions I tested.

As temporary fix you can add following code to UIWidgets/Standart Assets/ScrollRectUtilites/ScrollRectPaginator.cs

Code (CSharp):

1.         protected bool NeedUpdatePageButtons;
2.  
3.         protected virtual void Update()
4.         {
5.             if (NeedUpdatePageButtons)
6.             {
7.                 UpdatePageButtons();
8.                 NeedUpdatePageButtons = false;
9.             }
10.         }

and replace Pages property with this code:

Code (CSharp):

1.         public virtual int Pages {
2.             get {
3.                 return pages;
4.             }
5.             protected set {
6.                 pages = value;
7.                 NeedUpdatePageButtons = true;// instead UpdatePageButtons();
8.             }
9.         }

This way page buttons will be update in next frame, not in current during rebuild loop.

 

Hi, I recently got a new error (I'm using Unity 5.6.3p2) once my application is built (it does not occur if running with the editor) :

The VisibilityTreeView is a simple class inherited from TreeViewCustom
It seems to prevent my application UI from working.

Do you have any fix about this ? I tried last version of the asset but the error still occurs.

 

Please check VisibilityTreeView code, this problem can be caused

• "#if UNITY_EDITOR" for serialized field
• using constructor for class derived from MonoBehaviour
• two or more different classes with same name VisibilityTreeView

Code (CSharp):

1. using UnityEngine;
2. using System;
3.  
4. namespace UIWidgetsSamples
5. {
6.     public class TestError : MonoBehaviour
7.     {
8.         public string ValidString;
9.  
10.         // this can cause error, remove #if UNITY_EDITOR or add [NonSerialized] attribute and remove [SerializeField] attribute
11.         #if UNITY_EDITOR
12.         [SerializeField]
13.         string someString;
14.  
15.         public int SomeInt;
16.         #endif
17.  
18.         public A SomeClass;
19.  
20.         // this also can cause error, don't use constructors for class derived from MonoBehaviour and ScriptableObject
21.         // instead use Start() for MonoBehaviour or override Init() for TreeView
22.         public TestError()
23.         {
24.             SomeClass = new B();
25.         }
26.     }
27.  
28.     [Serializable]
29.     public class A
30.     {
31.     }
32.  
33.     [Serializable]
34.     public class B : A
35.     {
36.         public string AnotherString;
37.     }
38. }
39.  
40. namespace AnotherNamespace
41. {
42.     // another class with same name also can cause error
43.     public class TestError : MonoBehaviour
44.     {
45.  
46.     }
47. }

 

Thanks, I had no "#if UNITY_EDITOR" with serialized field, no duplicate class names, and only 2 EMPTY constructors in Monobehaviour classes but it did not fix my problem.

However, I managed to fix it. It was linked to code obfuscation. I skipped obfuscation of UIWidgets classes , and of personal classes that inherited from UIWidgets classes, and the error disappeared.

Thanks for your help !

 

Hello Ilya!
I think in this code (AutocompleteCustom.cs):

Code (CSharp):

1.  
2. /// <summary>
3. /// Handle input deselected event.
4. /// </summary>
5. /// <param name="eventData">Event data.</param>
6. protected virtual void InputDeselected(BaseEventData eventData)
7. {
8.     var ev = eventData as PointerEventData;
9.     if ((ev!=null) && (ev.pointerCurrentRaycast.gameObject!=null) && (ev.pointerCurrentRaycast.gameObject.transform.IsChildOf(DisplayListView.Container)))
10.     {
11.          AllowItemSelectionEvent = true;
12.     }
13.     else
14.     {
15.          HideOptions();
16.     }
17. }
18.  

must be:

Code (CSharp):

1.  
2. if ((ev!=null) && (ev.pointerCurrentRaycast.gameObject!=null) && (ev.pointerCurrentRaycast.gameObject.transform.IsChildOf(DisplayListView.transform)))
3.  

else click on DisplayListView scrollbar invoke HideOptions();

Thanks for UI Widgets!

 

Thanks, I'll add this fix.

 

@ilih - Unless you intended for the chat example audio to be 3D, best to set audio source spatial blend to 2D.

I was wondering, why do I never hear this audio ...?

 

Thanks, I'll fix it.
I did not check if audio is really heard in other Unity versions except 4.6.

 

I tried the "UIWidgets-1.9.2.exe" but it seems that moving the focus via keyboard (i.e. TAB key) between widgets is not implemented.
So, is it possible to have this behaviour in UI Widgets?

Regards,
Gianni

 

Keyboard navigation is works, but it's uses arrow keys, not TAB key. It's standard Unity UI behaviour.

 

OK, but arrow keys does not seem to work in the demo either, right? Anyway, is the keyboard navigation customizable in UI Widgets?

 

Works, but hightlight effect on buttons very weak so it's hard to notice, you can try it with ListView or RangeSlider.

Yes.

 

Hi ilih,
I'm sorry to insist but the arrow keys seems working to move from value to value inside a single widget. My question was different: I mean moving from widget to widget. Please give a look at "spinners.png" attached. The focus is on "Spinner" and I want to push a key (Tab, or left-arrow) to move the focus to the following widget (i.e."Tooltip").

Looking at "UIWidgets-1.9.2.exe" I also noticed an incorrect visualization on "Spinner and Slider" page. You can see the vertical sliders overlapping the label in "sliders.png" image.

Regards,
Gianni

 

Yes, you can move from widget to widget.
I changed highlighted color and made video how it's looks https://ilih.ru/unity-assets/video/UIWidgets/ArrowsNavigation.mp4
And here is navigation graph in editor:

Thanks, I'll fix it.

 

New UI Widgets on Black Friday Sale, 50% off

 

@ilih Does it work with android and ios?

 

It's works with android. I cannot check ios version, but should works too.

 

Does this support xbox (etc) controllers? (I searched the topic but wasn't clear about the answer.

thx

 

I'm considering New UI Widgets but all the screenshots show the same theme. What is the difficulty in changing colors/textures/fonts? Do you have a gallery of other themes?

 

Yes, you can navigate between widgets and click on them.
Only exception are widgets with default Unity InputField which does not have any virtual keyboard, so you cannot type anything in InputFields.

 

Same as default Unity UI widgets. Problem can be with amount of widgets you want to change, it's take a lot of time to change all of them.

No.

 

Hi, I've been looking at this tutorial on combobox:

https://ilih.ru/unity-assets/UIWidgets/docs/Manual.Combobox/

When you select an item from the list of a combobox it seems that you can only select the text, a string, would it be possible to select something else? For example, the object to which this text is associated. I ask to save information in each element of a list of a combobox that I can then obtain by selecting an item from the list. For example:

You have a selection of eye types in the combobox:
Blues
Green
Blacks

When you select one, the only way to know what you have chosen is to make a comparison of strings, but if for example the player does not play in English but in another language, for example Spanish, it would be:
Azules
Verdes
Negros

And the comparison between strings would not work. But if the object in the canvas containing the text Blues or "Azules" has a class associated with information, I can add there any type of information to access it if the player selects Blues in the combobox.

I do not know if I explained well.

I am also interested in knowing if it is possible in the Tree View.

 

For localization support you can use ComboboxIcons with LocalizedName property (ListViewIcons items and TreeView nodes also have LocalizedName property) and compare by Name with original value.
Or you can create own Combobox or TreeView with own types.

Basic ListView and Combobox with string value are outdated widgets, they leaved by compatibility reasons. Now better use ListViewIcons and ComboboxIcons or create your own using ListViewCustom/ComboboxCustom/TreeViewCustom etc.

 

Okay, thank you very much. In that case I'm going to buy your asset, I'm interested.

 

Hey!

I'm considering purchasing your asset however can you please clarify whether it would be possible to change the font to an alternative font easily across all items?

Thanks

 

Relatively easy.

1. Drag&drop all prefabs from UIWidgets/Prefabs to empty scene
2. Hierarchy window, search by type, find "Text"
3. Select all finded gameobjects with Ctrl+A
4. Change font in Inspector window
5. Reset search
6. Click "Apply" for each prefab in Inspector window, this is take time - it's near 50 prefabs

 

@ilih standard UnityEvent in inspector for switches plx

 

used tiny fraction of everything so far, but e.g. draggable and resizable work without much hassle with practically anything thrown at it - good job !

 

Sorry, forgot to mark event class as serializable.
Fix:
UIWidgets/Standart Assets/Switch/Switch.cs, add "[System.Serializable]" before SwitchEvent definition.

Code (CSharp):

1.     [System.Serializable]
2.     public class SwitchEvent : UnityEvent<bool>

After this OnValueChanged event will be available in Inpector window.

 

Greetings,
in a ListViewIcons, what is the best way to:

• temporarily hide an element
• temporarily disable it (make it not interactable)

Many thanks

 

Create new ListView based on ListViewIcons

1. Create item class with Visible and Interactable properties and derived from ListViewIconsItemDescription
(you need to change ListViewIconsItemDescription.Changed access to protected)

Code (CSharp):

1. using UIWidgets;
2. using System;
3.  
4. namespace UIWidgetsSamples
5. {
6.     [Serializable]
7.     public class ListViewIconsItemDescriptionExt : ListViewIconsItemDescription
8.     {
9.         bool visible = true;
10.  
11.         public bool Visible {
12.             get {
13.                 return visible;
14.             }
15.             set {
16.                 visible = value;
17.                 Changed("Visible");
18.             }
19.         }
20.  
21.         bool interactable = true;
22.  
23.         public bool Interactable {
24.             get {
25.                 return interactable;
26.             }
27.             set {
28.                 interactable = value;
29.                 Changed("Interactable");
30.             }
31.         }
32.     }
33. }

2. Create component class which will check is item interactable and derived from ListViewIconsItemComponent

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.EventSystems;
3. using UIWidgets;
4.  
5. namespace UIWidgetsSamples
6. {
7.     public class ListViewIconsItemComponentExt : ListViewIconsItemComponent, IViewData<ListViewIconsItemDescriptionExt>
8.     {
9.         /// <summary>
10.         /// Gets the current item.
11.         /// </summary>
12.         public ListViewIconsItemDescriptionExt ItemExt {
13.             get;
14.             protected set;
15.         }
16.  
17.         public virtual void SetData(ListViewIconsItemDescriptionExt item)
18.         {
19.             ItemExt = item;
20.             SetData(item as ListViewIconsItemDescription);
21.         }
22.  
23.         public override void OnPointerClick(PointerEventData eventData)
24.         {
25.             if (ItemExt.Interactable)
26.             {
27.                 base.OnPointerClick(eventData);
28.             }
29.         }
30.  
31.         public override void OnSubmit(BaseEventData eventData)
32.         {
33.             if (ItemExt.Interactable)
34.             {
35.                 base.OnSubmit(eventData);
36.             }
37.         }
38.  
39.         public override void OnSelect(BaseEventData eventData)
40.         {
41.             if (ItemExt.Interactable)
42.             {
43.                 base.OnSelect(eventData);
44.             }
45.         }
46.  
47.         public override void OnDeselect(BaseEventData eventData)
48.         {
49.             if (ItemExt.Interactable)
50.             {
51.                 base.OnDeselect(eventData);
52.             }
53.         }
54.     }
55. }

3. Create ListViewIconsExt with DataSourceExt property to use it instead DataSource.

Code (CSharp):

1. using UIWidgets;
2. using System.Linq;
3.  
4. namespace UIWidgetsSamples
5. {
6.     public class ListViewIconsExt : ListViewCustom<ListViewIconsItemComponentExt,ListViewIconsItemDescriptionExt>
7.     {
8.         protected ObservableList<ListViewIconsItemDescriptionExt> dataSourceExt;
9.  
10.         /// <summary>
11.         /// Gets or sets the data source.
12.         /// </summary>
13.         /// <value>The data source.</value>
14.         public virtual ObservableList<ListViewIconsItemDescriptionExt> DataSourceExt {
15.             get {
16.                 if (dataSourceExt==null)
17.                 {
18.                     #pragma warning disable 0618
19.                     dataSourceExt = new ObservableList<ListViewIconsItemDescriptionExt>(DataSource);
20.                     dataSourceExt.OnChange += UpdateDataSource;
21.  
22.                     DataSource = new ObservableList<ListViewIconsItemDescriptionExt>(dataSourceExt, false);
23.                     UpdateDataSource();
24.  
25.                     #pragma warning restore 0618
26.                 }
27.                 return dataSourceExt;
28.             }
29.             set {
30.                 if (dataSourceExt!=null)
31.                 {
32.                     dataSourceExt.OnChange -= UpdateDataSource;
33.                 }
34.                 dataSourceExt = value;
35.                 dataSourceExt.OnChange += UpdateDataSource;
36.  
37.                 DataSource = new ObservableList<ListViewIconsItemDescriptionExt>(false);
38.                 UpdateDataSource();
39.             }
40.         }
41.  
42.         protected void UpdateDataSource()
43.         {
44.             DataSource.BeginUpdate();
45.  
46.             DataSource.Clear();
47.             DataSource.AddRange(DataSourceExt.Where(x => x.Visible));
48.  
49.             DataSource.EndUpdate();
50.         }
51.     }
52. }

4. Replace ListViewIcons and ListViewIconsItemComponent to new components in ListViewIcons gameobject.

 

Thanks, the code works like a charm!
I also need to add a passive color property in the ListViewIconsExt for not interactable elements?

 

Add at start of ListViewIconsExt.cs "using UnityEngine;".
And add inside class colors definition and overrided coloring functions:

Code (CSharp):

1.         [SerializeField]
2.         public Color DisabledColor = Color.gray;
3.  
4.         [SerializeField]
5.         public Color DisabledBackgroundColor = Color.gray;
6.  
7.         protected override void HighlightColoring(ListViewIconsItemComponentExt component)
8.         {
9.             if (component==null)
10.             {
11.                 return ;
12.             }
13.  
14.             if (DataSource[component.Index].Interactable)
15.             {
16.                 base.HighlightColoring(component);
17.             }
18.             else
19.             {
20.                 component.GraphicsColoring(DisabledColor, DisabledBackgroundColor, FadeDuration);
21.             }
22.         }
23.  
24.         protected override void SelectColoring(ListViewIconsItemComponentExt component)
25.         {
26.             if (component==null)
27.             {
28.                 return ;
29.             }
30.  
31.             if (DataSource[component.Index].Interactable)
32.             {
33.                 base.SelectColoring(component);
34.             }
35.             else
36.             {
37.                 component.GraphicsColoring(DisabledColor, DisabledBackgroundColor, FadeDuration);
38.             }
39.         }
40.  
41.         protected override void DefaultColoring(ListViewIconsItemComponentExt component)
42.         {
43.             if (component==null)
44.             {
45.                 return ;
46.             }
47.  
48.             if (DataSource[component.Index].Interactable)
49.             {
50.                 base.DefaultColoring(component);
51.             }
52.             else
53.             {
54.                 component.GraphicsColoring(DisabledColor, DisabledBackgroundColor, FadeDuration);
55.             }
56.         }
57.  

 

That's great, many thanks

 

Hi!
looking for control like this Please.

see items are start from zero index if there is no item in left.
same from right.
with out UI effect

 

I'll try to add looped list support in near future.

 

Thanx

 

I'm trying to download the TextMeshPro version from your site, but it won't accept my invoice number. I tried with and without the letter prefix, and with and without the leading 0, with no luck.

 

Please send me invoive number via conversation, I'll check this problem.

 

Hi, is there a way to add and clear tabs from code at runtime? I noticed that I got an exception on start, if the list of tabs is empty
Many thanks

 

To remove exception you need made some changes in UpdateButtons() in UIWidgets/Standart Assets/Tabs/Tabs.cs and TabsCustom.cs (this changes will added in next release, so not will be lost with update)
Remove code at start of the method:

Code (CSharp):

1.             if (tabObjects.Length==0)
2.             {
3.                 throw new ArgumentException("TabObjects array is empty. Fill it.");
4.             }

After "AddCallbacks();" insert code:

Code (CSharp):

1.             if (tabObjects.Length==0)
2.             {
3.                 return ;
4.             }

Here is sample code how to add and clear tabs:

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.UI;
3. using System;
4. using UIWidgets;
5.  
6. namespace UIWidgetsSamples
7. {
8.     /// <summary>
9.     /// Test Tabs creation.
10.     /// </summary>
11.     public class TestTabsCreate : MonoBehaviour
12.     {
13.         /// <summary>
14.         /// The tabs.
15.         /// </summary>
16.         [SerializeField]
17.         protected Tabs Tabs;
18.  
19.         /// <summary>
20.         /// The template.
21.         /// </summary>
22.         [SerializeField]
23.         public GameObject Template;
24.  
25.         /// <summary>
26.         /// Show tabs.
27.         /// </summary>
28.         public void SetTabs(int count)
29.         {
30.             ClearTabs();
31.             Tabs.TabObjects = CreateTabs(count);
32.         }
33.  
34.         /// <summary>
35.         /// Clears the tabs.
36.         /// </summary>
37.         public void ClearTabs()
38.         {
39.             Tabs.TabObjects.ForEach(x => Destroy(x.TabObject));
40.             Tabs.TabObjects = new Tab[]{};
41.         }
42.  
43.         Tab[] CreateTabs(int count)
44.         {
45.             var tabs = new Tab[count];
46.  
47.             for (int i = 0; i < count; i++)
48.             {
49.                 var tab_name = "Tab " + (i + 1);
50.                 tabs[i] = new Tab(){
51.                     Name = tab_name,
52.                     TabObject = CreateTabObject(tab_name),
53.                 };
54.             }
55.             return tabs;
56.         }
57.  
58.         GameObject CreateTabObject(string tabName)
59.         {
60.             var result = Instantiate(Template) as GameObject;
61.             result.name = tabName;
62.             result.transform.SetParent(Template.transform.parent, false);
63.             result.SetActive(true);
64.             result.GetComponentInChildren<Text>().text = tabName;
65.  
66.             return result.gameObject;
67.         }
68.     }
69. }

 

It seems that is not possible to deselect an element from a ListView if you have multiselection disable. How can I disable a single selection element? Thanks

 

You can use following script to deselect the element by click. Add this component to ListView gameobject.
It enables multiselection and when element selected all previously selected elements will be deselected, so it works same as multiselection disable, but the element can be deselected.

Code (CSharp):

1. using UnityEngine;
2. using UIWidgets;
3.  
4. namespace UIWidgetsSamples
5. {
6.     [RequireComponent(typeof(ListViewBase))]
7.     public class ListViewDeselect : MonoBehaviour
8.     {
9.         ListViewBase listView;
10.  
11.         void Start()
12.         {
13.             listView = GetComponent<ListViewBase>();
14.             listView.MultipleSelect = true;
15.             listView.OnSelect.AddListener(SelectListener);
16.             DeselectAllExceptLast();
17.         }
18.  
19.         void SelectListener(int index, ListViewItem component)
20.         {
21.             DeselectAllExceptLast();
22.         }
23.  
24.         void DeselectAllExceptLast()
25.         {
26.             var indices = listView.SelectedIndices;
27.             for (int i=0; i < (indices.Count - 1); i++)
28.             {
29.                 listView.Deselect(indices[i]);
30.             }
31.         }
32.  
33.         void OnDestroy()
34.         {
35.             if (listView!=null)
36.             {
37.                 listView.OnSelect.RemoveListener(SelectListener);
38.             }
39.         }
40.     }
41. }

Also you can deselect element from code with such line "listView.Deselect(listView.SelectedIndex);"

 

I'm having problems with garbage being created by EasyLayout (several KB per frame per active instance of the EasyLayout component). Do you have any idea what it might be, @ilih? I'm not using any of the other components from the pack. It doesn't seem to be caused by the UpdateLayout method, because that's not continually being called.

 

Please show EasyLayout settings, I'll try to reproduce it and check what can cause this problem.
And what version you use? EasyLayoutResizer.cs should be exists in EasyLayout folder.

 

Hey, thanks for the quick reply! I'm using UIWidgets 1.8.4, and there's no EasyLayoutResizer.cs in the folder.

Here's the settings of one of my EasyLayout components. Inside this is just a bunch of buttons (which aren't changing) but it's generating 9.8KB of garbage per frame.