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

写在前面：    

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

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

制作思路：

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

1，Sprite（背景板）

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

3，Item（具体物件）

4，Scroll Bar 或者Slider（作为滚动条，如果需要的话）

资源准备：

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

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

      

步骤：

1， 新建一个Sprite，作为背包的【背景板】。

可以通过 NGUI—> Create—> Sprite 创建。

2，新建一个Scroll View，作为内容的【容器】。

可以通过 NGUI—> Create—> Scroll View创建。

创建好之后，我们发现，Scroll View 实际就是一个挂载了 UIPanel 和 UIScroll View 组件的游戏体。

3，调整Scroll View 游戏体上的参数。

■ Transform：

调整Position，使Scroll View位于背景板上合适的位置。

■ UIPanel （主要负责裁剪）：

clipping 属性。可以裁减超出范围的控件，使其不显示。上面的方法创建时，会自动把Clipping属性调整为 Soft Clip，这样就会自动裁减超出Panel范围的控件。

调整Size参数以改变裁剪范围，调整 softness 参数改变边缘渐隐的宽度。

■ UIScroll View（滚动效果相关）：

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

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

4，创建物品（Item），并进行相应设置。

具体用什么控件，得看策划需求，我这里是用的button 做item（这样物品就可以响应点击了）。依旧是用查找拖拽的方式创建这个按钮（不清楚如何操作的，请看我第三篇NGUI文章，按钮篇），之后重命名为Item_Button。

本文为示例，所以直接复制了5个摆好了位置。如果是实际中，可以用代码动态生成。比如，后端传递过来有28个物品，那么就要写个算法生成，并排列好。

之后，选中 Item_Button 这个游戏体，查找添加 UIDrag Scroll View 脚本（这个脚本会去父游戏体中查找Scroll View组件，以形成拖动效果）。因为，如果没有drag scroll view组件，那么将无法响应拖动。（这里还要说明的是，如果你创建的物品是sprite，那么你还得添加一个Box Collider去检测碰撞，接收事件）。

5，创建滚动条Scroll  Bar。

滚动条，可以使用 croll Bar 或者Slider。这里我用了 Vertical Scroll Bar， 可以直接查找 Scroll Bar 资源，然后拽出来。命名为Vertical Scroll Bar。

调整相关参数，使 Vertical Scroll Bar 位置与大小符合预期。

6，将Vertical Scroll Bar 拖拽入Scroll View 游戏体的 UIScroll View 组件下的 Scroll Bars变量中。

还可以调整滚动条的Show Condition（显示模式），比如默认的：Only If Needed（超过UIPanel 的高度时才显示）。

7，运行，即可体验效果！

附注：

本文在2106-11-06 重新参考了 高雪峰编著的《Unity 3D NGUI 实战教程》，引用了书中的一些组件说明。