奧東......NGUI Scroll View


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 有它自己的PanelPanelDepth設置為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 RootCamera的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(內容原點)中的設置

 

   

 

 

 

     

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM