NGUI版本: 3.5.6b
參考資料:
http://www.unitymanual.com/forum.php?mod=viewthread&tid=21374&extra=page%3D1%26filter%3Dtypeid%26typeid%3D117
Scroll View定義:用來在界面中繪制一個滾動視圖區域,並且可以通過滾動條來控制顯示的區域內容
對應NGUI官網上的大綱是:
1 新建立一個Scene場景
2 拖入一個Contorl-Backgound到Scene中,微調,作為背景使用
3 鼠標在場景中右鍵點擊Create-->Scroll View (調整的時候,注意不要調整的是UIPanel)
4 創建一個Sprite,或者快捷鍵Alt+Shift+S 並且將這個Sprite拖放到Scroll View 下(在Hierarchy中),Depth為0
拖動Sprite的時候,Sprite會被Scroll View的邊緣剪輯一部分
5 添加交互事件的兩個必要步驟
1 給Sprite添加Collider(碰撞體),鼠標右鍵-->Attach--> Box Collider 再右鍵點擊Sprite的時候Attach中多了很多選項
2 給Sprite添加Drag Scroll View (拖動滾動視圖)腳本,鼠標右鍵-->Attach-->UIDrag Scroll View 這個時候就可以用鼠標或是 Touch Event(觸摸事件) 控制Scroll View,這個時候這個Sprite就會有滑動效果
6 復制(Ctrl+D)Scroll View下的多個Sprite,就能夠實現拖動它們(不包含Sprite外邊的,只包含Sprite內部),進行滾動
7 實現拖拽兩個物體中間或外面,整體滑動效果
1 選中Scroll View,打開右鍵菜單選擇Create Invisible widget,就會出現一個以Container的隱形控件,Depth 為1,
Container這里我設置的大小是和Scroll view 大小一樣的
Invisible Widget(隱形控件) 只是一個四方形框架,中間不繪制任何東西
2 調整尺寸,和ScrollView重疊,然后將其拖出Sroll View,也就是在UIRoot下 這樣就不會跟着Scroll View一起移動
3 最后添加Box Collider 和 Drag Scroll View(需要設置UI的Scroll View),UIDrag Scroll View 腳本中Scroll View 綁定上文創建的那個Scroll View
8 Container的Depth是1,Scroll View的Sprite的Depth 是0,Container(隱形控件)是否會攔截Spirte中的事件?
1 移除Container中的Drag Scroll View腳本,在點擊播放按鈕,仍然可以拖拽(說明只需要添加Box Collider碰撞體就可以實現點擊空白部分實現拖拽滑動)
說明Container不會獲取事件,而物體會獲取事件 因為Scroll View 有它自己的Panel,Panel的Depth設置為1
而UIRoot中Panel對應的Depth是0,Scroll View中的Depth是1,所以事件會先發送到Scroll View 之后才會發送到Ui Root
9 如何攔截事件的發生?比如你有一個Loading Screen(加載畫面),你需要把界面中所有的事件進行攔截
1 問題很簡單,你需要創建一個新的Panel(選中UI Root,右鍵菜單中選擇Create--Panel)
2 這個Panel,默認Depth值會比其他所有的Panel中,最大的值大1,現在的值2
3 現在把Container移動到這個Panel中,也就是讓它成為Panel的子元素,這個Panel的值是2,它會優先獲取事件
4 現在我點擊播放按鈕,再嘗試進行拖拽,發現不起作用了,攔截成功,可以借助Tip1 來查看攔截的是哪一個物件,以及判定是否成功
10 Panel相關
1 要讓某些部件放在Scroll View的上面,則把部件放到一個Panel中,並確保Panel的Depth值大於Scroll View中的Depth
2 Panel的Depth值比其他控件的Depth都高
11 在Scroll View中把物體項目拖拽出來
1 在Scroll View中的Sprite項中添加Drag and Drop Item (拖拽物品腳本) 一個Scroll View中的項,在拖拽的時候多余Scroll View的部分會被裁減,之前Sprite的Drag Scroll view會失效
2 在Panel下面的Container的坐標勾選框取消掉,在Hierarchy中顯示是暗灰色
3 在Panel中添加Drag and Drop Root(拖拽根)腳本,Panel的Depth值比Scroll View 的Depth值高,所以當把物體拖出來之后,會沖重定它的父級為Drag and Drop Root
當把Scroll View中的項拖出Scorll View 時,會消失不見
因為Scroll View中沒有關於位置設定的腳本,所以會停留在鼠標打開的位置
4 Hierarchy中選中Scroll View,Ctrl+Shift+N 創建一個子物件,修改名稱為Grid名稱,加入Grid腳本
它會創建一個網格,並把它包含的子元素的位置進行排列,把之前Scroll View中的項拖到Grid物件下面,選中UIGrid腳本,執行Execute,並調整Cell Width/Height為100
此時,拖動Scroll View中的項,到外部放開,你就會看到到自動回到Scroll View的尾部(選中UIGrid中的Smooth Tween更好的查看Scroll View中的項移動的效果)
實現不讓其自動回到Scroll View的尾部
UIGrid 腳本中可以看到還可以改變Arrangement(排列)和Sorting(排序)選項,都選擇Horizontal(橫向),上圖中Sorting還沒有繼續選擇
12 添加一個Scroll Bar(滾動條)與Scroll View進行關聯
1 在Prefab Toolbar中拖動一個Prefab(Horizontal Scroll Bar)到Scene中
2 選中Scroll View,把Horizontal Scroll Bar拖入到Scroll View腳本中的Scroll Bars中的Horizontal選項,如下圖,Show Condition一定選擇為Always,否則可能會看不到
13 彌補缺陷,不但有拖拽功能而且有滾動功能,實現左右滑動,上下的時候實現拖動
1 選中所有的Scroll View中的Sprite 的UIDrag Drop Item腳本中的Restriction(限定)變量,修改為Vertical
這里就是允許縱向的拖拽物體,而橫向拖拽則不允許
14 把物體拖拽到某個地方並停留在那個位置上
1 創建一個Sprite 名字叫做ConSprite,放入到UIRoot層次下,調整Depth為1,並添加一個Drag and Drop Container(拖拽容器)腳本
Drap Drop Container中包含Reparent Target選項,可以讓你重新設置物體目標,當你拖入物體到Container中
2 在UIRoot下面,Ctrl+Shift+N 創建一個新物件ObjChild,放到ConSprite上方一點,這里一定要在ObjChild中加入Grid腳本,不加入就不能替換位置,加入Drag and Drop Container腳本就不行
15 模擬NGUI Scroll View中的第11個Example,兩列Scroll View 中的項可以互相拖動,相互放到彼此的Scroll View中,並能夠進行排序
1 復制 Scroll View 並且修改名稱為Scroll View Empty,刪除Scroll View Empty中的Child下面所有的Sprite,並且重置Scroll View Empty中UIScroll View 腳本中的Scroll Bars Horizontal為none
2 在Scroll View中添加Drag Drop Container腳本 並且綁定Reparent Target選項,為Scroll View下的Grid
3 在Scroll View Empty中添加Drag Drop Container腳本 並且綁定Reparent Target選項,為Scroll View下的Grid
16 上代碼(其實一句代碼也沒有)
鏈接:http://pan.baidu.com/s/1pJqMaJh 密碼:1qvx
Tip1:
使用NGUI的時候,你可能不知道為什么無法獲取事件?
遇到這種情況,你可以選中UI Root中Camera的Debug選框,這個時候就會在Game控制前顯示當前指針指向的部件
Tip2:
腳本層次關系
Scroll View中用到的是Scroll View 的腳本
Scroll View中的項中用到的腳本是UIDrap Scroll View
Tip3:
Scroll View中的Scroll view中多個物體的時候,推薦時候點擊Scroll View中的腳本,然后選中
這樣會把Scroll Bar和Scroll View全部調整至初始化狀態,基於Content Origin(內容原點)中的設置