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為我們剛創建的滾動條即可進行關聯;

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


免責聲明!

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



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