NGUI Tutorial 4 ScrollView

一、createScrollView

1、First, select the panel you want to be your scroll view and right-click anywhere in the Scene View to bring up the context menu, then choose Attach -> Scroll View.

2、The last step is to add the UIDragScrollView script to at least one collide. like create sprite then Attach -> box colider. Again, select the collider, right click in the scene view, Attach -> Drag Scroll View

3 、Now you Can Drag Sprite Only you Drag Sprite.

二、ScrollView_V2
   ScorllView 创建之后只能在item上拖动才能有效，实现在ScorllView 区域内都能drag item。
1 Create ->Widget scale the screen size equle to the size of Scroll View
2 attach the box colider then attach the UIDragScrollView
3 Now you can drag scroll view item which  contains the ScrollView Rectangle
　注意 Scorll View 和 UIRoot Depth 都有panel组件，所以即使Widget 的depth 高于 item的depth ,

因为Scroll View Panel 的 depth 高于UIRoot ，所以不用担心item接受不到drag event.

三、Drag Item && Grid

　　很多时候我们需要在Scroll View中Drag Item 到外面（Attach - > UIDragDropItem ,但是一旦脱出Scorll View 之后就消失不见了，可以再加一个Panel，Attach - > UIDragDropRoot 让其出Scroll View 可见，但是一旦放松鼠标之后还会不见）。

　　如果 release 鼠标后 item就要回来，要保证不能超出Scorll View ,这就要用到Grid。

　　To use UIGrid, select a panel, right-click anywhere in the scene view, and choose the Gridfrom the [/b]Create menu. You may also simply attach the UIGrid component to any empty game object.

　　

　　接下来让我们实现这个效果：

　　1、select all sprite attach DragDropItem script then we can drag items (like sprite1 ,sprite 2)

　　2、create UIGrid ,select all sprite as it's child,you can set Arrangement and Sorting 　

　　　　Arrangement： item 排列的方式

　　　　Sorting ：item drag 之后的排列,比如 horizontal 可以让item drag 到最后面。

　　3 set restriction of all sprite's DragDropItem script to vertically

　　4 这样drag item 之后就可以主动回来了。

　　　这样item 就只能向上拉影响item位置，而不会左右拉影响item位置

　　

四、TWO Drag

　　看ngui 的 scrollview example 我们就可以看到两个grid，他们之间可以互相拖动物体到对方的grid中。

　　让我们来实现个效果：

　　注意，如果你的item drag出 scroll view 之后就消失了，那么你需要create -> uipanel, then add DragDropRoot on it,这样你的item 拖出来之后就可见了。上面已经讲过了

　　

1、create gameobject attach boxcolider ,then add DragDopContainer on it ，name it Container1.（这个就保证我们拖出来的在这个区域可见，而不是放松鼠标就消失了）

2、之后使用上面第三步创建的scrollView,copy一个，去掉里面所有的sprite name it ScorllView1.

3 、将Container1 的 DragDopContainer 中的Reparent Targe reference to  ScrollView1 / Grid (copy 之后的 ScrollView中的子物体）

4、然后我们就可以拖动第一个scrollview 中的item (sprite) 到这个区域，这个item会自动排列到另一个 Scrollview1中去了。

5，但是我们还不能拖回去，当然实现的原理是一样的，copy 一个Container,用这个Container来引用第一个ScrollView中的Grid子物体即可。

　　　

PS：一般将ScrollView作为Container的子物体。

　　如果你将item拖到别的contain上要求平滑过渡到中间你可以如下设置：

　　

　　　　

五、Last

　　如果你觉得还有点问题，我就放个Demo上来吧

　　http://yunpan.cn/Q7nXTchHfX6AR  访问密码 c033