Unity WidgetsUI CreateTaskView Demo

Creating own ListView

PS:TaskView 的Image去掉，背景才会变透明

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

• item class to keep data
• component class to display item, derived from ListViewItem
• ListView class derived from ListViewCustom

 

For example it will be Task View, which will be display tasks, each task have name and progress. Download TaskView package.

 

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

namespace UIWidgetsSamples.Tasks {
	[System.Serializable]
	public class Task {
		public string Name;

		public int Progress;
	}
}

 

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.

using UnityEngine.UI;
using UIWidgets;

namespace UIWidgetsSamples.Tasks {
	public class TaskComponent : ListViewItem {
		public Text Name;

		public Progressbar Progressbar;
		
		// IViewData<Task> implementation
		public void SetData(Task item)
		{
			Name.text = item.Name;
			Progressbar.Value = item.Progress;
		}
	}
}

 

And combine those classes to ListView.

using UIWidgets;
namespace UIWidgetsSamples.Tasks {
	public class TaskView : ListViewCustom<TaskComponent,Task> {
	}
}

 

Now it's time to GameObject for ListView.

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

Create empty GameObject, rename it to TaskView and set size 400x300.

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.

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

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.

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.

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

Add Text GameObject to DefaultItem, rename it to Name, set anchors to stretch, set right = 200, this will be space for Progressbar.
Set Text vertical alignment to middle.

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

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

Attach Scrollbar GameObject to ScrollRect Vertical Scrollbar.

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.

Let's add some items to Task View.

And run scene.

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

Change DefaultItem Image color to transparent.

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

Now run scene again and check interactions.
Background color changes on selection and mouse over.

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.

using System.Collections;
using System.Collections.Generic;
using UIWidgets;
using UnityEngine;

public class TaskView : ListViewCustom<TaskComponent,Task> {

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

public override void Start()
{
base.Start();
DataSource.Comparison = ItemComparsion;//通过ItemComparsion这个来进行对数据进行排序
}
//改变
protected override void SetData(TaskComponent component, Task item)
{
component.SetData(item);
}

//===根据状态动态改变文本颜色
protected override void HighlightColoring(TaskComponent component)
{
base.HighlightColoring(component);
component.Name.color = HighlightedColor;
}

protected override void SelectColoring(TaskComponent component)
{
base.SelectColoring(component);
component.Name.color = SelectedColor;
}

protected override void DefaultColoring(TaskComponent component)
{
base.DefaultColoring(component);
component.Name.color = DefaultColor;
}
//==========================
}

 

Now text also change color with interactions.

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.

using UIWidgets;

namespace UIWidgetsSamples.Tasks {
	public class TaskView : ListViewCustom<TaskComponent,Task> {
		public static readonly System.Comparison<Task> ItemsComparison = (x, y) => x.Name.CompareTo(y.Name);

		bool isStartedTaskView = false;

		public override void Start()
		{
			if (isStartedTaskView)
			{
				return ;
			}
			isStartedTaskView = true;

			base.Start();
			DataSource.Comparison = ItemsComparison;
		}
	}
}

 

Add new item.

Run scene, and check if items sorted by name.

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.

using UnityEngine;
using UnityEngine.Serialization;
using UIWidgets;

namespace UIWidgetsSamples.Tasks {
	[System.Serializable]
	public class Task {
		public string Name;

		[SerializeField]
		[FormerlySerializedAs("Progress")]
		int progress;

		public int Progress {
			get {
				return progress;
			}
			set {
				progress = value;
				if (OnProgressChange!=null)
				{
					OnProgressChange();
				}
			}
		}

		public event OnChange OnProgressChange;
	}
}

 

Now we need to add event support in Task Component.
When Progress value changed will be called UpdateProgressbar function.

using UnityEngine.UI;
using UIWidgets;

namespace UIWidgetsSamples.Tasks {
	public class TaskComponent : ListViewItem, IViewData<Task> {
		public override Graphic[] GraphicsForeground {
			get {
				return new Graphic[] {Name, };
			}
		}
		
		public Text Name;

		public Progressbar Progressbar;

		Task item;

		public Task Item {
			get {
				return item;
			}
			set {
				if (item!=null)
				{
					item.OnProgressChange -= UpdateProgressbar;
				}
				item = value;
				if (item!=null)
				{
					Name.text = item.Name;
					Progressbar.Value = item.Progress;

					item.OnProgressChange += UpdateProgressbar;
				}
			}
		}

		public void SetData(Task item)
		{
			Item = item;
		}

		void UpdateProgressbar()
		{
			Progressbar.Animate(item.Progress);
		}

		protected override void OnDestroy()
		{
			Item = null;
		}
	}
}

 

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.

using UnityEngine;
using System.Collections;

namespace UIWidgetsSamples.Tasks {
	public class TaskTests : MonoBehaviour
	{
		public TaskView Tasks;

		public void AddTask()
		{
			var task = new Task(){Name = "Random Task", Progress = 0};

			Tasks.DataSource.Add(task);

			StartCoroutine(UpdateProgress(task, 1f, Random.Range(1, 10)));
		}

		IEnumerator UpdateProgress(Task task, float time, int delta)
		{
			while (task.Progress < 100)
			{
				yield return new WaitForSeconds(time);
				task.Progress = Mathf.Min(task.Progress + delta, 100);
			}
		}
	}
}

 

Create button and attach test script to it.
Add AddTask() to OnClick event.

And check how it's works.

原文出处：https://ilih.ru/unity-assets/UIWidgets/docs/Manual.Creating_own_ListView/  但是和原文有写区别，可能是包用的不一样导致的

源码地址：http://code.taobao.org/svn/UIWigetsTestDemo/trunk