美文网首页Unity3D与游戏开发Unity基础入门分享
UGUI使用小技巧(五) Scroll Rect组件的使用

UGUI使用小技巧(五) Scroll Rect组件的使用

作者: 不文不武的禾文 | 来源:发表于2020-01-05 00:03 被阅读0次

    在功能开发中,由于可能需要显示很多数据,但是一个界面显示不下,经常都会遇到需要滑动的列表,如背包,排行榜等,这些地方基本都会用到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组件使用小技巧,期待你的分享!

    相关文章

      网友评论

        本文标题:UGUI使用小技巧(五) Scroll Rect组件的使用

        本文链接:https://www.haomeiwen.com/subject/svtaoctx.html