NGUI官网示例7--ScrollView讲解(二)第二步，创建和实现图标滚动效果首先先创建这个窗口的拖动图标。在菜单上选择NGUI->CreateaPanel,在WindowRoot下创建一个新的Panel，并命名为PanelClipView。如图所示：创建一个空的游戏对象，命名为UIGrid，该对象用来自动调整它的子对象的排列方式。并把该游戏对象作为PanelClipView的子对象，并reset一下。如图所示：新建一个空的游戏对象，命名为Item1。并作为UIGrid的子对象，并reset一下。如图所示：接着，使用我们先前学过的创建Widget的方法，为它创建图标的外观（这里不再赘述），最后效果如图所示：使用Ctrl+D的方式复制出9个Item，位置重叠不要紧，等会为UIGrid加上一个组件之后会有神奇的效果。如图所示：现在选择UIGrid，为它添加一个Grid组件（Component->NGUI->Interaction->Grid）,这时候神奇的效果出现了，真佩服NGUI的功能，它会自动排列好它的组件，最终效果如图所示：因为NGUI的事件响应是通过Trigger来实现的，所以，选择所有的Item(在hierarchy里选择Item1，然后按住shift键，再点击Item9，这样就连选了所有的Item元件)，为它们添加一个Trigger，（NGUI->Attachacollider）。然后再为它们添加一个DragPanelContent组件（Component->NGUI->Interaction->DragPanelContents），加上这个组件之后，就表明这些item是DragPanel的一部分（必须添加的）。如图所示：NGUI插件教程www.misoft.com.cn/forum-114-1.html全面学习NGUI（这一步是关键）选择PanelClipView，为其添加一个Draggablepanel组件（Component->NGUI->Interatcion->DraggablePanel）。点击播放，可以看到，这些Item终于可以通过鼠标划动了。如图所示：现在这里有一个问题，如果你鼠标左右移动时没有任何问题，可是上下移动时，这些item也跟着上下移动，如图所示，选择PanelClipView中的DraggablePanel组件，打开Scale参数，把其中的Y和Z轴的值设置为0，这样，就可以把拖动方向限制在x轴上。如图所示：最后，大家还记得我们已经做了一个滚动条在下方，我们可以用它来控制item的滚动，很简单，把这个元件赋值给PanelClipView的DraggablePanel组件下的HorizontalScrollBar，就可以了，如上图。点击播放，现在你可以使用那个滚动条来对item进行滚动了！这样，我们就实现了图标的滚动了。分为三步，第一步是使用Grid组件对Item进行排列；第二部是为为Panel添加DraggablePanel组件；第三步是为每个Item添加Trigger和DragPanelContent。