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

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native按钮详解|Touchable系列组件使用详解

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) 在做App开发过程中离不了的需要用户交互,说到交互,...

58670
来自专栏前端杂货铺

不要给<a>设置outline:none

outline属性有什么作用     原文链接 a{outline:none} do not do it     当用户使用tab键进行链接切换时,该属性会在当...

54650
来自专栏大数据钻研

能用HTML/CSS解决的问题就不要使用JS

为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单。简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例...

44440
来自专栏iOS开发随笔

iOS类似淘宝头条的文字滚动广告

最近两个项目都用到类似淘宝头条的功能,就是文字上下无限循环滚动,所以决定简单封装一下,以便以后使用。由于习惯用SDCycleScrollView来做广告图的无限...

68630
来自专栏葡萄城控件技术团队

前端代码标准最佳实践:HTML篇

Web前端代码中,HTML是根本,CSS和JavaScript也是围绕着既有的HTML结构来构建,所以良好的HTML代码结构,除了提高了HTML代码的可读性,可...

29190
来自专栏CDA数据分析师

最全Excel 快捷键总结,告别鼠标!

本文为知乎答主宇轩原创,CDA数据分析师已获得授权 这里正在更新完毕最常用的快捷键和最完整的EXCEL快捷键,并且把最有用的都突出显示了。 快捷键的内容分三类...

26660
来自专栏听雨堂

对asp.net响应事件的试验

1、可否把bind独立出来,在page_load中只是初次时bind,以后都在具体事件的处理中bind    实验:        page_load中,只作d...

22480
来自专栏行者常至

(20)Struts2_主题

8610
来自专栏Java帮帮-微信公众号-技术文章全总结

HTML5 — header

最近,越来越多的人 HTML5 感兴趣,并开始广泛的使用其中的新元素,其中有一个就是 <header> 元素。 下面我们来谈谈什么时候能用它,什么时候不能用它,...

40470
来自专栏Web行业观察

可视化讲解 DOM 的构建过程

最近在看 Secrets of the JavaScript Ninja, 书中第二章讲到 DOM 的构建流程.

9820

扫码关注云+社区

领取腾讯云代金券