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

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
40
41
 
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
31
32
 
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
22
23
 
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是不是很给力呢？哇咔咔！啦啦啦！

 

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

 

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

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

最后编辑：
作者：雨松MOMO
专注移动互联网，Unity3D游戏开发
站内专栏 QQ交谈 腾讯微博 新浪微博
捐 赠写博客不易，如果您想请我喝一杯星巴克的话？就进来看吧!

您可能还会对这些文章感兴趣！

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

← 早期评论
  1. Steven 说：
    2016 年 4 月 15 日下午 10:19

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

    回复
  2. 黄海峰 说：
    2016 年 3 月 19 日下午 7:38

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

    回复
  3. 123 说：
    2015 年 1 月 4 日上午 10:52

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

    回复
  4. sbfhhh 说：
    2014 年 12 月 30 日下午 1:29

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

    回复
  5. qinyuanpei 说：
    2014 年 11 月 8 日上午 10:10

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

    回复
  6. __w-小龙__ 说：
    2014 年 9 月 26 日下午 2:17

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

    回复
  7. 夜色无边 说：
    2014 年 8 月 21 日下午 3:45

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

    回复
  8. GeneralDo 说：
    2013 年 12 月 2 日上午 10:18

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

    回复
  9. 张晓川 说：
    2013 年 11 月 10 日下午 2:50

    学习了，不过删除 那个位置，上面好像有 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 说：
    2013 年 10 月 26 日上午 8:32

    太乱了 完全做不下去

    回复
  11. zengfeng75 说：
    2013 年 8 月 19 日上午 1:54

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

    回复
  12. 西湖盗月 说：
    2013 年 8 月 5 日上午 3:14

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

    回复
  13. 林峰 说：
    2013 年 7 月 6 日上午 9:09

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

    回复
  14. testu3d 说：
    2013 年 7 月 3 日下午 12:31

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

    回复
  15. yx 说：
    2013 年 6 月 28 日上午 1:36

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

    回复
  16. yx 说：
    2013 年 6 月 21 日上午 9:37

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

    回复
← 早期评论

留下一个回复

你的email不会被公开。