纳金网

标题: 【转载】NGUI官网示例7-- ScrollView讲解(二) [打印本页]

作者: 艾西格亚 时间: 2012-10-11 08:56
标题: 【转载】NGUI官网示例7-- ScrollView讲解(二)
（浙江传媒学院-新媒体学院-数字游戏设计专业-张sir）

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

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

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

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

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

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

因为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的一部分（必须添加的）。如图所示：

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

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

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

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

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

作者: may 时间: 2012-11-30 21:11
支持楼主的帖子

作者: vzheng 时间: 2013-7-25 14:22
感谢！！！！楼主辛苦了

作者: dzspb 时间: 2013-7-27 16:52
很好的教程，谢谢！

作者: wangwbzhw 时间: 2014-3-25 10:52
动态添加删除其中的一个Item 马上就会出问题了，滚动条就不准了

作者: asdfasdfcc 时间: 2014-3-26 14:28
感谢！！！！楼主辛苦了

作者: xueshong 时间: 2014-4-23 17:10
不错的继续学习

作者: omgomg2014 时间: 2014-4-23 23:54

Thanks for sharing!

作者: 鸡贼不差钱 时间: 2014-5-8 09:17
感谢楼主，学习了

作者: seillea 时间: 2014-5-13 21:19
这个可以又！

作者: seillea 时间: 2014-5-13 21:19
支持了！！！！

作者: seillea 时间: 2014-5-13 21:19
转载了！！！！！！

作者: seillea 时间: 2014-5-13 21:20
喜欢喜欢！！！！！

作者: seillea 时间: 2014-5-13 21:20
收下了！！！！！

欢迎光临纳金网 (http://rs.narkii.com/club/)