首页 > Unity3D频道 > 【NGUI研究院之Unity插件】 > NGUI研究院之自制ListView动态增加与删除(三)
2012
05-23

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与拖动条结合。

 

NGUI研究院之自制ListView动态增加与删除(三) - 雨松MOMO程序研究院 - 1

 

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

 

NGUI研究院之自制ListView动态增加与删除(三) - 雨松MOMO程序研究院 - 2

 

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来读取。

 

NGUI研究院之自制ListView动态增加与删除(三) - 雨松MOMO程序研究院 - 3

 

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

 

Test.cs (为什么又是Test.cs 嚯嚯 上瘾了 改不了了 哇咔咔!!)

 

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

Delete.cs

 

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

item.cs 

 

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

 

NGUI研究院之自制ListView动态增加与删除(三) - 雨松MOMO程序研究院 - 4

 

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

 祝大家学习愉快,一起学习一起进步哇咔咔~~

雨松MOMO提醒您:亲,如果您觉得本文不错,快快将这篇文章分享出去吧 。另外请点击网站顶部彩色广告或者捐赠支持本站发展,谢谢!

--

最后编辑:
作者:雨松MOMO
专注移动互联网,Unity3D游戏开发
捐 赠如果您愿意花10块钱请我喝一杯咖啡的话,请用手机扫描二维码即可通过支付宝直接向我捐款哦。

  1. 请教momo一个困惑已久的问题,怎样把运行状态下生成的Item clone体保存下来,以便下次启动程序是还能看到保存前的状态,试了playerprefs,没成功!

  2. 请问这个橙色的区域的位置和大小是怎么调整的?是不是根据Panel控件的UIGrid中定义的大小来确定的,为什么它总是在中间呢

  3. NGUI研究院之自制ListView动态增加与删除(三) - 雨松MOMO程序研究院 - 1 有项目吗?求项目呢。。。 NGUI研究院之自制ListView动态增加与删除(三) - 雨松MOMO程序研究院 - 2 NGUI研究院之自制ListView动态增加与删除(三) - 雨松MOMO程序研究院 - 3 。我的邮箱是:286282591@qq.com 另外。。新的NGUI已经没有“UIDrag Panel Contents” 这个了。。。怎么办?怎么解决呀

  4. 学习了,不过删除 那个位置,上面好像有 BUG,//当预设数量大于 0时20 if(items.Length >0)21 {22 //删除列表的item23 Destroy(items[0]);24 //刷新UI25 grid.repositionNow = true;26 }删除 前。需要先把 那个 item 的 parent 设为null, 不然刷新后,会出现一个空item

  5. 怎么用脚本来控制 UIDraggablePanel里面内容的滑动呢?比如我加两个上下按钮,点一下,内容就向下或向下滑动一格。还有滑动到头和到尾这种按钮。

  6. 怎么用脚本来控制 UIDraggablePanel里面内容的滑动呢?比如我加两个上下按钮,点一下,内容就向下或向下滑动一格。还有滑动到头和到尾这种按钮。

  7. MOMO您好, 我想问下 当你 动态生成 N条grid ,每条都添加一个 Button, 请问 点击中怎么判断 我点击的是 哪个 按钮, 它 对应的是那个 grid内容, Button 的Label一样。

  8. momo您好,我有同样的需求。我也做了。但我有2个bug。1.draggable pannel 下面是一张sprite 时,设置了裁剪,却没有出现裁剪。2.当我在panel 下面设置了很多小item时,超出部分可以被隐藏。慢慢拖动panel,会突然所有的物体全部消失!!好奇怪。我在tasharen网站上看到有人说与shader有关,但是我检查了下好像我的没什么问题,完全按照官方的做法。3.动态添加内部item时。我是这样做的currentGo(Transform)Instantiate(prefab,Vector3.zero,Quaternion.identity);生成的item的位置中z轴却是 2 !x,y不为0我可以理解是UIGrid动态设置了位置,可是,z轴的变化我不理解,以至于item都无法显示。希望momo帮忙啊~~

  9. 还有个问题,我添加的item 都是聚到一起的,但是看你的例子里,item是自己往下排列的。这让我很奇怪啊。 然后我自己写location,可以看到每一个item了, 但拖动的时候 panel 也跟着动,然后就都消失了….. 还有scrllbar 计量也不对 无法 自己适应。

  10. 哈喽 momo 看了这一章仿制了一下。有一些不动。 1.item对象的制作有什么注意的吗?是任何ngui对象都可以吗。 我仿制的列表 1.超出列表范围的部分也显示出来了。2 item 一出来并不是在最上面的位置。而是在列表最下方。 悲剧啊》。。。。

  11. 你好,删除列表的时候发现是跳着删的 ,原来item的位置出现了一个空缺。然后我grid.repositionNow = true后显示还是不行。滑动一下后,显示就对了,求教!

  12. 冒昧的问一下雨松,listView能够排序么?要是listview的列表太大,会在移动端显得占用资源,有什么办法可以动态显示? thanks

  13. 那个啥,关于NGUI自带的Scroll View (Panel),我在built setting里面选择了android platform,然后点 switch platform,结果整个Drag View就花了,有资料说是shader的问题,我看了下,是clipping那边出错了,不知道momo有没有什么好的解决方案啊?

  14. ////下面这段代码是因为创建预设时 会自动修改旋转缩放的系数,26 //我不知道为什么会自动修改,所以MOMO重新为它赋值27 //有知道的朋友麻烦告诉我一下 谢谢!!!这里我告诉你为啥,用Instantiate是错的,具体应该用nguitools.addchild,你去看看文档就知道了。

  15. 教程真不错。很详细易懂,momo已经成为unity界的名人了 支持一下 哈哈。 删除列表的时候发现是跳着删的 ,原来item的位置出现了一个空缺 。有没有好的方法可以删除之后自动排位 ??

  16. 嘛…第一个为什么不这样写orz…Transform itemParent;GameObject loadObject;void Start(){ …. itemParent = GameObject.Find(“Panel”).transform; loadObject = Resources.Load(“item”) as GameObject;}void OnClick (){ GameObject o = Instantiate(loadObject) as GameObject; o.name = “item” + count; o.transform.parent = itemParent; //改变物体的父物体时,本身的世界坐标系没有变 所以要进行以下的操作 o.transform.localPosition = new Vector3(0, 0, 0); o.transform.localScale = new Vector3(1, 1, 1); o.transform.localEulerAngles= new Vector3(1, 1, 1);//加个旋转-,- ……}//因为用Instantiate复制出来的物体首先是在根目录下….创建一个后缀带克隆的对象,(这和右键的DupLicate复制的物体有别)//此时假设它的scale是1,1,1 我们改变父对象之后,本身的缩放是不变,所以必须克隆后改变本地坐标,旋转和缩放才能得到你想要的效果

  17. 你好,我按照你上面的操作,在对UIPanel面板图中的属性进行对比时发现,图里的属性在我自己建立的里面没有,就是那两个Material。另外,我按照操作来做,并没有出现教程中的效果,没有出现图形。
    不知道什么原因,请教!