這次我們介紹的是UGUI的Scroll View,照字面翻譯就是滾動視窗,也能夠應用在APP上做成滑動視窗

可以從這個地方添加到場景上

添加到場景上後畫面會是這樣

 

可以在Scroll View->Viewport->Content中添加一些內容後執行看看,我在這邊添加一堆文字把內容給塞滿,可以看到畫面出現能夠捲動的捲動條了

Scroll View是一個具有上下左右捲動功能的視窗,除了用滑鼠捲動卷軸外

也可以按住並拖曳視窗來捲動,這一點在移動平台也是可行的,因此也能用在開發App遊戲上

 

新添加的Scroll View結構如下:

Scroll View (根物件)

  • Viewport ( 主要視窗容器 )
    • Content ( 內容 )
  • Scrollbar Horizontal ( 橫向卷軸容器 )
    • Sliding Area ( 捲動區域 )
      • Handle ( 卷軸本體 )
  • Scrollbar Vertical ( 橫向卷軸容器 )
    • Sliding Area ( 捲動區域 )
      • Handle ( 卷軸本體 )

 

而在Scroll View身上會帶有組件Scroll Rect,是用來控制滑動區域的,以下是組件功能的說明

  • Content – 內容區域的對象:卷軸會因為內容區域的大小而改變
  • Horizontal – 橫軸:是否啟用橫軸
  • Vertical – 縱軸:是否啟用縱軸
  • Movement Type – 運動類型:在直接拖曳視窗時的表現方式
    • Unrestricted – 無限制:若將內容拉到超出邊界,放開時內容不會回復原位
    • Elastic – 彈性:若將內容拉到超出邊界,放開時會彈回
    • Clamped – 夾住:拖曳時無法將內容拉出邊界
  • Inertia – 慣性:是否開啟慣性,若開啟拖曳畫面放開時畫面會因慣性而滑動
    • Deceleration Rate – 減速率:數值愈小慣性滑動愈快停止
  • Scroll Sensitivity – 滾動靈敏度:使用滑鼠滾輪時,每滾動一次卷軸移動的幅度,愈大滾動愈快
  • Viewport – 視窗容器:內容只會顯示在視窗容器之內
  • Horizontal Scrollbar – 橫軸滾動條
    • Visibility – 能見度:在內容大小不需要捲動橫軸時的處理
      • Auto Hide And Expand Viewport:自動隱藏並將占用的區塊還給視窗容器
      • Auto Hide:自動隱藏
      • Permanent:常駐,不隱藏
    • Spacing – 間距:與視窗容器的間距,會將視窗容器的一部份區塊給吃掉
  • Vertical Scrollbar – 縱軸滾動條:同上

 

Scroll View的介紹到這邊結束!相關的應用方式會陸陸續續補充在這邊文下方

Leave a Comment