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组件，用于显示大量内容的视图。可以通过设置布局方式、滚动速度和滑动敏感度等属性来满足不同的需求。同时，可以使用不同的滚动条可见性设置来调整视图的展示效果。