[游戏开发] 【Unity3D-UGUI系列】（十二）ScrollView 滚动视图组件详解

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 游戏开发 -> 【Unity3D-UGUI系列】（十二）ScrollView 滚动视图组件详解 -> 正文阅读

[游戏开发]【Unity3D-UGUI系列】（十二）ScrollView 滚动视图组件详解

一、前言

首先，介绍一个UGUI，NGUI是UGUI的前身，Unity开发团队将NGUI的开发团队收到自己开发团队下，并且由此开发了UGUI。
UGUI系统是从Unity 4.6版本后才开始集成到Unity编辑器中。

UGUI的特点：

灵活
快速
可视化

对于开发者来说有很多的优点，比如说：

效率高
实现效果好
易于使用和拓展
与Unity编辑器的兼容性高

二、ScrollView 滚动视图组件介绍

ScrollView 滚动视图组件是一个滚动显示内容的组件，比如说要显示背包、商城这种有大量物品时，可以用ScrollView 滚动视图组件做滚动显示。

其他的像是滚动表格、长篇内容显示等，可以用ScrollView做很好的处理。

接下来，我们新建一个ScrollView 滚动视图组件详细看一下属性。

在Unity的Hierarchy视图中选择“Create→UI→ScrollView”新建一个ScrollView 滚动视图组件：
在这里插入图片描述
在Hierarchy视图中可以看到ScrollView滚动视图的层级结构如下图所示：

对象	介绍
Viewport	显示的窗口
Content	显示的内容
Scrollbar Horizontal	水平滚动条
Scrollbar Vertical	垂直滚动条

滚动条的详细介绍可以看Scrollbar的介绍篇，下面就详细了解Scroll View对象的属性。

三、ScrollView 滚动视图组件属性

ScrollView 滚动视图挂载了一个Image组件，用来显示背景，然后挂载了一个Scroll Rect组件，用来控制内容的展示，下面就详细的看一下Scroll Rect组件的属性：
在这里插入图片描述

3-1、组件属性介绍

属性	介绍
Content	滚动的内容区域。其中所有子物体，都会显示在滚动内容区中
Horizontal	是否启动水平滚动
Vertical	是否启动垂直滚动
Movement Type	滑动框的弹性模式，有 Unrestricted不受限，Elastic 弹性，Clamped 夹紧三种模式
Elasticity	Elastic弹性模式中的反弹量，在其他弹性模式没有这个参数
Inertia	惯性，拖动结束后会根据惯性继续移动，未设置时尽在拖动时移动
Deceleration Rate	减速率，决定停止移动的速度，速率为0时立即停止运动，1时永不停止
Scroll Sensitivity	灵敏度，滚轮时的灵敏程度
Viewport	视口，是 Content 的父物体
Horizontal Scrollbar	底部的水平滚动条
Visibility	能见度，如果显示的内容没有超出 Viewport 的话自动隐藏，也可以选择展开视口
Spacing	选择自动隐藏并展开视口时，滚动条和视口之间的空间
Vertical Scrollbar	竖直滚动条

3-2、Movement Type弹性模式介绍

滑动框的弹性模式，有 Unrestricted不受限，Elastic 弹性，Clamped 夹紧三种模式。

先来演示一下Unrestricted不受限弹性模式：

Unrestricted不受限弹性模式
在这里插入图片描述
滑动状态演示：

设置Unrestricted不受限弹性模式时，拖动结束后松开滚动框，它会根据惯性做减速运行，知道速度为0，并且这个拖动范围不受限制，可能会拖出到视口外面的情况，通常不建议采用这种模式。

Elastic弹性模式
在这里插入图片描述
滑动状态演示：

选择Elastic弹性模式，拖动结束后松开滚动框，会根据弹性变量来进行回弹。
拖动范围受到限制，拖动超过范围后会有回弹的效果。

Clamped夹紧模式
在这里插入图片描述
滑动状态演示：

这种弹性模式，就跟我们平时拖动的操作感觉差不多了，无论是拖到最上面还是最下面都不会有任何动作了。还带有范围控制，不能拖到视口外了。

3-3、滚动条及能见度

接下来，我们来详细讲一下滚动条及能见度属性：
在这里插入图片描述
以垂直滚动条为例，Visibility能见度有三种模式：
这三种模式都是对滚动条的设置。

模式	介绍
permanent	永久显示，选择后滚动条将会一直显示
Auto Hide	自动隐藏，只有在 Content 不超出 Viewport 的范围的情况下才会隐藏
Auto Hide And Expand Viewport	自动隐藏，并扩展视口

ScrollView的滚动条Scrollbar是自动显示的，如果内容的长度用不着滚动条，滚动条就不会显示，比如这样一张图片，用不到滚动条就不会显示：
在这里插入图片描述
但是，如果设置成permanent永久显示：

设置成Auto Hide自动隐藏：

设置成Auto Hide And Expand Viewport自动隐藏，并扩展视口：

他有一个Spacing 属性,是用来扩展视口的，也就是滚动条与视口之间的距离
在这里插入图片描述

四、ScrollView 滚动视图监听事件

ScrollView 滚动视图的监听事件返回值是一个Vector2的值：
在这里插入图片描述
所以，我们也需要定义一个带有Vector2参数的函数。

比如说，我们需要知道ScrollView是否被拖动，以及是否拖动到顶部或者尾部，就可以使用下面的代码：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ScrollViewTest : MonoBehaviour
{
    private ScrollRect m_ScrollView;
    void Start()
    {
        m_ScrollView = GameObject.Find("Scroll View").GetComponent<ScrollRect>();
        m_ScrollView.onValueChanged.AddListener(ScrollValueChange);
    }

    private void ScrollValueChange(Vector2 ve2)
    {
        Debug.Log("正在拖动滚动框");
        if (ve2 == new Vector2(1,1))
        {
            Debug.Log("滚动框在顶部");
        }
        if (ve2 == new Vector2(0,0))
        {
            Debug.Log("滚动框在尾部");
        }
    }
}