首页 > 其他分享> > UGUI学习笔记之ScrollView以及ScrollRect和Mask组件

UGUI学习笔记之ScrollView以及ScrollRect和Mask组件

2021-01-30 16:04:56 作者：互联网

一、ScrollView介绍

　　ScrollView是滚动视图，当我们要呈现的内容长宽大于显示区域时，就可以用到ScrollView，用户可以在指定区域内拖拽而查看内容的全貌（如下图）。

(ScrollView例子)

　　举个实例，游戏“守望先锋”当中有很多设置，都通过同一个界面显示，在Unity中实现这个功能就可以用ScrollView来做。

二、结构拆分

　　1.结构看似繁琐，但只要稍微理一下，还是比较容易理清的。大体可以看作三个部分：

　　　　(1).最外层的ScrollView,

　　　　(2)内层的Viewport

　　　　(3)内层的Scrollbar Horizontal和Scrollbar Vertical

　　下面由简入繁，挨个击破。

三、Scrollbar Horizontal和Scrollbar Vertical

　　不管是Scrollbar Horizontal还是Scrollbar Vertical，都只是一个普通的Scrollbar。只不过他们在这里与要展示的内容绑定了（怎么绑定下面有提）

　　　　当要展示的内容宽度超过了显示区域的宽度，就可以用Scrollbar Horizontal水平移动

　　　　当要展示的内容长度超过了显示区域的长度，就可以用Scrollbar Vertical竖直移动

四、Viewport

　　Viewport包含两层：外层的Viewport和内层的Content。Content就是我们要显示的内容。Viewport即视口，意为显示窗口，或者理解为显示区域。

　　Viewport最需要搞清楚的就是mask组件

　　1.Mask组件介绍（mask组件官方文档：https://docs.unity3d.com/cn/current/Manual/script-Mask.html）

　　　　（1）Mask组件需要和Image组件一起用，二者同时挂在同一个物体上。该物体就变成了一个遮罩层，它的子物体只有在它的范围内（也就是Image的范围内）的部分才会显示出来。在ScrollView中，Mask组件被挂在了Viewport物体上，因此Content只会在Viewport的范围内显示，超出部分隐藏。

　（可以看见图片的矩形区域就是Viewport的大小，所显示的图片比该区域要大，但只显示该矩形区域部分）

　　　　（2）.Mask的属性

　　　　　　只有一个Show Mask Graphic属性：是否显示image组件的图片。

　　　　（3）.在Viewport上添加mask组件后就会出现神奇的效果。

（viewport没mask组件）

（viewport有mask组件）

五、ScrollView

　　最外层的ScrollView物体包含两个特别的组件：Image组件和ScrollRect组件。其中Image仅仅作为背景图片使用，不需要背景图片或背景颜色即可删除。这里着重记录ScrollRect组件

　　（1）Scroll Rect组件的属性

属性	说明
Content	要展示的内容，其他UI控件。即Viewport物体的子项Content物体。
Horizontal	水平方向是否可以拖拽
Vertical	垂直方向是否可以拖拽
Movement Type	移动类型（自己动手尝试一下会比较好理解） Unrestricted:不受限制的 Elastic：弹性，就像有四条弹簧分别把Content的四边与Viewport的四边绑定了（没有指定Viewport时，就像Content四边与Scroll Rect的四边绑定) 　　　　当把content的边界拖拽进显示区域依然继续拖拽，松开鼠标就会有一个弹性效果。　　　　Elasticity:弹性强度 Clamped:显示出边界就不能继续拖拽那边了
Inertia	是否有惯性。当我们往某个方向拖拽，松开鼠标后，它是否会因为惯性继续往该方向移动一段距离　　Deceleration Rate: 减速率。它决定开启惯性后，Content要多久才停下来，0是立马停下来，1是永远不停下来，大于1就移动的越来越块。
Scroll Sensitivity	使用滚轮和触控板滚动的灵敏度
Viewport	一般是指content的父控件的引用。即前面说过的Viewport物体，作为显示区域而存在。因为mask组件的特性，我们要把需要展示的内容（Content）作为观察窗口的子物体。因此这里把content的父项viewport拖拽进来就行。注意：当我们制定了Horizontal Scrollbar和Vertical Scrollbar时，将不能通过拖拽的方式调整viewport的大小，而是通过Spacing属性调节
Horizontal Scrollbar	当内容（Content）横向超出了显示区域之后，用来横向移动的scrollbar Visibility：可见性　　Permanent:水平scrollbar滚动条总是可见　　Auto Hide:当Content水平长度小于显示区域时，将会隐藏水平滚动条，反之会显示。　　Auto Hide And Expand Viewport:此项要求必须指定Viewport，并且Viewport和horizontal scrollbar均为scroll rect组件所在物体的子物体。选择此项会多出一个Spacing属性，用来调节Viewport的宽度（暂时没看懂有啥用，多了此项后不能通过拖拽随意改变viewport大小）
Vertical Scrollbar	同上

三、Scroll Rect的On Value Changed事件（参考slider的事件处理方式）　　

 public void ScrollRectValueChange(Vector2 v)
    {
        Debug.Log("vector2 :"+v);
    }

六、关于互动范围

　　拖拽互动检测范围：ScrollView物体及其任意子物体中，所有包含Raycast Target属性的组件构成的范围。这么说可能不够生动，举个简单的例子：在ScrollView物体新建两个子项Image和Text，其分别包含有Image组件和Text组件，这两个组件都有Raycast Target属性。这两个物体所在范围也会充当ScrollView拖拽的检测范围。