首页 > 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
专注移动互联网,Unity3D游戏开发
捐 赠写博客不易,如果您想请我喝一杯星巴克的话?就进来看吧!

NGUI研究院之自制ListView动态增加与删除(三)》有 90 条评论

  1. Steven 说:

    如果我有N条数据,如何才能复用item 永远只显示 需要显示的那 5 6个?

  2. 黄海峰 说:

    雨松大神,怎么设置每个cell的高不同啊

  3. 123 说:

    为什么我删除了之后不自动排列 非得我点击第二次才会平排列怎么回事啊

  4. sbfhhh 说:

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

  5. qinyuanpei 说:

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

  6. __w-小龙__ 说:

    新版NGUI在UIGrid中添加子节点以后需要在UIGrid(Script)的设置中点击下Execute,来完成网格中子节点的布局。

  7. 夜色无边 说:

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

  8. GeneralDo 说:

    戒毒所的广告都来了。。。。

  9. 张晓川 说:

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

  10. liubaiqiang 说:

    太乱了 完全做不下去

  11. zengfeng75 说:

    这篇感觉讲得稍微有点乱 没前两个清晰

  12. 西湖盗月 说:

    如果要实现类似QQ的好友列表,怎么在这个基础上实现啊。。求大神回复

  13. 林峰 说:

    有drag camera的例子吗??期待。。期待

  14. testu3d 说:

    为什么我的Item运行之后会聚到一起互相覆盖的?

  15. yx 说:

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

  16. yx 说:

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

留下一个回复

你的email不会被公开。