UGUI使用小技巧（五） Scroll Rect组件的使用

在功能开发中，由于可能需要显示很多数据，但是一个界面显示不下，经常都会遇到需要滑动的列表，如背包，排行榜等，这些地方基本都会用到Unity3D的Scroll Rect组件来实现滑动功能。除此之外，Scroll Rect还有一些小技巧，可以用来滑动文字，图片，达到一些别的功能。

一、基本用法

经常使用到的组件：Scroll Rect、Mask、GridLayoutGroup

首先Unity的Hierarchy面板的Canvas下创建一个Scroll View，右键UI->Scroll View（因为我不需要滑动条，所以我删了Scrollbar Horizontal和Scrollbar Vertical），然后在Scroll View下的Content子物体下添加GridLayoutGroup组件，接着添加你的子物体到Content下，这样，最简单的滑动框就做好了。当然，你也可以创建空物体，自己添加Scroll Rect、Mask、GridLayoutGroup组件来实现这个滑动框的功能。

image

主要思路就是：Scroll Rect组件负责滑动，Scroll Rect组件下的Content是可滑动区域，Horizontal和Vertical两个参数是决定滑动是否左右，上下滑动,MovementType是滑动类型。Mask组件负责控制可以看到的区域。GridLayoutGroup组件负责子物体的分布。

二、小技巧：控制文本的滑动

在开发中，有可能你的UI界面需要显示很多东西，但是没有多余的地方给你显示了，你会覆盖别的内容，或者别的内容会覆盖你。如描述，中文翻译为英文，名字加上了区服等，你可以将文本改为可滑动的。

经常使用到的组件：Scroll Rect、Mask、ContentSizeFitter

控制文本的滑动原理差不多，只是这里不需要在Content上添加分布组件GridLayoutGroup，而是在Content下创建Text，在Text上添加ContentSizeFitter组件，设置HorizonttalFit属性或者VertiaclFit属性。这样你就可以拖拽文本查看被遮挡的内容了。

三、小技巧：控制图片的滑动

在开发中，当你遇到背景图片比较大，已经超出了Canvas范围，如果固定大小一些东西会显示不完全，如果将全部东西显示到一个Canvas中，又会将图压缩的很小这样的尴尬问题中，可能就可以通过滑动背景图片这样方法来实现了。如小地图，某些背景图片等。

使用到的组件：Scroll Rect、Mask

在Content下创建图片，此图片就是你要拖动的背景。不需要添加其他的组件，ScrollRect的其他属性看自己的具体情况设置。

image

注意：Mask在ViewPort下，ViewPort应该设置的大小是你的Canvas的大小（具体个人设置），Content为可拖动的范围，Image大小为你的图片大小，我将这两个物体设置为相同的大小。

嘿嘿，这样就可以看到所有的背景图了。

Scroll Rect拖动图片

以上就是我在项目中常用到的Scroll Rect组件小技巧了。如果你有更多的Scroll Rect组件使用小技巧，期待你的分享！