制作滾動視圖(ScrollView)


怎樣判斷是否應當使用滾動視圖

  所謂的滾動視圖,是指一個可以滑動的視窗,視窗大小和位置固定不變,視窗內的內容用戶可以通過手指滑動或者拖動滾動天來進行滾動瀏覽。

  滾動視圖的目的是為了解決同類內容過多,一個UI版面顯示不下的情況。如果同類內容過多,一般可以采取設置多個頁面,然后通過翻頁瀏覽的方式來瀏覽,但是很明顯,滾動視圖會比翻頁更方便,因為在移動上可以很方便地花瓶進行滾動,在PC上可以通過鼠標的滾動進行滾動。

  當需要判斷是否應該使用滾動視圖制作UI時,可以遵循以下規律:

  (1)有很多同類內容一個版面顯示不完,卻必須要讓用戶很方便地進行瀏覽;

  (2)它的核心目的是方便瀏覽;

 

創建滾動視圖

  1.第一種方法:使用預設直接創建

  2.第二種方法:自己拼裝

    單擊Unity頂部NGUI菜單,選擇Create->ScrollView。

 

 

滾動視圖核心組件UIPanel

  (1)在ScrollView被生成時,為了讓它能夠在上層顯示,所以它自動給Panel設定了一個深度,這個深度大小是當前情況下剛好可以顯示在最上層的深度,也就是當前UIRoot的UI樹中深度最大的Panel的深度+1。

  (2)它的Clipping被自動設為了SoftClip。

  Clipping提供了以下模式:

    1.None

      無剪輯模式,這種模式下,滾動視圖中的物體可以被拖動,但是視窗因為沒有剪輯,所以是沒有邊界的!這將可能導致內容被拖出屏幕外再也拖不回來。

    2.SoftClip

      柔和剪輯模式,一般會使用這種模式來制作ScrollView。

      在這種模式下,Panel將會剪輯一塊可是區域出來顯示,這個被剪輯出來的區域以外的部分將會被剪輯掉而無法顯示出來。

      在柔和剪輯模式下,可以看到以下幾個設置項。

        Offset

          視窗的偏移,以像素為單位,設置這個參數將會導致視窗以Panel的中心點為基准進行偏移。

        Center

          調整視窗的中心點,效果和Offset一樣。

        Size

          視窗的大小,一般情況下,都需要調整視窗的剪輯窗口的大小,以此來匹配背景底板的大小。如果視窗Size比底板大,將會導致視窗內容會滑動出底板的邊框,如果比底板小,則會導致視窗內容滑動還沒有到底板邊緣就已經被剪輯掉消失了。

        Softness

          剪輯邊緣的柔和程度,視窗中,內容被拖動到邊緣部分時,會有一個漸隱的效果。如果這個Softness的值設為0,則內容被拖動到邊緣時,會被像刀切掉一樣被剪輯掉。

    3.Constrain but don't Clip

      這種模式下是指視窗會盡量地包含所有內容但是不剪輯它們,效果等同於有邊界但是邊界為全屏,無法完全將內容拖到屏幕外面去,只要在屏幕范圍內,都能看到內容,內容並不會被剪輯掉。

 

滾動視圖核心組件UIScrollView

  UIPanel是滾動視圖中控制視窗大小的核心組件,而UIScrollView則是滾動視圖中控制滾動功能的核心組件沒有UIScrollView組件的視窗是無法進行滾動的。  

  1.ContentOrigin

    這是滾動視圖所包含的內容的起點,默認設置為左上角。

  2.Movement

    滾動視圖的滾動方向,也就是內容的移動方向。一共提供了4種方式。

      Horizontal

        水平方向拖動,也就是左右。

      Vertical

        豎直方向拖動,也就是上下。

      Unrestricted

        自由拖動。

      Custom

        自定義方向,會彈出新的X和Y設置框,可以通過對X、Y的設置來定義一個特殊的方向。

  3.Drag Effect

    拖動效果。里面提供了3種效果。

      None

        無效果,拖到哪算哪。手指停下或者離開屏幕的一瞬間視圖內容也停下了。

      Momentum

        帶動能的拖動,也就是有一個慣性,當我們手指松開時,視窗內容還會繼續朝之前的方向滑動一會兒,中途如果遇到邊界才會立即停下,否則會等慣性沒了才會自動停下。這種效果主要目的是讓用戶用最少的操作來滑動視圖內容。

      MomentumAndSpring

        動能和彈性兼備的一種方式,這種方式和上一種動能方式很相似,區別在於,在這種方式下,當滑動內容拖到了視窗邊界時,它可以被繼續拖動“越界”,在松開手指時立即像彈簧一樣彈回並回到正常視窗范圍內。

  4.Scroll Wheel Factor

    滾輪因素的設定,這個值越大鼠標滾輪的滾動就會越靈敏。

  5.Momentum Amount

    動能因素的設定,這個值越大,滑動時的慣性就越大(前提是Drag Effect有動能效果)。

  6.Restrict Within Panel

    選中后拖動將會被限制在Panel內,這個是默認勾選的。如果不勾選這個選項,則將會導致內容被拖到視圖的剪輯部分以外再也無法回來。

  7.Cancel Drag If Fits

    當它剛好適合視窗內時,則自動退出拖動。

  8.Smooth Drag Start

    在開始的時候拖動平滑,勾選上后,拖動時內容有一個速度從0變到拖動的那個速度的一種平滑自然的效果。如果不勾選,在開始滑動時,內容會瞬間與手指的速度一樣,就像黏在手指上了一樣,體驗比較差勁。

  9.IOS Drag Emulation

    模擬iOS系統的拖動效果。這也是一種為了增強拖動體驗的選項。

  10.ScrollBars

    為滾動視窗指定拖動條。這個設置是非必選項,可以設置也可以不設置,不設置的話滾動視窗一樣能正常工作,因為在移動設備上,我們可以用手指滑動,在PC上可以通過按住鼠標鍵不放來拖動,而拖動條,可以理解為拖動的進度條。

    拖動條一共可以指定兩個,一個水平的、一個豎直的。

    在Show Condition中設定拖動條出現的規則,有以下3中規則可選。

      Always

        不管什么情況,滑動條總是出現。

      OnlyIfNeed

        只有當需要的時候出現。即內容在滾動視窗內顯示不完的時候,就會出現,如果在視窗內不需要拖動就可以看到全部內容,則不需要出現。

      WhenDragging

        當拖動時出現。只要拖動內容,它就一定會出現。

 

創建一個拖動條

   1.通過WidgetWizard(Legacy)創建

  在Unity頂部NGUI菜單,選擇Open選項,打開WidgetWizard(Legacy)。

  在這個界面中,設定好圖集和字體(如無需要可以不設定)后,在Template中選擇ScrollBar,然后在Background中誰的那個它的底板的Sprite,在Foreground中設定拖動塊的Sprite,在Direction中設定它的滑動方向。

  2.通過PrefabToolBar創建

  3.自己組裝一個拖動條

  拖動條具有以下特點:

    (1)有一個底板槽來顯示可以拖動的范圍;

    (2)有一個滑動塊,可以在范圍內滑動;

    通過對比可以發現拖動條和進度條的區別:拖動條就是一個缺少表層進度條的可拖動進度條。

 

拖動條說明

  (1)ScrollBar和UISlider創建的滑動條從本質上說工作原理是一模一樣的。

  (2)推薦使用UISlider,也就是制作進度條的方式來制作滑動條。

  (3)滑動條就是一個沒有Foreground的UISlider。

 

讓視圖內的內容可以被拖動

   為視圖內的內容Attach一個BoxCollider,因為,既然需要拖動視圖內的內容來查看,就必須讓視圖內的能接收到拖動事件,所以一定得有一個BoxCollider。

   為視圖內的內容附加一個核心組件:Drag ScrollView,附加方式可以在Inspector面板中單擊AddComponent->NGUI->Interaction->Drag ScrollView。添加好組件之后無需進行任何設置,運行游戲時它會自動地去讀取父物體中ScrollView。

  運行游戲,已經可以拖動視窗內的內容。

 

制作滾動視圖時的注意事項

  (1)通常情況下,滾動視圖一定要有一個UIPanel來進行窗口編輯。這個UIPanel組件在創建ScrollView時會自動生成。

  (2)拖動條對於滾動視圖來說可有可無,沒有它的滾動視圖也能通過移動設備的觸屏和PC設備的鼠標光標來進行滾動。

  (3)滾動視圖內包含的內容,一定要有一個BoxCollider,否則無法接受事件。

  (4)滾動視圖內包含的內容,一定要有一個DragScrollView組件,這個組件會和ScrollView相互作用,在運行時,它會自動去找到父物體中的ScrollView,然后和它相互作用,讓視圖內的內容可以被滾動起來。

  (5)滾動視圖的內容,最好放到創建的ScrollView節點下面作為子物體存在,這個可以免去大量的煩惱和隱患。

  (6)滾動視圖的滾動方向不要弄錯了。

  (7)滾動視圖的剪輯窗口的尺寸一定要調整到位,盡量別去調整Clip的Center。


免責聲明!

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



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