Search Unity

  1. Unity 2019.2 is now released.
    Dismiss Notice

New UI Widgets

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

  1. RazaTech

    RazaTech

    Joined:
    Feb 27, 2015
    Posts:
    169
    hi!

    Scroll start and Scroll end Events are in "TileView" and "ListView"
    but it should also in "ListViewItem"
     
  2. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    707
    You can use ListView.ForEachComponent and TileView.ForEachComponent to do something with items on scroll start and scroll end events.
    Here is sample how it can be done:

    Code (CSharp):
    1. using UnityEngine;
    2. using UIWidgets;
    3.  
    4. public class ListViewIconsScrollHelper : MonoBehaviour {
    5.     [SerializeField]
    6.     public ListViewIcons listView;
    7.  
    8.     void Start()
    9.     {
    10.         if (listView!=null)
    11.         {
    12.             listView.OnStartScrolling.AddListener(OnStartScrolling);
    13.             listView.OnEndScrolling.AddListener(OnEndScrolling);
    14.         }
    15.     }
    16.  
    17.     void OnStartScrolling()
    18.     {
    19.         listView.ForEachComponent(ComponentStartScrolling);
    20.     }
    21.  
    22.     void OnEndScrolling()
    23.     {
    24.         listView.ForEachComponent(ComponentEndScrolling);
    25.     }
    26.  
    27.     void ComponentStartScrolling(ListViewItem item)
    28.     {
    29.         if (item.gameObject.activeSelf)
    30.         {
    31.             (item as ListViewIconsItemComponent).DoSomethingOnStartScrolling();
    32.         }
    33.     }
    34.  
    35.     void ComponentEndScrolling(ListViewItem item)
    36.     {
    37.         if (item.gameObject.activeSelf)
    38.         {
    39.             (item as ListViewIconsItemComponent).DoSomethingOnEndScrolling();
    40.         }
    41.     }
    42.  
    43.     void OnDestroy()
    44.     {
    45.         if (listView!=null)
    46.         {
    47.             listView.OnStartScrolling.RemoveListener(OnStartScrolling);
    48.             listView.OnEndScrolling.RemoveListener(OnEndScrolling);
    49.         }
    50.     }
    51. }
    52.  
     
    Last edited: Oct 26, 2015
  3. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,317
    Great looking project. Do you know how well this works on mobile?
    Cheers
     
  4. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    707
    Here is demo UIWidgets-1.6.1.apk for Android 4.4 or later. "Development Build" enabled, so you can use profiler to check performance.
     
  5. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,317
    I'm on IOS, would it be possible to get a demo package for IOS?
     
  6. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,317
    Also, is drag and drop from one component to another supported. For example, dragging an item from a tree to a scrollist?
     
  7. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    707
    I don't have any Mac and iOS devices, I can provide only Xcode project to build.

    No. For now drag and drop not supported at all.
     
  8. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    707
    Version 1.6.0 released.

    Changelog:
    • ColorPicker
    • For ListView, ListViewIcons, ListViewCustom, ListViewCustomHeight, TileView added support for ObservableList
      Items property marked obsolete, but can be used.
    • Added optional sequence parametres for Notify - notifications can be showed one by one, not only all at once like now.
    • For ListViewIcons items and TreeView nodes added field LocalizedName, so now can be easily added localization support.
    • EasyLayout - Control Width, Max Width, Control Height, Max Height replaced with "Children Width" and "Children Height" with options:
      Do Nothing
      Set Preferred - Set width/height to preferred, like Control Width/Height
      Set Max from Preferred - Set width/height to maximum preferred width/height of items, like Max Width/Height
      Fit Container - similar to "Child Force Expand" from Horizontal/Vertical Layout Group
    • ListViewCustomHeight - implimentation of IListViewItemHeight for components now optional, but you still can implement it for optimization purpose.
     
  9. Christoph_CH

    Christoph_CH

    Joined:
    Jun 26, 2015
    Posts:
    14
    Hello Ilih

    nice update, especially new example for list view possibilties are very impressive !!

    I have small issues with Combobox :
    - When you call Combobox.Clear() with an element selected it crashed ?!
    - There is no Input Cursor any more ??

    I have small issues with SpinnerFloat :
    - There is no Input Cursor any more ??
    - Entering negative vales is very difficult (also in old versions...)

    Thanks and have a nice Weekend

    Christoph
     
  10. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    707
    Fix:
    Replace lines 562-564 in ListView/ListViewBase.cs:
    Old lines:
    Code (CSharp):
    1.             DeselectItem(index);
    2.            
    3.             OnDeselect.Invoke(index, GetItem(index));
    New lines:
    Code (CSharp):
    1.             if (IsValid(index))
    2.             {
    3.                 DeselectItem(index);
    4.  
    5.                 OnDeselect.Invoke(index, GetItem(index));
    6.             }
    It is about Mouse Cursor or Input Caret?
    Combobox and Spinner use standart Unity InputField.
    Probably you meet this bug, found in 5.2.0f3 and was fixed in 5.2.1.

    I'll think about solution, possibly will be added option to move validation from key press event to end input event.

     
  11. Christoph_CH

    Christoph_CH

    Joined:
    Jun 26, 2015
    Posts:
    14
     
  12. Christoph_CH

    Christoph_CH

    Joined:
    Jun 26, 2015
    Posts:
    14
    Again me,
    above Reply is difficult to read...

    Combobox is working, bug is found after update, waiting for negative values

    Thanks
     
  13. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,317
    I understand that Drag and Drop is not yet supported at this time since there are so many cool things already in the package. Can I make a request to have this feature added to the a future version. Having Drag and Drop will make this asset that much more powerful and awesome.

    Cheers.
     
  14. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    707
    I have plans to add Drag and Drop support.
     
  15. mbodekaer

    mbodekaer

    Joined:
    Feb 24, 2013
    Posts:
    8
    Hi @ilih,
    Awesome controls you've made! Exactly what we have been looking for.

    I did some tests with the TreeView control, and it seems to have some odd scrolling bug, if you scroll up/down fast using the mouse scroll.
    I recorded a short video to demonstrate. Any ideas how to fix this?
    https://bodekaer.tinytake.com/sf/MzY2MDAzXzIwODYxNzk
     
  16. mbodekaer

    mbodekaer

    Joined:
    Feb 24, 2013
    Posts:
    8
    I can btw. replicate the same bug when scrolling up/down fast in the demo example included in the asset bundle.
     
  17. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    707
    For some reason optimization don't work as I expect, so here is original code without optimization.
    Replaced to correctly optimized version.

    Replace lines 1009-1019 in ListView/ListViewCustom.cs:
    Old lines:
    Code (CSharp):
    1.                 var indicies = Enumerable.Range(topHiddenItems, visibleItems).ToArray();
    2.                 components.ForEach((x, i) => {
    3.                     if (indicies.Contains(x.Index))
    4.                     {
    5.                         return ;
    6.                     }
    7.                     x.Index = indicies[i];
    8.                     SetData(x, DataSource[indicies[i]]);
    9.                     Coloring(x as ListViewItem);
    10.                 });
    11.                 components.OrderBy(x => x.Index).ForEach(x => x.transform.SetAsLastSibling());
    New lines:
    Code (CSharp):
    1.                 var old_indicies = Enumerable.Range(oldTopHiddenItems, visibleItems).ToArray();
    2.                 var new_indicies = Enumerable.Range(topHiddenItems, visibleItems).ToArray();
    3.  
    4.                 var update_indicies = new_indicies.Except(old_indicies).ToArray();
    5.                 var remove_indicies = old_indicies.Except(new_indicies).ToArray();
    6.  
    7.                 components.Where(x => remove_indicies.Contains(x.Index)).ForEach((x, i) => {
    8.                     x.Index = update_indicies[i];
    9.                     SetData(x, DataSource[update_indicies[i]]);
    10.                     Coloring(x as ListViewItem);
    11.                 });
    12.  
    13.                 components = components.OrderBy(x => x.Index).ToList();
    14.                 components.ForEach(x => x.transform.SetAsLastSibling());
     
    Last edited: Nov 3, 2015
  18. Tinjaw

    Tinjaw

    Joined:
    Jan 9, 2014
    Posts:
    518
    @ilih
    I have a request. Could you please include the asset's version number in the README?

    This would be handy because I use you assets in several projects. As you update your asset I don't know what version each project has. I want to be able to check and see if I need to update your asset in any particular project.

    Thanks

    P.S. I also have submitted some feedback on this issue. Users, please upvote if you agree.
     
  19. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    707
    Yes. I will include version number with changelog in README in future updates.
    For now you can get version number from "UIWidgets SampleScene" in top right corner.
     
  20. Tinjaw

    Tinjaw

    Joined:
    Jan 9, 2014
    Posts:
    518
    In 1.6.0 you have a folder StandartAssets. Is that a typo? Should it be StandardAssets?
     
  21. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    707
    Typo.
     
  22. alizdesk

    alizdesk

    Joined:
    Mar 26, 2015
    Posts:
    46
    @ilih,
    Any plans for optimising List Performance?
    I'm working on a social app more like whats app with variable size items and images in it, however not happy with performance, Can you please make your next update (1.7) a peformance only update on List for mobile devices?
    Thanks
     
  23. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    707
    From my tests problem with performance not related with ListView.
    Following things will increase performance:
    • Disable Canvas.PixelPerfect - it can increase performance in few times.
    • Instead Mask gameobject with ScrollRect and Mask components (like in old versions) into two separate gameobjects - ScrollView and Viewport. Viewport should use RectMask2D instead Mask.


    • Disable ScrollRect.Inertia
     
  24. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,317
    Is there a demo that demonstrates resizing of the the components?
     
  25. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    707
    No.
     
  26. mbodekaer

    mbodekaer

    Joined:
    Feb 24, 2013
    Posts:
    8
  27. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    707
    Maybe will be added in next version.
     
  28. alizdesk

    alizdesk

    Joined:
    Mar 26, 2015
    Posts:
    46
    @ilih
    I made above changes and list got huge performance, thanks for the valuable tips.
    Is there any possibility we can get the same performance without disabling inertia?

    For next update, please provide a Side Menu/Drawer Component that slides in/overlay etc
    Thanks
     
  29. mbodekaer

    mbodekaer

    Joined:
    Feb 24, 2013
    Posts:
    8
  30. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    707
    ListView's should work fine with Inertia enabled.
    Inertia cause problem only with TileView, that will fixed in next release.

     
  31. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    707
    No specific reason, I did not know about default interface for this.
    I send you link in PM to updated ObservableList with INotifyPropertyChanged support, it will be included in next version.
    INotifyPropertyChanged support for TreeNode and TreeViewItem will be added in next version.
     
  32. RazaTech

    RazaTech

    Joined:
    Feb 27, 2015
    Posts:
    169
    hi!
    i like this new feature of EasyLayout (set Maxfrom preferred)
    but how it work ..?

    is there any way to tell every child of easylayout that
    it is your max height..?

    Untitled.png
     
  33. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    707
    Get preferred heights of each child, find maximum height from it, and apply RectTransform.SetSizeWithCurrentAnchors(Axis.Vertical, max_height) for each child.
     
  34. RazaTech

    RazaTech

    Joined:
    Feb 27, 2015
    Posts:
    169
    is it possible to have more then one Default item in list view and tile view...?
    later we will chose desired Default item depends upon data..
     
  35. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    707
    It cannot be done directly, but it is possible with one of following ways.
    • Defaultltem contains inactive items for each data type. On SetData call it deactivate all items and make one of items active depends of data.
      It is simple way, but not very optimized.
      Pseudocode:
      Code (CSharp):
      1. public void SetData(DataType data)
      2.         {
      3.             var required_type = DetectType(data);
      4.             if (current_type!=required_type)
      5.             {
      6.                 if (current_item!=null)
      7.                 {
      8.                     current_item.gameObject.SetActive(false);
      9.                 }
      10.                 current_item = Items[required_type];
      11.                 current_item.gameObject.SetActive(true);
      12.             }
      13.             current_item.SetData(data);
      14.         }
    • Defaultltem contains links to prefabs for each data type.
      On SetData detect which prefab should be used, instantiate it or take from cache or used current item and move previously used item to cache if needed.
      Not so simple, but optimized.
      Pseudocode:
      Code (CSharp):
      1.         public void SetData(DataType data)
      2.         {
      3.             var required_type = DetectType(data);
      4.             if (current_type==required_type)
      5.             {
      6.                 current_item.SetData(data);
      7.             }
      8.             else
      9.             {
      10.                 MoveToCache(current_type, current_item);
      11.                 current_item = GetFromCache(required_type);
      12.                 if (current_item==null)
      13.                 {
      14.                     current_item = Instantiate(prefabs[required_type]);
      15.                     current_item.transform.SetParent(this);
      16.                 }
      17.                 current_item.gameObject.SetActive(true);
      18.                 current_item.SetData(data);
      19.             }
      20.         }
     
  36. RazaTech

    RazaTech

    Joined:
    Feb 27, 2015
    Posts:
    169
    0k thanx
     
  37. mbodekaer

    mbodekaer

    Joined:
    Feb 24, 2013
    Posts:
    8
    @ilih wouldn't it be better to have a check for property changes in e.g. the Spinner.Value setter?
    I'd like the spinner to only raise the "Changed" event, if the value actually changed.
    E.g. I would propose this:

    Code (CSharp):
    1. set {
    2.   if (_value != value)
    3.   {
    4.       _value = InBounds(value);
    5.       text = _value.ToString();
    6.       onValueChangeInt.Invoke(Value);
    7.   }
    8. }
    9.  
     
  38. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    707
    Good, will be added in next update.
     
  39. sebastien-barry

    sebastien-barry

    Joined:
    Dec 18, 2013
    Posts:
    51
    Hi,
    Your asset rocks !!
    But I have some problems with TileView.
    I'm using your TileViewSample class and I get an error when I use clear, only when the tileview is filled with enough
    items and scrollbar are required.
    I get the following error :
    ArgumentOutOfRangeException: Argument is out of range.
    Parameter name: index
    And it's pointing the ScrollRect Object.

    If I do the following : it works but if I scroll down item, same bug
    tileViewSample.ScrollRect.enabled = false;
    tileViewSample.Clear ();
    tileViewSample.ScrollRect.enabled = true;

    I find one solution :

    1. public void TestClear()
    2. {
    3. tileViewSample.ScrollRect.verticalNormalizedPosition = 1;
    4. tileViewSample.ScrollRect.enabled = false;
    5. tileViewSample.Clear ();
    6. }

    7. public void LoadNewData()
    8. {
    9. // Add items
    10. ....... tileViewSample.Add(newItem);
    11. // Then
    12. tileViewTexture.ScrollRect.enabled = true;
    13. }

    So, it seams the problem comes from ScrollRect,
     
    Last edited: Nov 12, 2015
  40. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    707
    Fix:
    Replace lines 96-99 in TileView.cs
    Code (CSharp):
    1.             if (topHiddenItems > (DataSource.Count - 1))
    2.             {
    3.                 topHiddenItems = Mathf.Max(0, DataSource.Count - 2);
    4.             }
    5.             if (DataSource.Count==0)
    6.             {
    7.                 SetScrollValue(0f);
    8.             }
     
  41. sebastien-barry

    sebastien-barry

    Joined:
    Dec 18, 2013
    Posts:
    51
    Ok it works, the only problem is : if we load a lot a items, then scroll down and then Clear and had fews item, the scroll stay down.
    It would be better if the scroller go to Top after a clear.
    Calling tileViewSample.ScrollRect.verticalNormalizedPosition = 1; before the clear do the job
    But all other component automatically do it after a clear
     
  42. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    707
    Replace Clear() method in ListViewCustom.cs
    Code (CSharp):
    1.         public override void Clear()
    2.         {
    3.             DataSource.Clear();
    4.             SetScrollValue(0f);
    5.         }
     
  43. sebastien-barry

    sebastien-barry

    Joined:
    Dec 18, 2013
    Posts:
    51
    Thanks, it works great !
     
  44. alizdesk

    alizdesk

    Joined:
    Mar 26, 2015
    Posts:
    46
  45. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    707
  46. alizdesk

    alizdesk

    Joined:
    Mar 26, 2015
    Posts:
    46
    Thanks, appreciate a lot
    UIWidgets is becoming great day by day, keep up the great work :)
     
  47. alizdesk

    alizdesk

    Joined:
    Mar 26, 2015
    Posts:
    46
  48. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    707
    EasyLayout.Children Width = Fit Containter
    Add LayoutElement component to all items.
    For two items with fixed width specify Layout Element.Min Width
    For item (which take all remaning width) specify Layout Element.Flexible Width = 9999 (or any other big number)
     
  49. alizdesk

    alizdesk

    Joined:
    Mar 26, 2015
    Posts:
    46
    Thanks Once Again :)
     
  50. sebastien-barry

    sebastien-barry

    Joined:
    Dec 18, 2013
    Posts:
    51
    Hi, I find another problem with Tileview :

    I have the the problem a similar problem to the first I had with the Clear Function.
    If I fill the tileview with enough items, then scroll down the scrollbar and then call myTileView.Remove(item.Index);
    I get the following error :
    ArgumentOutOfRangeException: Argument is out of range.
    Parameter name: index

    Thanks