NGUI研究院之自制ListView动态增加与删除（三）

原创文章如需转载请注明：转载自雨松MOMO程序研究院本文链接地址:NGUI研究院之自制ListView动态增加与删除（三）

         在NGUI中可以很方便的实现ListView的控件，ListView就好比IOS或Android平台中使用手势上下拖动的控件。在Unity3D中实现ListView的原理无非就两种，第一种是摄像机不动只移动控件，第二种是控件不动只移动摄像机。在官方的Demo中已经有这两种的例子，为了活灵活现的使用listView，MOMO还是决定详细的写一篇文章帮助初学者快速上手listView。

和之前的文章开始一样，我们先创建一个2D的游戏平面。接着给Panel面板绑定游戏组件，Unity导航菜单栏中选择Component->NGUI->Interaction->Grid，它主要设定ListView中每一个item的属性。继续在Unity导航菜单栏中选择Component->NGUI->Interaction->UIDraggablePanel，它主要设定listView的触摸区域以及与拖动条事件等。

如下图所示，我详细说说Panel面板中一些需要注意的属性。

UIGrid(Script)：Arrangement 选择Vertical表示这个ListView表示纵向，这里如果选择Horizontal表示该ListView是横向的。 

Cell Width：ListView中每一个item的宽度。

Cell Height：listView中每一个item的高度。

UIDraggable Panel(Script)：选项中的Scale非常重要，这里设置y = 1  表示ListView只支持纵向的拖动，如果设置X=1表示列表只支持横向的拖动，如果两个都=1表示列表同时支持横向与纵向的拖动。

Horizontal Scroll Bar 与 Vertical Scroll Bar表示横向或纵向的拖动条与listView结合，然而这里我们无需写一行代码，它会自动帮我们计算，将你的ListView与拖动条结合。

 

 

         再说说最上面的UIPanel(Script) ，我们选择Clipping的类型为SoftClip，这里可设置listView整体的显示区域。如下图所示，整体的显示区域就是紫色框中的区域。橙色框是ListView整体的显示内容，它会依次的排列下去，但是永远只会显示紫色框中的内容。

 

 

OK。接着我们看看目前工程的结构。在Hierarchy视图中Anchor下面同级的目录中有Button、Panel、Scroll Bar。Button就是上图中添加列表的按钮，Panel中是通过点击添加列表按钮后自动添加的列表预设。Scroll Bar表示上图中左侧的纵向拖动条。在右侧监测面板视图中，BoxCollider组件必须添加，该组件中Center与Size可设置ListView中的Item的触摸响应区域，这个区域应当与Item的显示区域相当。

还有一个重要的组件就是UIDrag Panel Contents(Script)，如果没有它ListView就无法拖动。在Unity导航菜单栏中选择Component->NGUI->Interaction->UIDrag Panel Contents即可。切记 >_<

将预设资源放在Resources文件夹中是为了使用Resource来读取。

 

 

下面我们看看动态添加列表的脚本，把脚本绑定在Button上。噢对，这里还有个小插曲，本文中的中文字体需要感谢kuku小妖制作的：字体的下载地址如下：http://game.ceeger.com/forum/read.php?tid=729

 

Test.cs （为什么又是Test.cs 嚯嚯 上瘾了 改不了了 哇咔咔！！）

01	using UnityEngine;

02	using System.Collections;

03	using System.Collections.Generic;

04

05	public class Test : MonoBehaviour {

06

07	public UIGrid grid;

08	int count = 0;

09	void Start()

10

{

11	//得到grid对象

12	grid = GameObject.Find("Panel").GetComponent<UIGrid>();

13

}

14

15	void OnClick ()

16

{

17

18

//克隆预设

19	GameObject o  =(GameObject) Instantiate(Resources.Load("item"));

20	//为每个预设设置一个独一无二的名称

21	o.name = "item" + count;

22	//将新预设放在Panel对象下面

23	o.transform.parent = GameObject.Find("Panel").transform;

24

25	下面这段代码是因为创建预设时 会自动修改旋转缩放的系数，

26	//我不知道为什么会自动修改，所以MOMO重新为它赋值

27	//有知道的朋友麻烦告诉我一下 谢谢！！！

28

29	GameObject item = GameObject.Find(o.name);

30	item.transform.localPosition = new Vector3(0,0,0);

31	item.transform.localScale= new Vector3(1,1,1);

32

33

count ++;

34

35	//列表添加后用于刷新listView

36	grid.repositionNow = true;

37

}

38

39

}

 

 我们在创建一个Button用于动态的删除列表。我们编写脚本Delete.cs绑定上该按钮，原理和添加差不多大家看看哈～～

Delete.cs

01	using UnityEngine;

02	using System.Collections;

03

04	public class Delete : MonoBehaviour {

05

06	public UIGrid grid;

07

08	void Start()

09

{

10	//得到grid对象

11	grid = GameObject.Find("Panel").GetComponent<UIGrid>();

12

13

}

14

15	void OnClick()

16

{

17	//通过标签名称找到多有对象，前提是给预设起一个tag，这里我叫它player

18	GameObject []items =  GameObject.FindGameObjectsWithTag("Player");

19	//当预设数量大于 0时

20	if(items.Length >0)

21

{

22	//删除列表的item

23	Destroy(items[0]);

24

//刷新UI

25	grid.repositionNow = true;

26

}

27

28

}

29

30

}

 

接着我们学习点击某项Item后修改显示的内容，将如下脚本挂在item当中。

item.cs 

01	using UnityEngine;

02	using System.Collections;

03

04	public class item : MonoBehaviour {

05

06	void OnClick()

07

{

08	//得到item自对象的精灵组建。

09	//因为得到的组建采取深度优先

10	//所以我们需要修改数组中元素为1的精灵

11	//数组中元素为0的精灵是按钮的背景

12	UISprite ui = GetComponentsInChildren<UISprite>()[1];

13	//修改头像为女生头像

14	ui.spriteName = "icon1";

15

16

//得到文字对象

17	UILabel label = GetComponentInChildren<UILabel>();

18

//修改文字内容

19	label.text = "若若";

20

}

21

}

 

如下图所示，这里本文的所有知识点，NGUI是不是很给力呢？哇咔咔！啦啦啦！

 

 

本节教学下载地址：http://vdisk.weibo.com/s/abXug

 祝大家学习愉快，一起学习一起进步哇咔咔～～