New UI Widgets

For now, it's only possible to change it from the code.
Or you can specify the default value in Examples / TracksView / ScheduleView.cs:
Replace

TimeSpan step;

with

TimeSpan step = new TimeSpan(0, 0, 1);

Update.:
The previous information was wrong, I forgot about the details.
You just need to disable "Item To Top".

 

Thanks ilih, dragging now worked like a charm.
As for the timestamp showing in the inspector. What is required to make it show up in the inspector.

 

Changes for the Examples / TracksView / ScheduleView.cs:

• remove

  MinHours

  field and

  OnValidate()

  method
• add the following code:
  
  Code (CSharp):

  1.         [SerializeField]
  2.         [FormerlySerializedAs("MinHours")]
  3.         int stepHours = 0;
  4.  
  5.         [SerializeField]
  6.         int stepMinutes = 0;
  7.  
  8.         [SerializeField]
  9.         int stepSeconds = 1;
• replace

  Step

  property and field:
  
  Code (CSharp):

  1.         TimeSpan step;
  2.  
  3.         public TimeSpan Step
  4.         {
  5.             get
  6.             {
  7.                 if (step.TotalSeconds == 0)
  8.                 {
  9.                     step = new TimeSpan(stepHours, stepMinutes, stepSeconds);
  10.                 }
  11.  
  12.                 return step;
  13.             }
  14.  
  15.             set
  16.             {
  17.                 step = value;
  18.             }
  19.         }

Now will be available the Inspector window: stepHours, stepMinutes, and stepSeconds.
Those values are used to create TimeSpan.

 

Bingo! that did the trick. Now everything is easily accessible. This Track example is super nice.

 

I can see so many amazing uses for this component.
Would be so cool if the top bar can be a timeline marker, this would make it possible to use the trackview for other applications. So instead of the date for the top bar, replace it with a timeline marker. Would love to know if this is possible.

 

It is possible, you need to create a class derived from

TracksViewCustom

with all complementary classes, by analogy as ScheduleView.
If I'll have time I add it.

 

Thank you

 

Hi @ilih,
So you created this tile view before there was support for multiple types of templates, Now that template support is here, so can you please spare some time and make a 2nd (so this remains available also in case) example with both heading as seperate tempalte and tile items as seperate template?
Thanks

 

Ok.

 

I want to add some icons to the Active/Default buttons on the Tabs.. originally had Tab Icon as Sprite ..soething you set in the Tab Objects like the Tab button name....
TabButtonComponentBase.cs
public virtual void SetButtonData(Tab tab)
{
NameAdapter.text = LocalizationSupport ? Localization.GetTranslation(tab.Name) : tab.Name;

if (tab.TabIcon != null) {
Icon.GetComponent<BetterImage>().sprite = tab.TabIcon;
}
}

it works until its all replaced by the default icon in Active/Default buttons.. something I missed?

Could you just add this as optional to the addon

 

You can use

TabsIcons

instead of

Tabs

.


Default icons are specified in the third column, and active icons are in the fourth column.


If

BetterImage

is derived from

Image

then you can replace the component.
Otherwise, you can create a class derived from

TabIconButtonBase

and override the

SetIcon()

or

SetData()

method.

 

Hi @ilih
I spent more time with GroupedList
and I noticed that it uses a seperate GroupedList<> class for retrieving groups.

What I orignally reqiuire is something based on multiple templates
where I'll place groups in the dataprovider rather than creating groups on runtime like this.

For example my Data class will be
class Data{

isGroup

//properties

}

my Datasource will be like this

new ObvserableList<>{

first heading item, //that will take full width
image or anything item in tile layout,
image or anything item in tile layout
image or anything item in tile layout
//

second heading data item,
//you get the idea

}


This will let have my own headings and in fact I deally I should rather have item that take full width or fixed width
this way i could have a heading, and then a footer or a seperator at the same time taking full width as well as tile items


Thanks

 

Added Timeline at Examples / TracksView / Timeline scene in v1.15.8b5.

Please check Examples / TileView / GroupedTileViewV2 in v1.15.8b5.

Please check Examples / TileView / LinearGroupedTileView in v1.15.8b5.
It uses

LinearGroupedList<T>

to add empty items before and after the header to make data displayed as a grid.
Use

RealDataSource

instead of

DataSource

.

 

Thanks ilih, really appreciate your continuous support

 

Hi @ilih

Whats the usecase of
HeaderEmptyTemplate
ItemEmptyTemplate

Are these required to work for LinearGroupedTileView?

What if i just need header and item for now (and add footer or seperate in future)?
Thanks

 

The TileView requires a fixed amount of items per row (or per column if the direction is horizontal).
Example for 3 items per row:
Original list: header 1, item 2, header 2, item 3, item 4, item 5, header 3, item 6
Result list (processed by LinearGroupedList):
header 1, empty header, empty header,
item 2, empty item, empty item,
header 2, empty header, empty header,
item 3, item 4, item 5,
header 3, empty header, empty header,
item 6
Those empty headers and empty items require DefaultItem instances and they also should not have any visible content, so this is why HeaderEmptyTemplate and ItemEmptyTemplate are used.

Modify condition for items that should take full width in GroupedData:

public LinearGroupedList<Photo> GroupedData =

   new LinearGroupedList<Photo>(item => item.IsGroup || item.IsFooter || item.IsSeparator);

 

Thanks @ilih
I understand that we need empty for grid or items appearing in tile
but heading in v1 was taking full width, it doesnt seem to be achievable now
Please advise

 

Replace Examples/TileView/GroupedTileViewV2/GroupedTileViewComponentHeader.cs

Code (CSharp):

1. namespace UIWidgets.Examples
2. {
3.     using UIWidgets;
4.     using UnityEngine;
5.  
6.     /// <summary>
7.     /// Header (group).
8.     /// </summary>
9.     public class GroupedTileViewComponentHeader : GroupedTileViewComponentBase
10.     {
11.         /// <summary>
12.         /// Date.
13.         /// </summary>
14.         [SerializeField]
15.         public TextAdapter DateAdapter;
16.  
17.         [SerializeField]
18.         protected EasyLayoutNS.EasyLayout Layout;
19.  
20.         [SerializeField]
21.         protected RectTransform LayoutRect;
22.  
23.         /// <summary>
24.         /// Set data.
25.         /// </summary>
26.         /// <param name="item">Item.</param>
27.         public override void SetData(Photo item)
28.         {
29.             Item = item;
30.             DateAdapter.text = Item.Created.ToString("MMM. dd, yyyy", UtilitiesCompare.Culture);
31.  
32.             if (Layout != null)
33.             {
34.                 var width = LayoutRect.rect.width - Layout.MarginFullHorizontal;
35.                 RectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, width);
36.             }
37.         }
38.  
39. #if UNITY_EDITOR
40.         protected override void OnValidate()
41.         {
42.             base.OnValidate();
43.  
44.             if (Layout == null)
45.             {
46.                 Layout = transform.parent.GetComponent<EasyLayoutNS.EasyLayout>();
47.             }
48.  
49.             if (LayoutRect == null)
50.             {
51.                 LayoutRect = transform.parent as RectTransform;
52.             }
53.         }
54. #endif
55.     }
56. }

Replace

SetData()

method in Examples/TileView/GroupedTileViewV2/GroupedTileViewComponentEmpty.cs

Code (CSharp):

1.         public override void SetData(Photo item)
2.         {
3.             Item = item;
4.  
5.             if (Item.IsGroup)
6.             {
7.                 gameObject.SetActive(false);
8.             }
9.         }

 

That is so super amazing. Your the best.

 

For some reason I cannot find the timeline scene.

 

Sorry, I copied only scripts from 2018.4 to other Unity versions and forgot about the scene.
It's already fixed in v1.15.8f1.

 

v1.15.8 released

Changelog:

• added Rating widget (Text can be replaced with an Image or any other Graphic component)
• added async helpers scripts
• DatePicker, PickerInt, PickerString, and custom PickerListView: added an optional OK button and Mode option to choose between “close on select” and “close on OK click”
• Dialog, Notification, Picker, Popup: added OnBaseInstanceOpen and OnBaseInstanceClose static events
• Dialog, Notification, Picker: added OnInstanceOpen and OnInstanceClose static events for the custom types
• Popup: added ShowAsync() method to use with async/await
• Styles: fixed missing font in some Unity versions
• TileView: added LinearGroupedTileView example
• TracksView: added Timeline
• menu “New UI Widgets/Dialogs” renamed to “New UI Widgets/Dialogs Templates”
  

 

Hi. congrats for this very useful asset. I have a question on listview buttons:
i have a dataset which has person's names. i want that names appears in a listview buttons containing only buttons.
How can do that?

Thanks.

 

You need to modify the ListView.DefaultItem game object: add the Button game object or Button component.
Then you need to modify the DefaultItem component class (if ListView is created with widgets generator) or create a derived class (if using existing ListView) to add references to Buttons and set labels in UpdateView() method (or in SetData() method).

 

Hi @ilih
Setting interactable to false still make rating stars clickable
Please advise

 

Fix:
Scripts / Ratings / Rating.cs:

OnInteractableChange

method: replace the first

StarsPoolFull

with

StarsPoolEmpty

Init()

method: add line

InteractableChanged();

at the end of the method.

 

Thanks for the fast reply. i did follow your suggestions and get it to work. Thanks. and have a nice day.

 

hi. i did change a list string view to a list buttons view, in my original code I had the events PointerDown and Submit (items events) on the listview string subscribed to a method like this:

Code (CSharp):

1.     public void onListViewItemSelect(int i,ListViewItem lvi, UnityEngine.EventSystems.BaseEventData lvibe)
2.     {
3.  
4.         //text_playerSeleccionado.text = lv.DataSource[i];
5.  
6.         lv.SelectedIndex = i;
7.  
8.         buscaRutinaPaciente(i);
9.  
10.     }
11.  
12.  

when I did replace the listview string to listview buttons i did notice the events are not being triggered. how can i trigger the events on the list view buttons ?
Thanks

 

You can add a method in DefaultItem component class and then attach this method to the button.
Like this:

Code (CSharp):

1.         [SerializeField]
2.         public Button Button;
3.  
4.         public void Toggle()
5.         {
6.             // do something
7.             Owner.Toggle(Index);
8.  
9.             // or trigger event
10.             Owner.InstancesEventsInternal.Select.Invoke(Index, this, eventData);
11.             Owner.InstancesEvents.Select.Invoke(Index, this, eventData);
12.  
13.             // or also add a method to ListView
14.             (Owner as ListViewDataType).SomeMethod(Index);
15.         }

 

Thanks for your fast reply. i get it to work. But i have a last question:
¿ is it possible to use the keyboard input to change the selected item (button) and send the corresponding event to announce the change ?

Thanks

 

Yes, by default you can use arrow keys to change highlighted items, and "Enter" or "Spacebar" to select items.

Please check Examples / ListView / ListViewButtons for button navigation.
The DefaultItem component has methods:

• GameObject GetSelectableObject(int index);

  use by ListView
• Code (CSharp):

  1. GameObject GetNextButton(int currentButton);
  2. GameObject GetPrevButton(int currentButton);
  3. GameObject GetFirstButton();
  4. GameObject GetLastButton();
  used by

  ListViewButtonNavigation

  component

ListViewButtonNavigation

is attached to each button.
It processes the OnMove event and moves focus to the next button according to the movement direction.

If you have only one button and it's never disabled then the code can be simpler.

 

Thanks for your very fast reply. I hope you have a nice day.

 

Hi @ilih
When I use a List View wants to access all of its visual components , because i want to set something then setting it to DefaultItem and then looping over "Components" properties is all i need.

However after implementing a IListViewTemplateSelector above approach is not enough anymore, as some of the components when i scroll up and they appear they dont have those new settings so I'm assuming i need to access the items in the 'pool', so how do i do that?

 

It is a bug.

Fix:
file Scripts / ListView / ListViewComponentEnumerator.cs:
add a new line

return MoveNext();

after line

enumerator = templates[listIndex].GetEnumerator(ownerID, mode);

 

Thanks

 

v1.15.9 released

Changelog:

• ListView: fixed undisplayed properties in the Inspector window
• Rating: fixed Interactable does not work correctly when disabled
• TreeView: added ContainerMaxSize option to prevent scrollbar blink caused by virtualization: the container will have the maximum width of all items. By default, the container has the maximum width of only visible items. Require ListType = List View with Variable Size.

 

Hi @ilih
I created custom ComboBox and it is almost identical, but yet im facing strange problem where "button" becomes first child and thus unable to interact with, Please advise what im doing wrong

Before Click


After click, notice button is now first child and "current" has 2 instances (clone). What could have caused this error?

 

Because Combobox uses modal mode (any clicks outside of Combobox and ListView will close ListView).
Modal is done as a transparent image (child of ParentCanvas), then move Combobox and ListView moved after the transparent image, and when ListView closed both of them return back to the original parent game object.

Possible solutions:

• disable RaycastTarget for the Image component.
• or add the following code to the ComboboxCustom.cs
  1. add fields
  
  Code (CSharp):

  1.         int ComboboxSiblingIndex = 0;
  2.         int ListViewSiblingIndex = 0;
  2. add new lines to

  ShowList()

  
  
  Code (CSharp):

  1.             if (ParentCanvas != null)
  2.             {
  3.                 ComboboxSiblingIndex = transform.GetSiblingIndex(); // new line
  4.                 ListViewSiblingIndex = listView.transform.GetSiblingIndex();// new line
  3. add new lines to

  HideList()

  
  
  Code (CSharp):

  1.             if (ComboboxParent != null)
  2.             {
  3.                 transform.SetParent(ComboboxParent, true);
  4.                 transform.SetSiblingIndex(ComboboxSiblingIndex);// new line
  5.             }
  6.  
  7.             if (ListViewParent != null)
  8.             {
  9.                 listView.transform.SetParent(ListViewParent, true);
  10.                 listView.transform.SetSiblingIndex(ListViewSiblingIndex);// new line
  11.             }

 

Thanks, I went for quick solution by disabling raycast

 

Hi @ilih

In LinearGroupedTileView I want to show ui in this way
Lets suppose I have width of 100 of parent container
each element is 20

What i want is to show scrollbar at the right most end like in image preview

However I want tiled items to be in centre in 3 columns but like this
[1][2][3]
[4][5][6]
[7]

Notice 7th is last item but still on left side
but all the items should be in centre


Please advise

 

Like this


which i simulated by setting custom width to "List" however now items appear in erratic way

 

1. GroupedListView: strech
   
   
2. ScrollRect: width = 400 and height is stretch
   
   
3. Scrollbar: change parent to GroupedTileView and set anchors to the right side
   

 

Amazing

 

Hi @ilih
I'm using Sidebar and it was working well, until i added a ListView inside it and I get error
Please advise

Code (CSharp):

1. ArgumentException: Unsupported layout type.
2. UIWidgets.LayoutUtilities.GetPaddingLeft (UnityEngine.UI.LayoutGroup layout) (at Assets/New UI Widgets/Scripts/Utilities/LayoutUtilities.cs:187)
3. UIWidgets.Sidebar.GetLayoutPadding () (at Assets/New UI Widgets/Scripts/Sidebar/Sidebar.cs:1911)
4. UIWidgets.Sidebar.RefreshPosition () (at Assets/New UI Widgets/Scripts/Sidebar/Sidebar.cs:640)
5. UIWidgets.Sidebar.Init () (at Assets/New UI Widgets/Scripts/Sidebar/Sidebar.cs:548)
6. UIWidgets.Sidebar.Start () (at Assets/New UI Widgets/Scripts/Sidebar/Sidebar.cs:520)

 

The Sidebar.Content game object should have a layout group: Horizontal or Vertical LayoutGroup or EasyLayout.

 

Hi @ilih
If i call SetClose then last "modal" openned by Sidebar doesnt go away, and it happens while i close and disable the object at the same time.

 

Fix:
add

ModalClose();

to the end of

Sidebar.SetClose()

method.

 

Must be some #if #endif condition you can use instead as this hit the Arial font and gets null before then checking LegacyRuntime.. should be checkin LegacyRuntime first when using URP pipeline.. I dunno must be one like #if Unity_URP

Code (CSharp):

1. ArgumentException: Arial.ttf is no longer a valid built in font. Please use LegacyRuntime.ttf
2. UnityEngine.Resources.GetBuiltinResource[T] (System.String path) (at <129a8e17cf954afeb2b075cfd9cd2af4>:0)
3. UIWidgets.Styles.StyleText.SetDefaultValues () (at Assets/New UI Widgets/Scripts/Style/Unity/StyleText.cs:403)
4. UIWidgets.Styles.StyleScale.SetDefaultValues () (at Assets/New UI Widgets/Scripts/Style/Input/StyleScale.cs:36)
5. UIWidgets.Styles.Style.UpgradeV6 () (at Assets/New UI Widgets/Scripts/Style/Style.cs:927)
6. UIWidgets.Styles.Style.Upgrade () (at Assets/New UI Widgets/Scripts/Style/Style.cs:998)
7. UIWidgets.Styles.Style.ApplyTo (UnityEngine.GameObject target, System.Boolean stylableOnly) (at Assets/New UI Widgets/Scripts/Style/Style.cs:511)
8. UIWidgets.UtilitiesEditor.CreateWidgetFromPrefab (UnityEngine.GameObject prefab, System.Boolean applyStyle, System.Action`1[T] converter) (at Assets/New UI Widgets/Scripts/Utilities/UtilitiesEditor.cs:427)
9. UIWidgets.MenuOptions.Create (UnityEngine.GameObject prefab) (at Assets/New UI Widgets/Editor/MenuOptions.cs:16)
10. UIWidgets.MenuOptions.CreateAccordion () (at Assets/New UI Widgets/Editor/MenuOptions.cs:201)
11. UnityEditor.GenericMenu:CatchMenu(Object, String[], Int32)
12.  
13. ArgumentException: Arial.ttf is no longer a valid built in font. Please use LegacyRuntime.ttf
14. UnityEngine.Resources.GetBuiltinResource[T] (System.String path) (at <129a8e17cf954afeb2b075cfd9cd2af4>:0)
15. UIWidgets.Styles.StyleText.SetDefaultValues () (at Assets/New UI Widgets/Scripts/Style/Unity/StyleText.cs:403)
16. UIWidgets.Styles.StyleScale.SetDefaultValues () (at Assets/New UI Widgets/Scripts/Style/Input/StyleScale.cs:36)
17. UIWidgets.Styles.Style.UpgradeV6 () (at Assets/New UI Widgets/Scripts/Style/Style.cs:927)
18. UIWidgets.Styles.Style.Upgrade () (at Assets/New UI Widgets/Scripts/Style/Style.cs:998)
19. UIWidgets.Styles.Style.ApplyTo (UnityEngine.GameObject target, System.Boolean stylableOnly) (at Assets/New UI Widgets/Scripts/Style/Style.cs:511)
20. UIWidgets.UtilitiesEditor.CreateWidgetFromPrefab (UnityEngine.GameObject prefab, System.Boolean applyStyle, System.Action`1[T] converter) (at Assets/New UI Widgets/Scripts/Utilities/UtilitiesEditor.cs:427)
21. UIWidgets.MenuOptions.Create (UnityEngine.GameObject prefab) (at Assets/New UI Widgets/Editor/MenuOptions.cs:16)
22. UIWidgets.MenuOptions.CreateAccordion () (at Assets/New UI Widgets/Editor/MenuOptions.cs:201)
23. UnityEditor.GenericMenu:CatchMenu(Object, String[], Int32)
24.  
25.  

 

What Unity version are you using? Is it some alpha or beta version?

 

yup
2023.1.0a18