NGUI 3.5教程（九）Scroll view - 制作【商店】和【背包】

转载自：http://blog.csdn.net/chenggong2dm/article/details/41043155

写在前面：    

    最近太忙，好久没有更新教程了，请大家原谅。本文将用NGUI，一步步实现【商店】和【背包】界面。由于它们的逻辑大同小异。所以这里仅以【背包】为例。

    这篇文件和前八篇文章，基本涵盖了NGUI的大多数常用用法；并且，将来的趋势很可能是官方UI逐渐替代NGUI，所以，这篇教程是NGUI 3.x系列教程的最后一篇。

    欢迎大家纠错、拍砖！原创很辛苦，如有转载，请注明出处。

用 NGUI 制作游戏【背包】（【商店】也一样），需要如下控件：

1，Container（容器）

2，Scroll view（可滚动的视图）

3，Grid（网格）

4，Item（具体物件）

步骤：

1，把需要的【底板】素材、【物品】素材，准备好，打成Atlas。

（下面的素材，是从《魔兽世界》里抠出来的，在此向经典致敬！） 




 

  

  

 

2， 新建一个Sprite，作为背包的【底板】。NGUI—> Create—> Sprite。



3，创建一个容器。可以通过NGUI—> Create—> widget 创建一个Container。把这个容器作为【底板】的子物体。

创建后，更改 Widget 的 Dimesions 属性，使容器与你的设想大小匹配。

也要注意一下 depth 属性，要比背包的背景图片要高一层。

然后，NGUI --> attach --> collider, 添加一个box collider。

再通过查找drag添加两个脚本组件：

（1）DragDrop Container（用于指定Grid）

（2）DragScroll View（指定Scroll View）拖动控制视野脚本



4，创建Scroll view。这东西本质是一个Panel（利用panel的裁减），然后挂上scroll view组件。

（1）通过 NGUI—>Create—> Panel ，创建一个Panel。

这里主要利用了 panel 的 clipping 属性。可以裁减超出范围的控件，使其不显示。只要把Clipping属性调整为 Soft Clip，就会自动裁减超出Panel范围的控件。而且需要调整Cliping的各项数值，设置剪裁范围。

（2）通过查找添加 scroll view 组件。

属性Content Origin为内容的对齐方式，这里我给设置成了TopLeft。

更改Movement 为Vertical。（竖着拖动）

 


之后发现对齐方式不好使。还需要加入spring panel脚本。然后调整X、Y、Z对应的数值，来进行定位。

5，创建Grid。 通过 NGUI—> Create—> Grid 创建。

更改Arragentment 为Vertical。（竖着拖动）

还需要勾选 Constrain to Panel，（强制对齐panel）



6，创建物品，也就是Item。具体用什么控件，得看策划需求，我这里是用的button做item，这样物品就可以点击了。

钮添加drag scroll view。如果没有drag scroll view组件，那么无法响应拖动。



7，检查一下整个层级，然后把需要赋值的，给予赋值。

8，运行，效果如下：