专栏首页韩东吉的Unity杂货铺零基础入门 23: UGUI ScrollView

零基础入门 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~

本文分享自微信公众号 - 韩东吉的Unity杂货铺(DeveloperJimin),作者:Jimin

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-04-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 零基础入门 24:Unity设计模式之单键模式

    Hello,各位小伙伴,上一篇结束以后,Unity里的UGUI系列分享就已经结束了,不知道大家是否已经灵活掌握运用了呢?

    韩东吉
  • 零基础入门 5: 自定义脚本内容和脚本ICON

    Hello,这几天忙碌的不可开交,又有几天没更新了。这么久不见大家,今天来更新一发。

    韩东吉
  • 零基础入门 40:Inspector禁用RectTransform属性修改

    Hello,今天给大家分享一下如何通过代码实现Inspector面板禁止修改RectTransform组件上的属性。

    韩东吉
  • 微博遭鹿晗恋情暴击瘫痪,如何把微博服务器搞炸的?

    人生处处是惊喜。国庆假期最后一天,当红流量小生鹿晗于正午 12 点,在微博公布恋情。 ? 微博一经发布后,瞬间刷爆朋友圈、各大网站头条,还导致了微博一时间瘫痪。...

    Java高级架构
  • Photoshop 常用 快捷键 / 基本技巧 总结(一)

    今天跟着 doyoudo 做了个很简单的“发光字”[1],视频教程见原文链接。很小的时候就跟着老爸玩 Photoshop ,给认识的人“换个头”,觉得蛮有意思。...

    Piper蛋窝
  • 如何判断数据背离正态分布?

    B. Kolmogrov-Smirnov正态检验中的统计量所对应的p值小于0.05

    Datawhale
  • SRE之道:创造软件系统来维护系统运行

    大家都知道, 计算机软件系统离开人通常是无法自主运行的。那么,究竟应该如何去运维一个日趋复杂的大型分布式计算系统呢?雇佣系统管理员(sysadmin)运维复杂的...

    博文视点Broadview
  • ​两大春节抢票神器霸榜Github!再也不用担心买不到票了

    据了解,2020年春运将于1月10日开始,为期40天。从铁路部门12月11日发布的统计数据显示,今年铁路春运预计4.4亿人次,将同比去年增加3257万人次,增长...

    ConardLi
  • php-fpm应用与php-swoole应用进行通信

    我们使用swoole环境的常驻内存、协程特性来做一些其他事务,如:任务队列及其消费、缓存、异步执行等情况时

    宣言言言
  • WCF发布到IIS7问题的解决方案

    本文转载:http://www.cnblogs.com/allexw/archive/2011/04/12/2014017.html

    跟着阿笨一起玩NET

扫码关注云+社区

领取腾讯云代金券