【Unity】自制ListView动态增长与删除

http://www.xuanyusong.com/archives/973

在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 嚯嚯 上瘾了 改不了了 哇咔咔！！）

 

C#

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

using UnityEngine; using System.Collections; using System.Collections.Generic;   public class Test : MonoBehaviour {   public UIGrid grid; int count = 0; void Start() { //获得grid对象 grid = GameObject.Find("Panel").GetComponent<UIGrid>(); }   void OnClick ()     {       //克隆预设 GameObject o  =(GameObject) Instantiate(Resources.Load("item")); //为每一个预设设置一个独一无二的名称 o.name = "item" + count; //将新预设放在Panel对象下面 o.transform.parent = GameObject.Find("Panel").transform;   ////下面这段代码是由于建立预设时 会自动修改旋转缩放的系数， //我不知道为何会自动修改，因此MOMO从新为它赋值 //有知道的朋友麻烦告诉我一下 谢谢！！！   GameObject item = GameObject.Find(o.name); item.transform.localPosition = new Vector3(0,0,0); item.transform.localScale= new Vector3(1,1,1);   count ++;   //列表添加后用于刷新listView grid.repositionNow = true;     }   }

 

 咱们在建立一个Button用于动态的删除列表。咱们编写脚本Delete.cs绑定上该按钮，原理和添加差很少你们看看哈～～

Delete.cs

 

C#

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

using UnityEngine; using System.Collections;   public class Delete : MonoBehaviour {   public UIGrid grid;   void Start() { //获得grid对象 grid = GameObject.Find("Panel").GetComponent<UIGrid>();   }   void OnClick() { //经过标签名称找到多有对象，前提是给预设起一个tag，这里我叫它player GameObject []items =  GameObject.FindGameObjectsWithTag("Player"); //当预设数量大于 0时 if(items.Length >0) { //删除列表的item Destroy(items[0]); //刷新UI grid.repositionNow = true; }   }   }

 

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

item.cs 

 

C#

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

using UnityEngine; using System.Collections;   public class item : MonoBehaviour {   void OnClick() { //获得item自对象的精灵组建。 //由于获得的组建采起深度优先 //因此咱们须要修改数组中元素为1的精灵 //数组中元素为0的精灵是按钮的背景 UISprite ui = GetComponentsInChildren<UISprite>()[1]; //修改头像为女生头像 ui.spriteName = "icon1";   //获得文字对象 UILabel label = GetComponentInChildren<UILabel>(); //修改文字内容 label.text = "若若"; } }

 

以下图所示，这里本文的全部知识点，NGUI是否是很给力呢？哇咔咔！啦啦啦！

 

 

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

 祝你们学习愉快，一块儿学习一块儿进步哇咔咔～～

• 本文固定连接: http://www.xuanyusong.com/archives/973

• 转载请注明: 雨松MOMO

  2012年05月23日

  于 雨松MOMO程序研究院 发表