New UI Widgets

hi ililh thanks for the code , but i use this code on listview, it thorw errors

IndexOutOfRangeException: Index must be between 0 and Items.Count (-1). Gameobject ListView.
UIWidgets.ListViewBase.Select (Int32 index) (at Assets/UIWidgets/Standart Assets/ListView/ListViewBase.cs:511)
UIWidgets.Extensions.ForEach[Int32] (IEnumerable`1 enumerable, System.Action`1 handler) (at Assets/UIWidgets/Standart Assets/Utilites/Extensions.cs:36)
UIWidgets.ListViewBase.set_SelectedIndicies (System.Collections.Generic.List`1 value) (at Assets/UIWidgets/Standart Assets/ListView/ListViewBase.cs:111)
UIWidgetsSamples.ListViewSaveIndicies.LoadIndicies () (at Assets/Script/ListViewSaveIndicies.cs:30)
UIWidgetsSamples.ListViewSaveIndicies.Start () (at Assets/Script/ListViewSaveIndicies.cs:19)

 

I suppose you add items in list after ListViewSaveIndicies.Start() call, so you have few options to fix it:

• If you load data in Start() without corutines you can change script executon order - "Edit / Project Settings / Script Execution Order", add ListViewSaveIndicies after default time
• Or you can combine script which set items and ListViewSaveIndicies into one.
  Something like that:
  
  Code (CSharp):

  1.         void Start()
  2.         {
  3.             // first set items
  4.             list = GetComponent<ListViewIcons>();
  5.             list.Start();
  6.  
  7.             list.DataSource = items;
  8.  
  9.             // then load indicies and add save indicies callback
  10.             LoadIndicies();
  11.  
  12.             list.OnSelect.AddListener(SaveIndicies);
  13.             list.OnDeselect.AddListener(SaveIndicies);
  14.         }
• Or add ListViewSaveIndicies from script after you set items, not in Inspector window
  
  Code (CSharp):

  1.         void Start()
  2.         {
  3.             // script to set items
  4.             list = GetComponent<ListViewIcons>();
  5.             list.Start();
  6.  
  7.             list.DataSource = items;
  8.  
  9.             var saveIndicies = gameObject.AddComponent<ListViewSaveIndicies>();
  10.             saveIndicies.Key = "some key";
  11.         }

Code (CSharp):

1. using UnityEngine;
2. using UIWidgets;
3. using System.Collections.Generic;
4. using System.Linq;
5.  
6. namespace UIWidgetsSamples {
7.     [RequireComponent(typeof(ListViewBase))]
8.     public class ListViewSaveIndicies : MonoBehaviour {
9.         [SerializeField]
10.         public string Key = "Unique Key";
11.  
12.         [SerializeField]
13.         ListViewBase list;
14.  
15.         void Start()
16.         {
17.             list = GetComponent<ListViewBase>();
18.             list.Start();
19.  
20.             LoadIndicies();
21.  
22.             list.OnSelect.AddListener(SaveIndicies);
23.             list.OnDeselect.AddListener(SaveIndicies);
24.         }
25.  
26.         void LoadIndicies()
27.         {
28.             if (PlayerPrefs.HasKey(Key))
29.             {
30.                 var indicies = String2Indicies(PlayerPrefs.GetString(Key));
31.                 indicies.RemoveAll(x => !list.IsValid(x));
32.                 list.SelectedIndicies = indicies;
33.             }
34.         }
35.  
36.         void SaveIndicies(int index, ListViewItem component)
37.         {
38.             PlayerPrefs.SetString(Key, Indicies2String(list.SelectedIndicies));
39.         }
40.  
41.         List<int> String2Indicies(string str)
42.         {
43.             if (str=="")
44.             {
45.                 return new List<int>();
46.             }
47.             return str.Split(',').Select(x => int.Parse(x)).ToList();
48.         }
49.  
50.         string Indicies2String(List<int> indicies)
51.         {
52.             if ((indicies==null) || (indicies.Count==0))
53.             {
54.                 return "";
55.             }
56.             return string.Join(",", indicies.Select(x => x.ToString()).ToArray());
57.         }
58.     }
59. }

 

hi ililh thanks ! problem solved !

 

Is it possible to use this asset with Unityscript?

 

Yes, but you need to move UIWidgets folder to "Standard Assets" or Plugins folder.
And specify "import UIWidgets;" in scripts.

 

Hi, thanks for this amazing widget collection.
It will be nice to also have a tab menu which uses icons instead of texts

 

I have plans for this.

 

@ilih
Any plans for AutoComplete and Switch Component? Happy Christmas

 

May be, not sure for now.

What is this?

 

https://maniacdev.com/wp-content/uploads/2013/06/mbswitch2.gif

 

I'll think about it. If you don't need animation you can use Toggle component - set off image to background object and on image to checkmark object.

 

I actually need animation, Thanks

 

Three days ago, I was going to buy it at 20$. Today I opened the asset store, and I found it at 40$. Any chance to get it at 20$? (or I have to wait for the next discount... if any.. )

 

Only wait for next discount. Sorry.

 

Hi, using your asset love it.
My question is general. I replaced my Scroll view with a ListViewGameObjects. It was pretty easy to do but my question is, is there a performance advantage? Is there some kind of infinite scroll logic going on?

Before I just had a scroll view and I instantiated objects and added them to the content of the scroll view with a rectTransform.setParent. Looking at my game hierarchy it seems like the ListViewGameObject is essentially doing the same thing when I add objects to it.

 

No.
ListViewGameObjects was added in first versions and it don't have any perfomance advantage.
Later was added ListViewCustom for creating own ListView's - it's easy to use and have optimized perfomance (GameObjects created only for visible items).
You can check how to create own ListView in documentation and with Sample Assets: folders ListView, ToDoList, Table, Shops and sample scene (TileView also can be helpful - it's have only visual difference with ListViewCustom). If you will have problem with creating own ListView I be glad to help.

For now ListView's does not support infinite scroll.

 

Thanks! I will try it out

 

Version 1.7.4 released

Changelog:

• v.1.7.4:
  • Added Switch
  • Resizable: added KeepAspectRatio property
  • Tabs: added SelectedTab property
  • Tabs: added OnTabSelect event
  • Known problems: Accordion with EasyLayout and Canvas.PixelPerfect enabled in Unity 5.3 cause error "Trying to add (Layout Rebuilder for) {ObjectName} (UnityEngine.RectTransform) for layout rebuild while we are already inside a layout rebuild loop. This is not supported." in some cases. Workaround - use Vertical or Horizontal Layout Group instead EasyLayout.
• v.1.7.2:
  • Fixed errors in WinStore builds
  • IDropSupport: added DropCanceled method
  • DragSupport: added DragPoint property (empty gameobject on cursor/touch position), you can use it to attach custom gameobject with information about draggable object
  • ListViewIconsDragSupport, TreeViewNodeDragSupport: show information about draggable object
  • Tabs: added Tabs with icons

 

I have bought this and am a little frustrated, because I can't seem to get the assets to do anything different to their sample state.

I Click UI->ListViewIcons, and all I am trying to do to start with is get the scroll to work horizontally (not vertically as default). Setting the property to "Horizontal" on the ListViewIcons, doesn't work, nor attempting to subsequently set all the child objects up correctly (like the scrollbar and the scrollrect)

I am sure this is something I am doing wrong, but there are no instructions that I can find with this asset pack to tell me how to actually use it. Have I missed these?

 

Yes, I forgot to mention it in documentation.
ListViewIcons can be easily visiually customized, but it make imposible to automaticly change visual with direction change.
(Probably it's possible correctly proccess direction change for initial state with some code, but after changing sprite, sizes, etc it will make visual only worse - you can check it with default Unity Slider or Scrollbar - create one of them, set RectTransform anchors to any with strech, then change direction from horizontal to vertical or backwards and you can see how it's broken.)
Because of this visual not changed with direction change, it should be done manually after changing direction to Horizontal:

• DefaultItem.RectTransform: set anchors to top left (or any without horizontal stretch)
• ListViewIcons.RectTransform: change height to fit only one item
• Duplicate Scrollbar, set Direction = Left to Right, fix size and position, replace sprites for Background (scrollbar_horizontal_background) and Handle (scrollbar_horizontal_handle), specify HorizontalScrollbar in ScrollRect
• List.ContentSizeFitter: HorizontalFit = PreferredSize, VerticalFit = Unconstrained (for now it's a bug, it should be done automaticly with direction change)

Or changing direction in runtime:

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.UI;
3. using UIWidgets;
4.  
5. namespace UIWidgetsSamples {
6.     public class TestListViewDirectionToggle : MonoBehaviour {
7.         public ListViewIcons ListView;
8.  
9.         public void ToggleDirection()
10.         {
11.             // DefaultItem.RectTransform.anchors should be top left
12.  
13.             var fitter = ListView.Container.GetComponent<ContentSizeFitter>();
14.             var list_transform = (ListView.transform as RectTransform);
15.             if (ListView.Direction==ListViewDirection.Horizontal)
16.             {
17.                 // reset scroll position
18.                 (ListView.Container as RectTransform).anchoredPosition = Vector2.zero;
19.  
20.                 // change ListViewIcons size
21.                 list_transform.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, 190f);
22.                 list_transform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, 240f);
23.  
24.                 // fix content size fitter
25.                 fitter.horizontalFit = ContentSizeFitter.FitMode.Unconstrained;
26.                 fitter.verticalFit = ContentSizeFitter.FitMode.PreferredSize;
27.  
28.                 // change direction
29.                 ListView.Direction = ListViewDirection.Vertical;
30.             }
31.             else
32.             {
33.                 // reset scroll position
34.                 (ListView.Container as RectTransform).anchoredPosition = Vector2.zero;
35.  
36.                 // change ListViewIcons size
37.                 list_transform.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, 70f);
38.                 list_transform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, 400f);
39.  
40.                 // fix content size fitter
41.                 fitter.horizontalFit = ContentSizeFitter.FitMode.PreferredSize;
42.                 fitter.verticalFit = ContentSizeFitter.FitMode.Unconstrained;
43.  
44.                 // change direction
45.                 ListView.Direction = ListViewDirection.Horizontal;
46.             }
47.         }
48.     }
49. }

 

Hi @ilih

Is there a way to get tooltips to stop showing in the editor?

I have a few tooltips set up, and they are all showing when using the editor.

Am I setting them up correctly? What I do is, drag the tooltip.cs file onto the item on which I want to have a tooltip.

They work fine when I am running the scene, I'd just like them to hide themselves in the editor.

 

Disable Tooltip gameobject in Inspector window

 

Welll that was simple enough! Thank you for the prompt reply.

 

Hi @ilih
setting left margin increases item height which is wrong. please take a look.

 

Thanks.
Fix:
EasyLayout.cs, replace line 528
old line:

Code (CSharp):

1. BlockSize = new Vector2(UISize.x + MarginLeft + MarginRight, UISize.y + MarginLeft + MarginRight);

new line:

Code (CSharp):

1. BlockSize = new Vector2(UISize.x + MarginLeft + MarginRight, UISize.y + MarginTop + MarginBottom);

 

Thanks! Will give it a go!

 

Thanks!

 

Hi @ilih
Should i use Sprite or Texture for use in CustomList? which one do you recommend?

 

Sprite will be better in most cases, unless you already have list of textures and you don't need Sprite or Image features.

 

ill be loading them from net and they will be loaded as textures, 1 texture may appear in multiple list items, so which one should i go with peformance wise?

 

Texture

 

Will do, Thanks

 

Please make DataSource virtual in next update so we can add custom logic by overriding it.
Thanks

 

Ok

 

Is there any function to see what items are visible on CustomList? For example items from index 5 to 10 visible?

 

You can use protected fields topHiddenItems and visibleItems. Indicies of visible items will be in range from topHiddenItems to topHiddenItems + visibleItems - 1
You can check if item visible with following code

Code (CSharp):

1.         public bool IsItemVisible(int index)
2.         {
3.             return topHiddenItems<=index && index<=(topHiddenItems + visibleItems - 1);
4.         }
5.  

 

so if i want to get all visible items indices then it should be like that?

Code (CSharp):

1.         public List<int> GetVisibleIdeces(){
2.  
3.  
4.             int lastIndex = (topHiddenItems + visibleItems - 1);
5.  
6.  
7.  
8.             List<int> visibleIndecis = new List<int> ();
9.  
10.  
11.             for (int i = topHiddenItems; i <= lastIndex; i++) {
12.  
13.  
14.                 visibleIndecis.Add (i);
15.  
16.             }
17.  
18.  
19.             return visibleIndecis;
20.  
21.         }

 

It can be shorter

Code (CSharp):

1. using System.Linq;
2.         //...
3.         public List<int> GetVisibleIndicies()
4.         {
5.             return Enumerable.Range(topHiddenItems, visibleItems).ToList();
6.         }

 

Please add both functions in next update.

 

Ok

 

hi ilih,

Need so help here, using the ListViewVariableHeightSample to built a chat box.
Adding/clearing message from the chatterbox working as intended.

As i continue adding messages to the chat listbox, the new message is hidden from view.
How to scroll down to the bottom of the list and display the latest item from the c# code?

Br,
Martin

-

 

1. Fix for ListViewCustomHeight (without it will be displayed only two items)
   Replace SetNewItems() in ListViewCustomHeight.cs
   
   Code (CSharp):

   1.         protected override void SetNewItems(ObservableList<TItem> newItems)
   2.         {
   3.             SetItemsHeight(newItems);
   4.             CalculateMaxVisibleItems();
   5.  
   6.             base.SetNewItems(newItems);
   7.         }
2. Code to scroll to latest item:
   
   Code (CSharp):

   1.             // recalculate container RectTransform size
   2.             var fitter = ListViewVariableHeightSample.Container.GetComponent<ContentSizeFitter>();
   3.             fitter.SetLayoutHorizontal();
   4.             fitter.SetLayoutVertical();
   5.  
   6.             // scroll to end
   7.             ListViewVariableHeightSample.ScrollRect.verticalNormalizedPosition = 0f;

Sample code with prefab
https://ilih.ru/unity-assets/Demos/Chat-sample.zip

 

FINALLY SOLVED! the issue has been bugging me for the past 24hrs...
Amazing ilih...., Thank you!

BTW, what's the best way to set red color text for sys message ?

 

Specify message type

Code (CSharp):

1.             // add system message to chat
2.             Chat.DataSource.Add(new ChatLine(){
3.                 UserName = "User",
4.                 Message = "Some message",
5.                 Time = DateTime.Now,
6.                 Type = ChatLineType.System,
7.             });

And set text color depend of message type in ChatLineComponent.SetData()

Code (CSharp):

1.             if (item.Type==ChatLineType.System)
2.             {
3.                 UserName.color = Color.red;
4.                 Message.color = Color.red;
5.             }
6.             else
7.             {
8.                 UserName.color = Color.white;
9.                 Message.color = Color.white;
10.             }

 

Thanks!, thats makes the code clean and neat!!! Like it!

 

How can i enforce EasyLayout to use only 1 column when it can show items into multiple columns?

 

Fow now only set width (with padding and spacing) more than 50% of parent size - best way is set RectTransform anchors to horizontal stretch and edit left and right values.

 

Need help in modify the teamspyview report.
Basically, i attempt to add country column to the existing report framework. The country data is iso_2, example, 'us' will display the us flag icon in the column. default is 'us'.

Progress till display the text field, but not the icon sprite...an example will be good !!!

 

1. Create class to keep country code with flag
   
   Code (CSharp):

   1.     [System.Serializable]
   2.     public class CountryFlag {
   3.         [SerializeField]
   4.         public string Country;
   5.         [SerializeField]
   6.         public Sprite Flag;
   7.     }
2. Add array of CountryFlag to component and Image to display flag
   
   Code (CSharp):

   1.  
   2.         [SerializeField]
   3.         public Image Flag;
   4.         [SerializeField]
   5.         public CountryFlag[] Flags;

• Specify flags
  

• Create function to get flag by country code
  
  Code (CSharp):

  1.         Sprite GetFlag(string country)
  2.         {
  3.             foreach (var flag in Flags)
  4.             {
  5.                 if (flag.Country==country)
  6.                 {
  7.                     return flag.Flag;
  8.                 }
  9.             }
  10.             return null;
  11.         }

• Set flag sprite in SetData()
  
  Code (CSharp):

  1. Flag.sprite = GetFlag(item.Country);

Full code in attachment

 

Ok, flag icon shown in the column, code works.
But, the column drag/sort will mess up with table.