NGUI 3.0.2 example 8

该实例是，使用可拖动Camera创建scroll view效果。

首先还是让我们先来实现效果，然后再说其它。

1、NGUI -> Open ->UI Wizard创建一个2D界面，并且设置为default层。更改根目录名为2DUI.

  

2、在面板（panel）下添加一个精灵，作为背景。添加方式是：NGUI -> Create -> Sprite。

  

3、这时的结果如下：

4、创建一个新的层，层的名字叫做view。

5、创建一个新的2d ui，该ui所在的层为view。

更改该界面根目录为view，并且将目录结构变化成如下样子。

6、在panel下创建用于滚动的项目列表。你可以使用table或者grid自动排列，这里就不多加牵涉这两个东西，而采用直接手动摆放。

NGUI -> Open -> widget wizard

更改该按钮名为 item，并且修改item的子对象（background）精灵的大小为128 * 128，同时修改item的Box Collider 的大小为 128 * 128，center 为 0 0 0.

7、复制6个item，并且将它们排列成一行。

8、好了，现在我们就有了一个需要滚动的列表了。现在重要的步骤开始了：首先为view下的Camera添加一个组件UIViewport. UIViewport 中 Source Camera 设置为2D UI下的camera，这是还有两个属性，topleft和bottomright没有设置。这个两个属性是用来限定camera的viewport的大小的。这时，我们就要在2D UI的panel下创建两个Anchor，这两个anchor的container为sprite，side 分别是bottomright和topleft. 然后将这两个anchor拖拽至UIViewport 下的topleft 和 bottomright。

9、为view下的camera添加组件UIDraggable Camera。 设置如下。

10、为view下的每一个item都添加UIDrag Camera，并且将view的camera拖拽进去。

11、接下来这步十分关键！！设置view下的anchor对象的uianchor组件的camera属性值为2d ui下的camera（主摄像机）。

12、这个时候所有的item都跑到2d ui的位置去了，但是游戏视图中什么都没有。没有关系，接着我们需要将view下的panel拖动，拖动到view下camera的viewport中，然后，就可以了。

然后点击play，我想结果应该就能出来了。