第四十五章 Unity 滚动视图 (Scroll View) UI

这篇具有很好参考价值的文章主要介绍了第四十五章 Unity 滚动视图 (Scroll View) UI。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

我们介绍一下滚动条 (Scrollbar),它允许用户滚动由于太大而无法完全看到的图像或其他视图。这种效果在我们网页中经常看到,尤其是网页内容太长的时候,就会在垂直方向出现滚动条。当然,有时候也会在水平方向出现滚动条。我们拖动滚动条就能看到剩余的内容。通常情况下,滚动条(Scrollbar)经常搭配滚动区域ScrollRect组件以及遮罩 Mask组件一起来创建滚动视图,并且滚动视图中会存在水平或垂直的滚动条。滚动矩形 (Scroll Rect)中的Horizontal Scrollbar和Vertical Scrollbar就用来指定水平或垂直的Scrollbar游戏对象的。在实际的开发中,我们经常会使用Scroll View滚动视图UI元素,它实际上就是Scrollbar + ScrollRect的组合使用。

接下来,我们就介绍一下Scroll View滚动视图。

第四十五章 Unity 滚动视图 (Scroll View) UI

 第四十五章 Unity 滚动视图 (Scroll View) UI

Scroll View这个游戏对象包含三个子类,一个是Viewport就是主显示区域,另外两个是Scrollbar Horizontal和 Scrollbar Vertical游戏对象。很明显,前者用来存放实际内容,它的检视面板中拥有Mask组件。Mask遮罩组件可以将子视图超出父视图的部分隐藏。后面两个就是水平和垂直方向的滚动条Scrollbar UI元素。我们在查看Scroll View的检视面板,发现它拥有一个ScrollRect的组件。

第四十五章 Unity 滚动视图 (Scroll View) UI

Content:滚动的内容区域,就对应了Viewport子游戏对象下子游戏对象Content。

Horizontal:是否启动水平滚动,默认启用。

Vertical:是否启动垂直滚动,默认启动。

Movement Type:滑动框的弹性模式,有 Unrestricted不受限,Elastic 弹性,Clamped 夹紧三种模式。默认值是Elastic 弹性。

Elasticity :Elastic弹性模式中的反弹量,默认值为0.1

Inertia:启用惯性,拖动结束后会根据惯性继续移动,默认勾选该项。

Deceleration Rate:减速率,决定停止移动的速度,速率为0时立即停止运动,1时永不停止。

Scroll Sensitivity:灵敏度,滚轮时的灵敏程度,默认值为1

以上的设置都是滚动的时候,Content内容移动视觉效果而已。

第四十五章 Unity 滚动视图 (Scroll View) UI

Viewport :视口,就对应了Viewport子游戏对象

Horizontal Scrollbar:底部的水平滚动条,就对应了Scrollbar Horizontal子游戏对象。

Visibility:默认值为AutoHideAndExpandViewport,表示如果显示的内容没有超出 Viewport 的话自动隐藏,如果超过Viewport的话就自动显示。

Spacing:选择自动隐藏并展开视口时,滚动条和视口之间的空间。默认值为-3

Vertical Scrollbar:右边的竖直滚动条,就对应了Scrollbar Vertical子游戏对象。

Visibility:同上。

Spacing:同上。

第四十五章 Unity 滚动视图 (Scroll View) UI

Scroll View滚动视图由两个滚动条和一个显示区域组成。滚动条由一个垂直方向的滚动条和一个水平方向的滚动条组成。滚动视图的显示区域由Viewport视图组成,它挂载了一个遮罩组件,该组件会隐藏超过该该视图范围的子视图内容。 所以Viewport视图代表了真正显示出的视图区域。Viewport下有Content视图组成。Content视图是需要显示的视图。该视图可能非常大。一般情况下,我们会将其他UI控件添加到Conetnt视图下作为子对象存在。Content视图中填充的内容可以通过代码来完成,添加完成之后确保没有超出Content视图即可。由于Content视图包含的内容可能会非常多,所以常常搭配自动布局组件来使用。Scroll View主要是充当布局容器,类似于Panel面板容器。比如,我们可以使用它来制作游戏中的包裹界面。由于包裹里面的物品比较多,需要使用滚动效果才能看到完整内容。

本课程涉及的内容已经共享到百度网盘:https://pan.baidu.com/s/1e1jClK3MnN66GlxBmqoJWA?pwd=b2id文章来源地址https://www.toymoban.com/news/detail-445876.html

到了这里,关于第四十五章 Unity 滚动视图 (Scroll View) UI的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp scroll-view 隐藏滚动条

     

    2024年02月14日
    浏览(47)
  • 【LeetCode75】第四十五题 重新规划路线

    目录 题目: 示例: 分析: 代码: 给我们一个表示城市连通情况的有向图,要求每个城市都要可以通向0号城市,不同城市之间只有一条路线,我们每次可以改变一条路线的指向,问我们需要操作多少次才可以达到每个城市都可以通向0号城市的要求。 由于不同城市之间只有

    2024年02月10日
    浏览(45)
  • uniapp中scroll-view去除滚动条

    uniapp中我们使用scroll-view实现横向或者竖向滑动时,我们会发现横向或者竖向是有一个滚动条的,不是很美观,那么我们就可以尝试去去除一下滚动条(如果采用以下官方方法无法去除时,那么请向官方反馈信息) 不过它默认是false,那就是本身不显示,可以忽略这个方法 代

    2024年02月14日
    浏览(56)
  • 第四十一天 Java基础学习(三十五)

    一、JSP内置对象 ●内置对象 因为SP的本质是Servlet,在JSP文件经过转译之后,生成JAVA代码,在运行时JSP给我们准备好了九个可以直接使用而不用我们自己去new的对象,这九个对象我之为内置对象. 内置对象完全由SP自行去维护,我们直接使用即可。 ●九大内置对象 confia ;page ;

    2024年02月16日
    浏览(42)
  • 【从零开始学习JAVA | 第四十五篇】反射

    目录 前言: ​反射:  使用反射的步骤: 1.获取阶段: 2.使用阶段: 反射的应用场景: 使用反射的优缺点: 总结: Java中的反射是一项强大而灵活的功能,它允许程序在运行时 动态地获取、操作和利用类的信息 。通过反射,我们可以在运行时检查和修改类的属性、调用类

    2024年02月13日
    浏览(59)
  • uniapp开发小程序—scroll-view实现内容滚动时, 标题也滚动

    scroll-view实现内容滚动时, 标题也滚动 完成

    2024年01月19日
    浏览(60)
  • 微信小程序scroll-view去掉滚动条

    微信小程序scroll-view去掉滚动条 微信官方文档上面给出了显示和隐藏滚动条的属性 show-scrollbar ,把该属性设置为false,文档要求使用该属性要开启 enhanced 属性,把这个属性设置为true即可; 通过CSS设置滚动条隐藏: 值得注意的是: ::-webkit-scrollbar前要有 scroll-view 的标签名 或

    2024年02月11日
    浏览(61)
  • 小程序scroll-view组件纵向滚动返回顶部

    当开发分类页面时,常见的效果如下: 当左侧一级分类被选择之后,右侧的二级分类向下滚动后,再次点击左侧一级分类进行分类切换,二级分类应该立刻恢复到顶部。 首先,界面滚动的效果可以利用小程序中的 scroll-view 组件来实现,例如: 在确定了基本的布局后,就可以

    2024年02月11日
    浏览(65)
  • 微信小程序 - 完美去除 <scroll-view> 滚动条,保证 100% 去掉隐藏苹果 ios 系统、安卓滚动条(解决 ios 苹果真机scroll-view无法隐藏滚动条)详细示例代码,保证可用

    关于微信小程序去掉 scroll-view 滚动条的教程中,全都是只能去掉安卓系统手机滚动条,而苹果手机则无法去掉。 本文 实现了在微信小程序中,强力去除 scroll-view 组件滚动条,保证去除苹果ios系统和安卓手机的滚动条, 您可以自由的将本文的去除代码应用到 “局部 / 全局”

    2024年02月11日
    浏览(62)
  • 微信小程序---scroll-view 设置scroll-x或者scroll-y如何去掉滚动条

    第一种方法: 第二种方法:添加( enhanced :show-scrollbar=“false”)

    2024年02月07日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包