New UI Widgets

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

 

Can you a video of how the problem animation looks?

 

As forum doesnt allow uploading of mp4, so here it is
https://we.tl/t-s7XiS1NrTl

 

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.         }

 

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

 

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.

 

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.

 

Thanks for detailed answer, i believe its simple to stick with first option as its easier.

 

Hi @ilih
GroupListView example seems difficuilt to understand, so can you please explain in high level points how to create one?
Thanks

 

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.         }

 

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

 

v1.14.1 released

Changelog:

• EasyLayout: reduced memory allocations
• Widgets Generation: fixed type name error
• Widgets Generation: fixed missing reference

 

Hi @ilih,
I know you already have similar in new ui widgets, but a sample scene that showcase quality like that'd be great
https://pub.dev/packages/flutter_swiper

 

I'll think about it.

 

Hi @ilih
Can you please provide Horizontal Treeview support?
https://www.digitaldesignjournal.co...18/09/jquery-treeview-plugins-and-demo-01.png

 

It's available as a TreeGraph widget.

 

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 ?

 

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.

 

Another example
https://giphy.com/gifs/tree-flutter-graphview-jQ7fdMc5HmyQRoikaK

 

Any chance to get access to TextAdapter FontStyle? During upgrade to the most recent version code like text.fontStyle = FontStyle.Bold is obsolete
Thanks

 

I'll add it in the next update.
The problem is Unity FontStyle and TMPro FontStyle are not really compatible,

 

Hi @ilih,
Can you please provide a sample for a horizontal list like that?

 

I'll think about it but cannot promise that it will be added - there some difficulties to implement such a thing.

 

Sure, having something like that'd be great

 

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

 

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.

 

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

 

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.

 

Its appearing as unspecified in debug

 

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.

 

How about this as horizontal list view with fixed row count with variable width size of each item?

 

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.

 

Added rectangular lines support in v1.14.2b4

Added

fontStyle

property in v1.14.2b4 along with

bool Bold

and

bool Italic

properties.

 

Hi @ilih,

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

 

Should be possible after I add the circular slider.

 

Hi,

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



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.



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

 

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. }

 

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!

 

Please Add that, that'd be really cool

 

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.

 

You are amazing as always

 

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.



Please advise

 

Add

DragRedirect

component to the horizontal ListView.ScrollRect and specify vertical ListView.ScrollRect as RedirectTo.

 

Hi @ilih
If we scroll really fast then header disappears, please advise
Here is the link to recording
https://we.tl/t-wfUL4NorEJ

 

What settings for the ScollRectHeader component are you use?

 

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

 

Hi @ilih,
GroupedTileView is not responsive.

 

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.         }

 

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

 

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