GUI之ScrollView的使用

ScrollView

ScrollView是unity提供的一個方便的滾動視圖。

組成

ScrollView由四個部分組成:

ViewPort 和 Content

ScrollView: 視圖範圍，Content的Mask，控制Content的顯示範圍。
Content: 滾動視圖的內容容器，通常會配合Layout組件作成一個列表。

Scrollbar Horizontal 和 Scrollbar Vertical

Content的水平、豎直滾動條。

ScrollRect詳解

ScrollRect是ScrollView最核心的Component。用於控制Content的移動等操做。
Content: 滾動視圖的內容容器。
Horizontal: 是否容許Content水平滑動。
Vertical: 是否容許Content豎直滑動。
MovementType: 滑動類型
 1.Unrestricted: 無滑動限制，能夠隨意進行滑動，容許Content滑出Viewport區域。
 2.Elastic: 彈性滑動，有兩個表現
  ①容許Content被拖出ViewPort區域，可是在被拖出時會對滑動的距離進行修正，好比Content原本應該向下滑動10單位的距離，如今就只會下滑8單位的距離。模擬出拉動彈簧的距離越長，就會愈來愈費力的感受。
  ②當Content被拖出ViewPort區域時中止拖動操做，Content會根據Elasticity參數進行回彈，恢復到恰好未被拖出的狀態。
  Elasticity: 回彈的參數，數值越大，回彈的越慢。
 3.Clamped: 嚴格控制Content不會超出ViewPort的範圍。
Inertia: 是否有慣性，DecelerationRate參數越大，拖動結束時Content自動滑動的距離越長。
ScrollSensitivity: 滾輪的敏感度，值越大，滾動滾輪時滑動的距離越長。
ViewPort: 滾動視圖的視圖範圍。
Horizontal Scrollbar: 水平滾動條。
 Visibility: 滾動條的可見性。
 1.Permanent: 無論Content多大，永久可見。
 2.Auto Hide: 當Content的寬度小於等於ViewPort時，不可見。
 3.Auto Hide And Expand ViewPort: 當Content的寬度小於等於ViewPort時，不可見。且ViewPort的寬度會隨HorizontalScrollbar的寬度和spacing值變化，保持爲ScrollView的寬度 - spacing - HorizontalScrollbar的寬度。好比ScrollView寬度爲200，HorizontalScrollvar寬度爲20，spacing值爲-3，那麼ViewPort的寬度爲200-(-3)-20 = 183。在stretch下表現爲W Delta的值爲183 - 200 = -17。
 Spacing: ScrollBar和ViewPort之間的間隔。
Vertical Scrollbar: 豎直滾動條，參數含義和Horizontal Scrallbar同樣，這裏就不介紹了。

使用

用一個簡單的豎向列表作例子。
1.先經過將ScrollRect的Horizontal值設爲false限制列表的水平移動，而後給Content添加VerticalLayoutGroup(用於對item的自動豎直佈局)，ContentSIzeFitter(用於讓Content的高度隨Content中item的增多而自動增長)。

2.給裏面加幾張圖片

3.由於Content的ContentSizeFitter只有Vertical改成了PreferredSize，全部直接添加的圖片寬度會被強制修改成Content的寬度，高取圖片Sprite的原始高度。
這樣子圖片就被拉伸的太厲害了，這並非咱們想要的結果，因此咱們還但願主動控制每一個圖片的大小，因此咱們給每一個圖片加上一個LayoutElement，控制圖片的大小。

這樣這個列表看着就比較正常了。