NGUI官网示例7-- ScrollView讲解(二)

第二步，创建和实现图标滚动效果

首先先创建这个窗口的拖动图标。在菜单上选择 NGUI->Create a Panel, 在 WindowRoot 下创建一个新的 Panel ，并命名为 Panel ClipView 。如图所示：

描述:请输入描述

图片:1.png

创建一个空的游戏对象，命名为 UIGrid ，该对象用来自动调整它的子对象的排列方式。并把该游戏对象作为 Panel ClipView 的子对象，并 reset 一下。如图所示：

描述:请输入描述

图片:2.png

新建一个空的游戏对象，命名为 Item 1 。并作为 UIGrid 的子对象，并 reset 一下。如图所示：

描述:请输入描述

图片:3.png

接着，使用我们先前学过的创建Widget的方法，为它创建图标的外观（这里不再赘述），最后效果如图所示：

描述:请输入描述

图片:4.png

使用 Ctrl+D 的方式复制出 9 个 Item ，位置重叠不要紧，等会为 UIGrid 加上一个组件之后会有神奇的效果。如图所示：

描述:请输入描述

图片:5.png

现在选择UIGrid，为它添加一个Grid组件（Component->NGUI->Interaction->Grid）,这时候神奇的效果出现了，真佩服NGUI的功能，它会自动排列好它的组件，最终效果如图所示：

描述:请输入描述

图片:6.png

因为 NGUI 的事件响应是通过 Trigger 来实现的，所以，选择所有的 Item( 在 hierarchy 里选择 Item 1 ，然后按住 shift 键，再点击 Item 9 ，这样就连选了所有的 Item 元件 ) ，为它们添加一个 Trigger ，（ NGUI->Attach a collider ）。然后再为它们添加一个 Drag Panel Content 组件（ Component->NGUI->Interaction->Drag Panel Contents ），加上这个组件之后，就表明这些 item 是 Drag Panel 的一部分（必须添加的）。如图所示：

描述:请输入描述

图片:7.png

（这一步是关键）选择Panel ClipView，为其添加一个Draggable panel组件（Component->NGUI-> Interatcion->Draggable Panel）。点击播放，可以看到，这些Item终于可以通过鼠标划动了。如图所示：

描述:请输入描述

图片:8.png

现在这里有一个问题，如果你鼠标左右移动时没有任何问题，可是上下移动时，这些item也跟着上下移动，如图所示，

描述:请输入描述

图片:9.png

选择Panel ClipView中的DraggablePanel组件，打开Scale参数，把其中的Y和Z轴的值设置为0，这样，就可以把拖动方向限制在x轴上。如图所示：

描述:请输入描述

图片:10.png

最后，大家还记得我们已经做了一个滚动条在下方，我们可以用它来控制item的滚动，很简单，把这个元件赋值给Panel ClipView的DraggablePanel组件下的Horizontal Scroll Bar，就可以了，如上图。点击播放，现在你可以使用那个滚动条来对item进行滚动了！

这样，我们就实现了图标的滚动了。分为三步，第一步是使用 Grid 组件对 Item 进行排列；第二部是为为 Panel 添加 DraggablePanel 组件；第三步是为每个 Item 添加 Trigger 和 Drag Panel Content 。