Unity WidgetsUI CreateTaskView Demo

  • 时间:
  • 浏览:2
  • 来源:大发彩神UU快三_大发神彩UU快三官方

Now text also change color with interactions.

Add empty GameObject to Viewport, rename it to List, set anchors to stretch, Pivot.Y = 1, add EasyLayout and Content Size Fitter components.

Set EasyLayout: Layout Type = Grid; Grid Constraint = Fixed Column Count; Grid Constraint Count = 1.

Set Content Size Fitter: Vertical Fit = Preferred Size.

For Horizontal ListView you should set Grid Constraint = Fixed Row Count and Horizontal Fit = Preferred Size instead.

List will be contain items gameobjects and control layout.

You can use Vertical Layout Group or Horizontal Layout Group instead EasyLayout, but in this case changing ListView direction will be impossible in runtime.

protected override void DefaultColoring(TaskComponent component)



component.Name.color = DefaultColor;




public class TaskView : ListViewCustom<TaskComponent,Task> {

Add empty GameObject to ScrollRect, rename it to Viewport, set anchors to stretch, add Image and Mask components, disable Mask Show Mask Graphic.

This restricts ListView items to the shape of the Viewport.

Mask can be replaced with RectMask2D.

If we change Task.Progress value, it will not be displayed, but we can implement it.

Replace Task Progress field with property and add OnProgressChange event.

So now we can get event when Progress value changed.

Now run scene again and check interactions.

Background color changes on selection and mouse over.

Finally we add Task View component to TaskView GameObject.

Attach ScrollRect GameObject to ScrollRect field.

Attach List GameObject to Container field.

Attach DefaultItem GameObject to DefaultItem field.

Add Progressbar GameObject to DefaultItem, set anchors to middle right, position it to right side.

PS:TaskView 的Image加进,背景才会变透明

Add Image GameObject to List, rename it to DefaultItem, set anchors to top stretch, set height, set empty space from left and right.

Let's add some items to Task View.

And run scene.

Now we can add Task Component to DefaultItem and attach Name and Progressbar gameobjects to component fields.

Now it's time to GameObject for ListView.

Change DefaultItem Image color to transparent.

And check how it's works.


protected override void HighlightColoring(TaskComponent component)



component.Name.color = HighlightedColor;


protected override void SelectColoring(TaskComponent component)



component.Name.color = SelectedColor;


public override void Start()



DataSource.Comparison = ItemComparsion;//通过ItemComparsion你这人来进行对数据进行排序



protected override void SetData(TaskComponent component, Task item)




Add new item.

Component class should display this item, so it will be using Text to display name, Progressbar to display progress and implement IViewData<Task> to set it values.

原文出处:https://ilih.ru/unity-assets/UIWidgets/docs/Manual.Creating_own_ListView/  有时候和原文有写区别,机会是包用的不一样由于的

Add Text GameObject to DefaultItem, rename it to Name, set anchors to stretch, set right = 500, this will be space for Progressbar.

Set Text vertical alignment to middle.

Item class will have two fields: Name and Progress. Mark class as [System.Serializable] to edit Items in Editor.

Add Scrollbar to ScrollRect, set direction Bottom to Top, anchors to stretch right and change size and position parametres.

Create empty GameObject, rename it to TaskView and set size 500x500.

Here is step by step guide, but there is a faster way using ListViewIcons as source GameObject and redone it to you needs.

Now add Text color changes on selection and mouse over.

For this override GraphicsForeground property in component class. (And you can also override GraphicsBackground property.)

GraphicsForeground and GraphicsBackground should return array of Graphic objects for coloring.

Items displayed with correcty, but does not have any visual feedback to interactions. Let's fix it.

Set TaskView colors:

DefaultColor = 255, 215, 115, 255

DefaultBackgroundColor = 255, 215, 115, 0 (transparent)

HighlightedColor = 0, 0, 0, 255 (black)

HighlightedBackgroundColor = 181, 122, 36, 255

SelectedColor = 0, 0, 0, 255 (black)

SelectedBackgroundColor = 196, 156, 39, 255

public static readonly System.Comparison<Task> ItemComparsion = (x, y) => x.Name.CompareTo(y.Name);

And we need test script to check how it works.

It will add task and task progress will be updated every second on random value in range 1..10.

Change DefaultItem Text color to 255, 215, 115, 255.


using System.Collections;

using System.Collections.Generic;

using UIWidgets;

using UnityEngine;

Now we need to add event support in Task Component.

When Progress value changed will be called UpdateProgressbar function.

And combine those classes to ListView.

Attach Scrollbar GameObject to ScrollRect Vertical Scrollbar.

Run scene, and check if items sorted by name.

Let's create own ListView, for this we need to write three classes:

TaskView is completed, but we can add some features.

Let's implement automatic sort for items.

ItemsComparison function compare tasks by name and used to sort items.

Create button and attach test script to it.

Add AddTask() to OnClick event.

Add empty GameObject to TaskView, rename it to ScrollRect and set anchors to stretch and ampty space at the right side for scrollbar.

Add ScrollRect component to GameObject. With this ListView will be scrollable.

This and some following steps can be skipped if ScrollView gameobject available in your Unity version.