Search Unity

New UI Widgets

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

  1. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,480
    Hi @ilih
    Any idea what could be issue of this "jurky" animation if we show a lot of notifications using contentsize fitter height and animations

    instance.Show("Notification with buttons. Hide after 3 seconds.", customHideDelay: 5f, showAnimation:Notify.ShowAnimationSlideDown, hideAnimation:Notify.AnimationSlideUp);

    Please advise
     
  2. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,031
    Can you a video of how the problem animation looks?
     
    jGate99 likes this.
  3. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,480
    As forum doesnt allow uploading of mp4, so here it is
    https://we.tl/t-s7XiS1NrTl
     
  4. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,031
    It's some strange problem with partial layout updates.

    Fix:
    Replace
    UpdateLayout()
    method in EasyLayout.cs
    Code (CSharp):
    1.         public void UpdateLayout()
    2.         {
    3.             LayoutRebuilder.ForceRebuildLayoutImmediate(rectTransform);
    4.         }
     
    jGate99 likes this.
  5. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,480
    Hi @ilih
    I noticed a problem with ListView Default Item's Image.
    If i apply "simple" image (rather than sliced) , list item height become quite huge rather than variable height.
    Please check the issue
     
  6. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,031
    Gameobject layout size is calculated using layout sizes provided by its components.
    So if you have an Image component and Layout Group component, then each layout property value is maximum from property value from those components.
    How calculated Image layout preferred size:
    • sliced type: width = left border + right border; height = top border + bottom border
    • simple type: width = sprite width; height = sprite height
    So you should use either sliced or tiled image type or use sprite with less height.

    You can check Layout properties and what component provides them at bottom of the inspector window.
    upload_2021-3-10_14-49-31.png
     
    jGate99 likes this.
  7. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,031
    Another way to solve this is to remove the Image component from DefaultItem, create nested gameobject to DefaultItem, add Image and LayoutElement with enabled IgnoreLayout option, then stretch RectTransform to fill.
     
    jGate99 likes this.
  8. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,480
    Thanks for detailed answer, i believe its simple to stick with first option as its easier.
     
  9. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,480
    Hi @ilih
    GroupListView example seems difficuilt to understand, so can you please explain in high level points how to create one?
    Thanks
     
  10. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,031
    Here is a more simple example of the GroupedListView:
    1. Data class should have some flag to distinguish a group item from an ordinary item.
      Here used IsGroup field.
      Code (CSharp):
      1.     public class SimpleGroupedItem
      2.     {
      3.         public string Name;
      4.  
      5.         public bool IsGroup;
      6.     }
    2. Generate widgets for this data type.
    3. Create a GroupedList. You need to create a method to determine group by ordinary item.
      Code (CSharp):
      1.     public class SimpleGroupedList : GroupedList<SimpleGroupedItem>
      2.     {
      3.         protected override SimpleGroupedItem GetGroup(SimpleGroupedItem item)
      4.         {
      5.             // determine a unique group feature; here used the first letter of the name
      6.             var name = item.Name.Length > 0 ? item.Name[0].ToString() : string.Empty;
      7.  
      8.             // first check is such group already exists
      9.             foreach (var key in GroupsWithItems.Keys)
      10.             {
      11.                 if (key.Name == name)
      12.                 {
      13.                     return key;
      14.                 }
      15.             }
      16.  
      17.             // if the group does not exists create a new item and mark it as the group item
      18.             return new SimpleGroupedItem()
      19.             {
      20.                 Name = name,
      21.                 IsGroup = true,
      22.             };
      23.         }
      24.     }
    4. Now add the GroupedData field to the ListView.
      Code (CSharp):
      1.     public class SimpleGroupedListView : ListViewCustom<SimpleGroupedComponent, SimpleGroupedItem>
      2.     {
      3.         // GroupedData will used instead of DataSource
      4.         public SimpleGroupedList GroupedData = new SimpleGroupedList();
      5.  
      6.         bool isGroupedListViewInited;
      7.  
      8.         public override void Init()
      9.         {
      10.             if (isGroupedListViewInited)
      11.             {
      12.                 return;
      13.             }
      14.  
      15.             isGroupedListViewInited = true;
      16.  
      17.             base.Init();
      18.  
      19.             // set groups sort by name
      20.             GroupedData.GroupComparison = (x, y) => UtilitiesCompare.Compare(x.Name, y.Name);
      21.             // set data source
      22.             GroupedData.Data = DataSource;
      23.  
      24.             // allow select only ordinary items, not the group items
      25.             CanSelect = IsItem;
      26.         }
      27.  
      28.         bool IsItem(int index)
      29.         {
      30.             return !DataSource[index].IsGroup;
      31.         }
      32.     }
    5. At this point, GroupedListView can be used, but there is no visual difference between group items and ordinary items. To fix it you need to change the DefaultItem component class:
      Code (CSharp):
      1.     public class SimpleGroupedComponent : ListViewItem, IViewData<SimpleGroupedItem>
      2. {
      3.         // .... skipped code
      4.  
      5.         public virtual void SetData(SimpleGroupedItem item)
      6.         {
      7.             Item = item;
      8.             Name.text = item.Name;
      9.  
      10.             if (item.IsGroup)
      11.             {
      12.                 Name.fontSize = 20;
      13.                 Name.fontStyle = FontStyle.Bold;
      14.                 Name.alignment = TextAnchor.MiddleCenter;
      15.             }
      16.             else
      17.             {
      18.                 Name.fontSize = 14;
      19.                 Name.fontStyle = FontStyle.Normal;
      20.                 Name.alignment = TextAnchor.MiddleLeft;
      21.             }
      22.         }
     
  11. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,031
    version 1.14.0 released




    Changelog:
    • added localizations integration support
    • added I2 Localization support
    • added ContextMenu
    • added Input System support
    • added UtilitiesCompare class
    • added ScrollRectFooter
    • added AutoComboboxIcons prefab
    • Dialog, Picker, Popup: added CloseButton property
    • EasyLayout: added SetPreferredAndFitContainer option for the Children Size
    • ListView: added Header property
    • ListViewPaginator: added LoopedList support
    • Notification: added “content” and “onReturn” parameters to the Show() method
    • Style: fixed unchangeable settings after “Apply Fast Settings” use
    • Style: added “Update Default Style” option, which is opposite of the “Apply Default Style”, it gets style settings from widgets and saves them to the current style
    • Tabs: added CanSelectTab field to check if tab can be selected with a button click.
    • TabsCustom: TabButton class changed to the generic class TabButton<T>
    • Widgets Generation: generated classes are partial now
    • Widgets Generation: added AutoCombobox widget
    • Utilities: most functions moved to the new Utilities* classes
     
    hopeful likes this.
  12. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,031
    v1.14.1 released

    Changelog:
    • EasyLayout: reduced memory allocations
    • Widgets Generation: fixed type name error
    • Widgets Generation: fixed missing reference
     
    jGate99 likes this.
  13. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,480
  14. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,031
    jGate99 likes this.
  15. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,480
  16. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,031
    jGate99 likes this.
  17. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,480
    Few questions:


    1- Is tree graph virtualized?

    2- I noticed tree graph is using digonal lines and I need to show it more like green lines this ?

    Capture.PNG
     
  18. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,031
    No virtualization because all nodes displayed (there is no scrollable area to have hidden nodes), but gameobjects pool is used.

    I have plans to add lines with right angles.
     
    jGate99 likes this.
  19. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,480
  20. kayy

    kayy

    Joined:
    Jul 26, 2011
    Posts:
    92
    Any chance to get access to TextAdapter FontStyle? During upgrade to the most recent version code like text.fontStyle = FontStyle.Bold is obsolete
    Thanks
     
  21. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,031
    I'll add it in the next update.
    The problem is Unity FontStyle and TMPro FontStyle are not really compatible,
     
    kayy likes this.
  22. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,480
    Hi @ilih,
    Can you please provide a sample for a horizontal list like that?
    Capture.PNG
     
  23. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,031
    I'll think about it but cannot promise that it will be added - there some difficulties to implement such a thing.
     
    jGate99 likes this.
  24. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,480
    Sure, having something like that'd be great
     
  25. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,480
    Hi @ilih,
    Whats the latest approach for adding a button inside listview component which will do a custom action, I noticed you changed itemEvents few months ago so want to know regarding it
     
  26. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,031
    Still the same: add a method to the DefaultItem class and set it as a callback to the button.

    It was done for several purposes:
    • increase types of items events that can be subscribed directly from ListView without using DefaultItem
    • have those events available in the separate object -
      Code (CSharp):
      1. ListView.ItemsEvents.{EventName}
    • small performance improvements: events invoked directly by items instances instead of the ListView which subscribed on those events separately for each item instance.
     
    jGate99 likes this.
  27. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,480
    Hi @ilih

    1- I noticed a bug in Date Picker, when i show it first time it shows "default date" rather than the date (currentValue) we pass in the show function.
    However, when i click again, then it shows currentValue

    https://ilih.ru/unity-assets/UIWidgets/docs/widgets/dialogs-datepicker.html


    2- Second issue is, is DatePicker returning UTC date or local date? Seems to me its returning UTC date

    Please advise
     
  28. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,031
    Fix:
    replace line in
    SetDate()
    method in DateBase.cs:
    old line:
    Init();

    new line:
    InitFull();


    You can check the Kind parameter of the Date.
    It was a local time in my tests.
     
    jGate99 likes this.
  29. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,480
    Its appearing as unspecified in debug
     
  30. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,031

    The
    Time
    part of the Date is the same as the initial Date when using DatePicker, Calendar, DateScroller widgets.
    For example if DatePicker initial date is "2021-05-03 07:37:12", then click on the next day will give result "2021-05-04 07:37:12".
    So UTC or other timezones do not have any effect on the result.
     
  31. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,480
    How about this as horizontal list view with fixed row count with variable width size of each item?

    Capture.PNG
     
  32. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,031
    It can be done with ListType = Tile View Staggered.
    Row count does not need to be fixed, it will be calculated automatically.

    Settings:
    • ListView.ListType = Tile View Staggered
    • ListView.Direction = Horizontal
    • add layout group with enabled control child width to ListView.DefaultItem
    • ListView.Container.EasyLayout.ChildrenWidth = Set Preferred.
    • ListView.Container.EasyLayout.ChildrenHeight = Do Nothing.
     
    jGate99 likes this.
  33. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,031
    Added rectangular lines support in v1.14.2b4

    Added
    fontStyle
    property in v1.14.2b4 along with
    bool Bold
    and
    bool Italic
    properties.
     
    jGate99 and kayy like this.
  34. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,480
    Hi @ilih,

    Time Picker like that'd be welcome, to make beautiful UIs

     
  35. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,031
    Should be possible after I add the circular slider.
     
    jGate99 likes this.
  36. kneave

    kneave

    Joined:
    Aug 14, 2014
    Posts:
    17
    Hi,

    I've created a list view that looks like the following:

    upload_2021-5-6_18-22-33.png

    I've got it so that if I click the label area it will perform a click action and if you click on the toggle it will do the same. The problem is that if I click on the toggle it doesn't update the SelectedState of the item.

    upload_2021-5-6_18-24-4.png

    This has been kicking my ass for a few days and I just can't get my head around it. I've seen references to UpdateView as a way to force everything to redraw but I can't seem to find that method anywhere. If you could provide any assistance I would greatly appreciate it!

    Thanks,
    Keegan
     
  37. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,031
    I do not know what is the exact purpose of the Toggle in your case.

    Here are possible solutions on two cases:

    If Toggle is used as an indication of the selected item.
    1. Add a line to the
      UpdateView()
      (or
      SetData()
      for slightly older versions) to set the correct initial state of Toggle (otherwise Toggle will have the state of the previous item because of the gameobjects recycling).
      Code (CSharp):
      1. Toggle.isOn = Owner.IsSelected(Index);
    2. Add callback to
      Toggle.onValueChanged
      to select or deselect item:
      Code (CSharp):
      1.         public void ProcessToggleChanged(bool isOn)
      2.         {
      3.             if (isOn)
      4.             {
      5.                 Owner.Select(Index);
      6.             }
      7.             else
      8.             {
      9.                 Owner.Deselect(Index);
      10.             }
      11.         }
    3. Update Toggle state with item state:
      Code (CSharp):
      1.         public override void StateSelected()
      2.         {
      3.             Toggle.isOn = true;
      4.         }
      5.  
      6.         public override void StateDefault()
      7.         {
      8.             Toggle.isOn = false;
      9.         }
    If Toggle is used to display some value of the item.
    1. ListView.Coloring
      should be disabled because the background color will be changed on selection or highlight.
    2. Add lines to the
      UpdateView()
      (or
      SetData()
      for slightly older versions) to set the correct initial state of Toggle and background color.
      Code (CSharp):
      1. Toggle.isOn = Item.Value;
      2. Background.Color = Item.Value ? ColorOn : ColorOff;
    3. Add callback to
      Toggle.onValueChanged
      to save state:
      Code (CSharp):
      1. public void ProcessToggleChanged(bool isOn)
      2. {
      3.     Item.Value = isOn; // save state of the toggle
      4.     Background.Color = isOn ? ColorOn : ColorOff; // update the background color
      5. }
    4. Add a callback to change the Toggle state on
      DefaultItem.onClickItem
      .
      Code (CSharp):
      1. public void ProcessDefaultItemClick()
      2. {
      3.     Toggle.isOn = !Toggle.isOn;
      4. }
     
  38. kneave

    kneave

    Joined:
    Aug 14, 2014
    Posts:
    17
    The first solution worked an absolute treat and now I also know about the Owner object which I didn't before. The example I worked from also has SetData which I was already using but didn't know that was the old version of UpdateView.

    Thank you for your help and keep up the great work! :)
     
  39. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,480
    Please Add that, that'd be really cool :)
     
  40. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,031
    It is not the old version, just part of the
    SetData()
    code was moved to a separate function
    UpdateView()
    .
    This was done to improve localization support:
    UpdateView()
    will be called on locale change and because actual data was not changed
    SetData()
    does not seem right for this.

    I am working on it.
     
    jGate99 likes this.
  41. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,480
    You are amazing as always
     
  42. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,480
    Hi @ilih,

    I added a horizontal list view in list "header" example scene, however i want to scroll list view verticaclly when im swiping vertically over horizontal list view.

    upload_2021-5-9_7-34-8.png

    Please advise
     
  43. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,031
    Add
    DragRedirect
    component to the horizontal ListView.ScrollRect and specify vertical ListView.ScrollRect as RedirectTo.
     
  44. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,480
  45. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,031
    What settings for the ScollRectHeader component are you use?
     
    jGate99 likes this.
  46. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,480
    Its your own example scene, all i did was just add horizontal list view and increased items in the main listview so i can regeenrate this behaviour
     

    Attached Files:

  47. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,480
    Hi @ilih,
    GroupedTileView is not responsive.
    upload_2021-5-11_8-56-7.png
     
  48. ilih

    ilih

    Joined:
    Aug 6, 2013
    Posts:
    1,031
    Fix:
    Scripts / ScrollRectUtilities / ScrollRectBlock.cs
    Remove following lines from the
    Scroll()
    method:
    Code (CSharp):
    1.             if ((scrollPosition.x > 1f) || (scrollPosition.x < 0f) || (scrollPosition.y > 1f) || (scrollPosition.y < 0f))
    2.             {
    3.                 return;
    4.             }
    GroupedTileView is an old example, there were some changes in ListView since it was created.

    Fix:
    Examples / TileView / GroupedTileView / GroupedTileView.cs
    Remove methods
    CalculateItemsPerBlock()
    and
    SetNeedResize()
    .
    Add following code:
    Code (CSharp):
    1.         public override void Resize()
    2.         {
    3.             base.Resize();
    4.  
    5.             GroupedData.ItemsPerBlock = ListRenderer.GetItemsPerBlock();
    6.         }
     
    jGate99 likes this.
  49. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,480
    Thank you for your prompt reply, both are now working.



    However I have one more request regarding scrolling behaviour , it seems like header goes up slowly and so list items start overlappping with header content.
    So if we have a variable where we can set the speed of header scrolling so if it goes slow more list items overlap and if it goes equal with list speed or faster then no list item over laps with header content
    https://we.tl/t-TPADU14Yp5

    Please advise
     
  50. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,480
    Regarding Grouped Tile View, as group is not truly a single row with single column but combination of unusable columns so i'm unable to get this look where i want to show a conditionally View All button"

    Please advise

    upload_2021-5-12_5-17-56.png
     
unityunity