Unity scroll view詳解

一、基本介紹

Unity中的Scroll View是一種常用的UI組件，用於顯示大量內容的視圖，可以手動滑動瀏覽。比如，當我們需要以列表的形式展示大量數據時，就可以使用Scroll View。在Scroll View中可以使用多種布局方式，如水平、垂直和網格等。

在Scroll View中，子控件會自動排列在一起，並可以自動滾動或分頁滾動視圖內容，可以控制視圖的滾動速度和滾動阻力。

二、基本用法

1、在Unity中創建GameObject，右鍵選擇UI → ScrollView，在Hierarchy面板中可以看到一個Scroll View GameObject。

2、在Inspector面板中，打開「Content」屬性，將需要顯示的控件元素拖放到Content下面。

3、設置ScrollView的各種屬性，例如Layout類型、滾動速度、內部邊距等，可以根據需求自行設置。

//scrollView
[SerializeField]
private GameObject scrollView;
[SerializeField]
private Transform ScrollViewContent;

//生成Item的prefab
public GameObject TypeItemPrefab;

//Start函數中循環生成
void Start() {
   for(int i=0; i<20; i++){
       GameObject item = Instantiate(TypeItemPrefab);
       item.transform.parent = ScrollViewContent;
       //設置Item的重要屬性，如寬度、高度、position等
   }
}

三、橫向滾動和縱向滾動

可以設置Scroll View的「Movement Type」屬性，設置水平、垂直或同時滑動。這裡需要注意的是，如果要同時滾動水平和垂直方向，需要勾選「Horizontal」和「Vertical」屬性。

如果需要控制橫向和縱向的滑動速度，可以設置「Scroll Sensitivity」屬性，值越大，滑動速度越快。

例如：

//設置ScrollView為垂直滑動
scrollRect.vertical = true;
scrollRect.horizontal = false;

//設置滑動敏感度
scrollRect.scrollSensitivity = 20.f;

四、布局方式

除了默認的Vertical Layout和Horizontal Layout外，Unity還提供了網格布局GridLayoutGroup，用於在Scroll View中呈現矩陣或網格狀的控件列表。

1、Vertical Layout

在Vertical Layout中，子控件按照順序垂直排列。可以通過設置Spacing屬性來控制不同子控件之間的距離。

[SerializeField]
private ScrollRect scrollRect;

[SerializeField]
private VerticalLayoutGroup layoutGroup;

void Start() {
    //設置垂直布局
    layoutGroup.childAlignment = TextAnchor.MiddleCenter;
    layoutGroup.childControlHeight = true;
    layoutGroup.childControlWidth = true;
    layoutGroup.childForceExpandHeight = false;
    layoutGroup.childForceExpandWidth = false;
    layoutGroup.spacing = 20f;
}

2、Horizontal Layout

在Horizontal Layout中，子控件按照順序水平排列。可以通過設置Spacing屬性來控制不同子控件之間的距離。

[SerializeField]
private ScrollRect scrollRect;

[SerializeField]
private HorizontalLayoutGroup layoutGroup;

void Start() {
    //設置水平布局
    layoutGroup.childAlignment = TextAnchor.MiddleCenter;
    layoutGroup.childControlHeight = true;
    layoutGroup.childControlWidth = true;
    layoutGroup.childForceExpandHeight = false;
    layoutGroup.childForceExpandWidth = false;
    layoutGroup.spacing = 20f;
}

3、GridLayoutGroup

在GridLayoutGroup中，子控件按照矩陣或網格狀排列。可以設置Row和Column屬性來設置行列數，以及Spacing屬性來控制不同子控件之間的距離。

[SerializeField]
private ScrollRect scrollRect;

[SerializeField]
private GridLayoutGroup layoutGroup;

void Start() {
    //設置網格布局
    layoutGroup.cellSize = new Vector2(100f, 100f);
    layoutGroup.spacing = new Vector2(20f, 20f);
    layoutGroup.constraint = GridLayoutGroup.Constraint.Flexible;
    layoutGroup.startAxis = GridLayoutGroup.Axis.Vertical;
}

五、滾動條

可以通過設置Scroll View的「Scrollbar Visibility」屬性來控制滾動條的可見性。可選值包括Auto Hide、Permanent和Auto Hide and Expand Viewport。其中，「Auto Hide」表示自動隱藏滾動條，「Permanent」表示一直顯示滾動條，「Auto Hide and Expand Viewport」表示在滾動的時候自動展開視圖。

除此之外，還可以控制滑塊的顏色、背景顏色等屬性。

[SerializeField]
private ScrollRect scrollRect;

[SerializeField]
private Scrollbar verticalScrollbar;

[SerializeField]
private Scrollbar horizontalScrollbar;
 
void Start() {
    //設置滑塊的顏色
    verticalScrollbar.colors = ColorBlock.defaultColorBlock;
    horizontalScrollbar.colors = ColorBlock.defaultColorBlock;
 
    //設置滾動條的可見性
    scrollRect.horizontalScrollbarVisibility = ScrollRect.ScrollbarVisibility.AutoHide;
    scrollRect.verticalScrollbarVisibility = ScrollRect.ScrollbarVisibility.AutoHideAndExpandViewport;
}

六、總結

在Unity中，Scroll View是一種非常常用的UI組件，用於顯示大量內容的視圖。可以通過設置布局方式、滾動速度和滑動敏感度等屬性來滿足不同的需求。同時，可以使用不同的滾動條可見性設置來調整視圖的展示效果。