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爲咱們剛建立的滾動條便可進行關聯；

運行一下，咱們簡單的列表就完成了，雖然尚未任何的功能。