零基础入门 23： UGUI ScrollView

Hello，大家好，我是Jimin，马上就是五一假期了，提前祝大家假期愉快

今天要分享的内容，是近期内关于UGUI的最后一篇，UGUI里的滚动视图ScrollView，后期的内容会根据项目实用的功能组件进行分享。

今天的内容不会有代码成分，所以大家只要动起手来跟着做，就一定可以学得会。那么让我们进入今天的正题

滚动视图ScrollView是什么呢？大家不妨先来看一下游戏内对ScrollView的使用

之前在讲解ScrollBar这个滚动条的时候，这个图就曾经使用过，也讲解过，ScrollBar滚动条通常会配合滚动视图ScrollView进行使用。

滚动视图，顾名思义，实际就是可以滚动的UI视图。

那么如何在Unity里制作一个ScrollView呢？有如下两种方式。

今天会使用这俩种方式来为大家制作一个滚动视图。

【方式一】

在早期的UGUI版本中，Unity并没有一个现成的滚动视图控件可以提供给大家使用，而是提供了一个名为ScrollRect的组件，配合Mask组件来完成ScrollView的创建和使用。

【方式二】

现在的Unity版本中有一个现成的UGUI控制，官方提供的创建完整的滚动视图。使用起来相对成本较低，降低了自己制作的难度。

首先第一种方式，通过ScrollRect配合Mask制作

我们删除刚创建的ScrollView然后创建一个空的Gameobject。然后增加ScrollRect、Mask、Image组件。并且将Mask上的show对勾去掉。

为什么要勾掉Mask上的show mask呢，通常我们在制作滚动视图的时候，因为每一个cell都可以进行背景填充，所以并不是很需要这个大的背景板，如果大家需要，也可以不勾。

下图解释了勾选和不勾选的区别，实际就是Image是否显示的控制

父节点创建完毕以后，我们重新命个名，然后为他增加一个空的Gameobject作为滚动视图内容的父节点，并且选择一些布局方式，即Layout组件。因为我准备为大家制作一个垂直的滚动视图作为示例，所以这里我增加了一个垂直的布局组件。

下一步，我修改滚动视图到合适的大小，调试大小的时候大家可以把mask标记打开，方便调整，然后调试好了以后再关闭。

然后我们来修改一下滚动视图内容的父节点的大小。因为这个父节点要装下我们滚动列表的内容，所以width宽度我选择和滚动视图一样的，而增加这个内容节点的高即Height值

接下来是为我们的滚动视图增加要滚动显示的子项了。这里我创建一些图片，为他们赋予不同的颜色让大家方便区分。

从上图可以看出，我添加第一个Image的时候，因为content上的child Force Expend的height没有勾选，导致我们第一个Image的Height为0无法显示，所以在Content上布局组件中勾选上了Height就完成了第一个Image的显示。

然后我们在复制粘贴两个Image，调成不同的颜色做区分

然后我们将Content拖动到JiminScrollView1上的ScrollRect组件上，有一个名为Content的属性即可。因为我们要创建的是垂直的，所以在ScrollRect组件上把水平滚动去掉。

此时我们运行项目，来查看一下效果。顺便在运行中，我又复制了几个图片，来穿插显示，这样更能体现出我们滚动视图的显示。

上面就是我们第一种滚动视图的做法。大家跟着我的步骤来，就可以实现老版本UGUI对滚动视图的创建。

接下来，就是现在版本的UGUI，直接提供了一个ScrollView的控件为大家使用。

从上图可以看出，UGUI为大家提供的控件其中的架构已经搭建完毕，同样也是ScrollRect组件，大家可能会问，那Mask呢？

别急，Mask就在ScrollView下的viewPort对象上呢。

是不是觉得一切都是那么的熟悉？掌握了上面第一种方式，再用第二种的时候就会特别的简单，接下来就是老路子了，Unity的这个空间为我们创建好了Content节点，关联关系也不需要我们去操心，那我们就在Content上增加垂直的布局组件，然后继续创建3张图片吧。

接下来就是为3个图片修改颜色作为区分。

运行后看看效果吧

从Unity为大家提供的控件来看，和我们手作的区别，在于现成的组件已经把结构都为大家搭建完毕，并且为大家创建好了两个滚动条以为区分显示和使用。

以上就是俩种在Unity里实现UGUI 滚动视图的方式。相信大家都可以理解掌握。

最后在大家明白如何创建的时候，来说下ScrollRect这个组件的属性内容。

内容很少，也非常简单。

Content：就是我们上面装载所有滚动内容的父节点。

Horizontal：水平滚动开关

Vertical：垂直滚动开关

Movement Type：滚动类型，默认是Elastic，即有弹性的滚动

Elasticty：弹性系数

Inertia：惯性开关

Deceleration Rate：惯性减速系数

Scroll Sensitivity：滚动的灵敏度

Viewport：视口

Horizontal/Vertical ScrollBar：分别是水平和垂直的滚动条

好了，掌握了今天的内容，就掌握了UGUI里的滚动视图，那么近期的UGUI内容也告一段落，相信零基础入门或者对UGUI不熟悉的同学，经过这一系列的UGUI内容讲述，已经有了一个大概的了解了。如果忘记了也没关系，可以通过公众号下方菜单栏，Unity零基础入门，点击进入UGUI专题复习即可。

下期开始，将对实际项目中有用的组件或一些功能组件进行分享。

最后祝大家五一节快乐，再见咯ヾ(￣▽￣)Bye~Bye~