Unity3d中NGUI的Scroll View的制作

今天将详细讲解在Unity3D中制作NGUI的Scroll View的具体方法。

重点步骤

1. 创建基础对象

首先，创建一个Sprite作为背景，接着创建一个Scroll View。然后，在Scroll View内部创建一个Grid。

2. 了解Grid属性

查看Grid的属性，其中：

• Arrangement：表示排列方式。
• Sorting：代表排序方式。当随意拖动Grid内的cell时，会按照所选的方式进行排序。
• Pivot：指轴的位置，当前轴位于中心，通过查看Scene视图里的坐标即可明确。
• Hide Inactive：就目前的了解，该属性的作用是在拖动里面的cell后，可以将所拖动的cell随意移动到任何位置。若勾选了上面或者下面的两个选项，拖动效果可能无法顺利实现。

3. 创建cell

在Grid下面创建一些Sprite，这些Sprite就是前面提到的cell。为了方便操作，可将其制作成Prefab进行复制，这里将其命名为2345。

4. 设置Scroll View和Scroll Bar

将Scroll View的移动方向设置为纵向，然后找到一个Scroll Bar，将其拖动到右下角的Vertical位置。此时运行程序，滑动Scroll Bar即可看到相应效果。

5. 实现拖动滑动效果

上述操作并非重点，我们的目标是通过拖动Grid内的对象来实现滑动效果。具体步骤如下：

• 为命名为2345的cell都添加Box Collider组件。
• 为这些cell都添加两个脚本：Drag Item和Drag Scroll View。
• 将Scroll View拖动到指定位置（实际上不拖动也可以，运行时会自动关联）。需要注意Drag Item的Restriction属性，通过该属性可以设定每个cell的拖动方向，这里将其设定为横向。而Grid整体的拖动方向依然是纵向，这与Scroll Bar的效果一致。

运行程序后可以发现，不使用Scroll Bar，直接纵向拖动2345中的任何一个cell，Grid会整体移动；横向拖动所选的cell，则该cell会单独移动。至此，基本的Scroll View制作完成。

6. 添加额外功能：固定位置容器

我们还可以添加一些额外的功能，例如让cell可以放置到一个固定的位置。具体操作如下：

• 新建一个Sprite，命名为ww，为其添加Box Collider组件。
• 为ww添加一个容器脚本，如UIDrag Drop container脚本，脚本中的target属性指定cell要放置的位置。运行程序后，就可以将cell拖动到该容器上。

7. 实现cell在不同Scroll View间的拖动

下面通过一个例子说明如何将cell从一个Scroll View拖动到另一个Scroll View：

• 新建一个Sprite，命名为bg。
• 为bg创建Scroll View2和Grid2。
• 为bg添加Box Collider组件和容器脚本，并将target指定为Grid2。

运行程序后，即可看到可以将cell从一个Scroll View拖动到另一个Scroll View。若要将cell拖动回来，采用相同的方法即可。

通过以上步骤，就完成了Unity3D中NGUI的Scroll View的制作，并且实现了一些额外的功能。