第二步,创建和实现图标滚动效果
首先先创建这个窗口的拖动图标。在菜单上选择 NGUI->Create a Panel, 在 WindowRoot 下创建一个新的 Panel ,并命名为 Panel ClipView 。如图所示:
![](http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_55cdd4cc0497dfd.png?5)
创建一个空的游戏对象,命名为 UIGrid ,该对象用来自动调整它的子对象的排列方式。并把该游戏对象作为 Panel ClipView 的子对象,并 reset 一下。如图所示:
![](http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_5d2e263cf65f4f5.png?5)
新建一个空的游戏对象,命名为 Item 1 。并作为 UIGrid 的子对象,并 reset 一下。如图所示:
![](http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_22d7feed7904cf1.png?6)
接着,使用我们先前学过的创建Widget的方法,为它创建图标的外观(这里不再赘述),最后效果如图所示:
![](http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_530961c16dde53c.png?265)
使用 Ctrl+D 的方式复制出 9 个 Item ,位置重叠不要紧,等会为 UIGrid 加上一个组件之后会有神奇的效果。如图所示:
![](http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_7d6b417acc6b329.png?9)
现在选择UIGrid,为它添加一个Grid组件(Component->NGUI->Interaction->Grid),这时候神奇的效果出现了,真佩服NGUI的功能,它会自动排列好它的组件,最终效果如图所示:
![](http://game.ceeger.com/forum/attachment/thumb/Mon_1210/16_7487_ee55f65e1fa619c.png?294)
因为 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 的一部分(必须添加的)。如图所示:
![](http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_eb2db6f69a376a3.png?24)
(这一步是关键)选择Panel ClipView,为其添加一个Draggable panel组件(Component->NGUI-> Interatcion->Draggable Panel)。点击播放,可以看到,这些Item终于可以通过鼠标划动了。如图所示:
![](http://game.ceeger.com/forum/attachment/thumb/Mon_1210/16_7487_6df97aa690f8beb.png?641)
现在这里有一个问题,如果你鼠标左右移动时没有任何问题,可是上下移动时,这些item也跟着上下移动,如图所示,
![](http://game.ceeger.com/forum/attachment/thumb/Mon_1210/16_7487_607547a8ab74cf5.png?626)
选择Panel ClipView中的DraggablePanel组件,打开Scale参数,把其中的Y和Z轴的值设置为0,这样,就可以把拖动方向限制在x轴上。如图所示:
![](http://game.ceeger.com/forum/attachment/Mon_1210/16_7487_260c485af6c4130.png?36)
最后,大家还记得我们已经做了一个滚动条在下方,我们可以用它来控制item的滚动,很简单,把这个元件赋值给Panel ClipView的DraggablePanel组件下的Horizontal Scroll Bar,就可以了,如上图。点击播放,现在你可以使用那个滚动条来对item进行滚动了!
这样,我们就实现了图标的滚动了。分为三步,第一步是使用
Grid
组件对
Item
进行排列;第二部是为为
Panel
添加
DraggablePanel
组件;第三步是为每个
Item
添加
Trigger
和
Drag Panel Content
。