首页 > 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. 夜色无边 说:

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

  2. GeneralDo 说:

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

  3. 张晓川 说:

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

  4. liubaiqiang 说:

    太乱了 完全做不下去

  5. zengfeng75 说:

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

  6. 西湖盗月 说:

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

  7. 林峰 说:

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

  8. testu3d 说:

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

  9. yx 说:

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

  10. yx 说:

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

  11. 好像发错文章了,但是还是求指点一二。。

  12. momo大神用NGUI怎么实现鼠标当准星呢,GUI可以直接画texture,NGUI用sprite的画找不到怎么动态改变sprite位置的函数,求指点

  13. Everet 说:

    momo的哇咔咔 太给力了, 程序员都是长不大的孩子啊

  14. 尐爺_趠Man 说:

    我用的UIDraggable Camera ,可是添加到resources后就添加不了UIDraggable Camera里面的摄像机了

  15. 叉子 说:

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

  16. 听滴答 说:

    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帮忙啊~~

  17. 东方不白 说:

    虽然item不在显示范围,但还是能接受点击。

  18. 东方不白 说:

    虽然不item不在显示范围,但还是能接受点击。

  19. 东方不白 说:

    有bug

  20. TracyMa_ 说:

    设置 uilabel 的时候出现 ???怎么让他支持中文呢?已经试过用utf8 编码了

  21. 西凡纳斯 说:

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

  22. 西凡纳斯 说:

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

  23. D的意志 说:

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

  24. 欧宇龙 说:

    老实交代哈…. 点一次广告你能收获几块啊

  25. 欧宇龙 说:

    没事 看一次 文章 就 点几次广告….. 嘿嘿

  26. fanglr 说:

    雨松哥,动态加载后,刷新后,顺序就乱了,怎么办?

  27. Blade 说:

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

  28. Hudson 说:

    非常有用的心得分享 great works!

  29. 张明 说:

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

  30. 黄峻 说:

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

  31. 黄峻 说:

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

  32. 今天6号 说:

    每个cell的宽高可以不同吗

  33. kuangyawen 说:

    雨松大大,我想做个游戏用的仓库背包界面,格子带吸附,物品图标能拖动。有啥经验能指教下呀。。。。

  34. 李代杰 说:

    我想动态加载几百上千条,会很卡,有没有好点的解决方案,谢谢。

  35. 程晓正 说:

    这个UI Draggable Panel 是只有正式版才有么?我的NGUI里面没有这个panel

  36. 围克围 说:

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

  37. 我想请问一下 我看官方的Demo的ScollList的示例 为什么当我把SlicedSprite拖给一个物体的时候它就会被放大 尺寸变得很大呢?

  38. kuku小夭 说:

    嘛…第一个为什么不这样写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 我们改变父对象之后,本身的缩放是不变,所以必须克隆后改变本地坐标,旋转和缩放才能得到你想要的效果

  39. kuku小夭 说:

    嘛…第一个为什么不这样写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 我们改变父对象之后,本身的缩放是不变,所以必须克隆后改变本地坐标,旋转和缩放才能得到你想要的效果

  40. 秦_2012 说:

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

  41. 小N_大进行曲 说:

    Instantiate后面还有两个参数,都填上就不会改变了,否则按默认的生成。

  42. 学习 说:

    学习了

  43. 板凳一下,你就知道,楼下队形

  44. 雨松MOMO 说:

    沙发一下!你就知道哇咔咔~~

留下一个回复

你的email不会被公开。