NGUI學習筆記（六）：ScrollView、Grid和Table

下面我們來看看遊戲UI開發中比較核心的開發，我稱為列表開發，比如揹包和各種形式不一的列表等，下面我們來看幾個具體的樣例：

 

基本上就是一些重複的製作好的多個UI控制元件進行排列，同時可以支援滾動，當然，高階一點的話也可能需要支援拖拽操作等。

下面我們來學習一下這些功能該如何使用NGUI實現，最後再給出一個具體的示例。

基礎控制元件

NGUI已經幫助我們設計好了相關的元件，所以我們要實現上面的效果不需要從頭開始，只要學會使用NGUI提供的相關的指令碼即可，非常簡單。

ScrollView

即滾動視口元件，當我們需要對一個或多個物件在一個指定的區域內進行滾動時，可以使用該元件。

我們可以在任意的UI下新增一個ScrollView，新增好的ScrollView我們發現其繫結了2個指令碼，分別如下：

UIPanel

UIPanel元件主要是可以實現剪輯移出視口的內容，下面我們看看主要使用到的引數的意思：

Clipping：剪輯型別

1. None：不剪輯，移出可視區域的影象任然可見。
2. Texture Mask：可以選擇一張貼圖作為遮罩。
3. Soft Clip：柔和剪輯，預設選擇該模式，我們一會會集體說它。
4. Constrain but don`t Clip：約束不能拖拽出視口但是不進行剪輯。

如果選擇了Soft Clip則會出現一些可選項，如下：

1. Offset：視口偏移量。
2. Center：和Offset效果一致。
3. Size：視口尺寸。
4. Softness：剪輯邊緣柔和度。

UIScroll View

本指令碼用來控制視口滾動功能，我們具體看下核心的屬性：

1. Content Origin：滾動起點，預設為左上角。
2. Movement：滾動方向：Horizontal水平方向、Vertical垂直方向、Unrestrained自由拖動、Custom自定義方向。
3. Drag Effect：拖動效果：None無效果、Momentum帶慣性的拖動、MomentumAndSpring慣性和彈性的拖動（拖動越界後會自動彈回到正常的位置）。
4. Scorll Wheel Factor：滾輪因子，值越大滾動越快。
5. Momentun Amount：慣性因子，值越大滾動時慣性越大。
6. Restrict Within Panel：拖拽是否被限制在視口內，預設選中即可。
7. Cancel Drag If Fits：但剛好合適視口時則退出拖拽。
8. Smooth Drag Start：勾選時拖拽開始會有一種緩衝的感覺，不勾選則開始拖動就是滑鼠移動的速度。
9. IOS Drag Emulation：模擬IOS的拖拽效果，可以增強拖拽體驗。
10. Scroll Bars：滾動條屬性允許我們自己設定滾動條，留空則表示不使用滾動條。

我們單獨在看看Scroll Bars的Show Condition屬性：

1. Always：總是顯示滾動條。
2. Only If Need：當需要顯示時出現。
3. When Dragging：拖拽時出現。

Grid

下面我們看看Grid元件，當我們需要對多個UI進行排列時就需要用到這個元件了。

一般我們不會直接新增一個Grid物件（因為Grid物件需要依靠父級物件來確定大小，自身是不能設定尺寸的），我們可以先建立一個Invisible Widget元件，再在該物件下建立Grid元件，最後把需要排序的元件拖入該Grid中即可。

當我們需要在編輯介面就將子物件排列好時可以點選設定選單，如下：

我們來看看Grid提供的屬性：

1. Arrangement：網格排列方向，Horizontal水平排列、Vertical垂直排列、Cell Snap按子項當前的位置對齊子項。
2. Cell Width：子項格子寬度。
3. Cell Height：子項格子高度。
4. Column Limit：子項最大數量。
5. Sorting：排序方式：None按照Index排序、Alphabetic按照名字進行排序、Horizontal和Vertical按照localPosition進行的排序、Custom自己實現的排序方式。
6. Pivot：網格起始點錨點。

其它項一般使用預設值即可。

Table

Grid是對子項進行水平或垂直的排序，而Table是對子項進行可換行的排序。

我們來看看Table的屬性：

1. Columns：列數，超過該數目會新增一行。
2. Direction：行新增方向，Down向下新增、Up向上新增。
3. Sorting：排序方式：None按照Index排序、Alphabetic按照名字進行排序、Horizontal和Vertical按照localPosition進行的排序、Custom自己實現的排序方式。
4. Pivot：網格起始點錨點。
5. Cell Alignment：格子對齊點。
6. Padding：間隔。

其它項一般使用預設值即可。

簡單的列表（Demo1）

這裡我們就快速的過一遍，示例工程檔案會在本系列的結尾給出。

下面我們基於上面學習的元件實現一個簡單的列表：

1. 我們在UI中建立一個ScrollView並調整其大小，設定滾動方向為垂直；
2. 在ScrollView中新增一個Grid元件，設定其排序方向為垂直，同時設定其Pivot為Top；
3. 在Grid元件中新增一個Sprite元件命名為Item，在Sprite元件上新增一些列表和一個按鈕；
4. 通過複製建立多個Item到Grid元件中；

實現滾動效果

給每個Item元件都新增Box Collider和Drag Scroll View元件即可；

新增自定義滾動條

NGUI給我們提供了一些已經制作好的預製件，比如水平和垂直滾動條，我們可以直接使用；

1. 點選選單欄“NGUI”->“Open”->“Prefab Toolbar”；
2. 在開啟的視窗中選擇“Simple Vertical Scroll Bar”，將其拖拽到場景中擺好位置；
3. 選中我們之前建立的Scroll View物件，設定其Scroll Bar屬性中的Vertical為我們剛建立的滾動條即可進行關聯；

執行一下，我們簡單的列表就完成了，雖然還沒有任何的功能。