【Unity3D-UGUI系列】(十二)ScrollView 滚动视图组件详解
推荐阅读
- CSDN主页
- GitHub开源地址
- Unity3D插件分享
- 简书地址
- 我的个人博客
- QQ群:1040082875
大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦。
一、前言
首先,介绍一个UGUI,NGUI是UGUI的前身,Unity开发团队将NGUI的开发团队收到自己开发团队下,并且由此开发了UGUI。
UGUI系统是从Unity 4.6版本后才开始集成到Unity编辑器中。
UGUI的特点:
- 灵活
- 快速
- 可视化
对于开发者来说有很多的优点,比如说:
- 效率高
- 实现效果好
- 易于使用和拓展
- 与Unity编辑器的兼容性高
这是本系列文章的第十二篇:
【Unity3D-UGUI系列】(一)Canvas 画布组件详解
【Unity3D-UGUI系列】(二)Text文本组件详解
【Unity3D-UGUI系列】(三)Button 按钮组件详解
【Unity3D-UGUI系列】(四)Image 图片组件详解
【Unity3D-UGUI系列】(五)RawImage 显示纹理组件详解
【Unity3D-UGUI系列】(六)Panel 容器组件详解
【Unity3D-UGUI系列】(七)Dropdown 下拉菜单组件详解
【Unity3D-UGUI系列】(八)InputField 输入框组件详解
【Unity3D-UGUI系列】(九)Scrollbar 滚动条组件详解
【Unity3D-UGUI系列】(十)Slider 滑动条组件详解
【Unity3D-UGUI系列】(十一)Toggle 开关组件详解
【Unity3D-UGUI系列】(十二)ScrollView 滚动视图组件详解
二、ScrollView 滚动视图组件介绍
ScrollView 滚动视图组件是一个滚动显示内容的组件,比如说要显示背包、商城这种有大量物品时,可以用ScrollView 滚动视图组件做滚动显示。
其他的像是滚动表格、长篇内容显示等,可以用ScrollView做很好的处理。
接下来,我们新建一个ScrollView 滚动视图组件详细看一下属性。
在Unity的Hierarchy视图中选择“Create→UI→ScrollView”新建一个ScrollView 滚动视图组件:
在Hierarchy视图中可以看到ScrollView滚动视图的层级结构如下图所示:
对象 | 介绍 |
---|---|
Viewport | 显示的窗口 |
Content | 显示的内容 |
Scrollbar Horizontal | 水平滚动条 |
Scrollbar Vertical | 垂直滚动条 |
滚动条的详细介绍可以看Scrollbar的介绍篇,下面就详细了解Scroll View对象的属性。
三、ScrollView 滚动视图组件属性
ScrollView 滚动视图挂载了一个Image组件,用来显示背景,然后挂载了一个Scroll Rect组件,用来控制内容的展示,下面就详细的看一下Scroll Rect组件的属性:
3-1、组件属性介绍
属性 | 介绍 |
---|---|
Content | 滚动的内容区域。其中所有子物体,都会显示在滚动内容区中 |
Horizontal | 是否启动水平滚动 |
Vertical | 是否启动垂直滚动 |
Movement Type | 滑动框的弹性模式,有 Unrestricted不受限,Elastic 弹性,Clamped 夹紧三种模式 |
Elasticity | Elastic弹性模式中的反弹量,在其他弹性模式没有这个参数 |
Inertia | 惯性,拖动结束后会根据惯性继续移动,未设置时尽在拖动时移动 |
Deceleration Rate | 减速率,决定停止移动的速度,速率为0时立即停止运动,1时永不停止 |
Scroll Sensitivity | 灵敏度,滚轮时的灵敏程度 |
Viewport | 视口,是 Content 的父物体 |
Horizontal Scrollbar | 底部的水平滚动条 |
Visibility | 能见度,如果显示的内容没有超出 Viewport 的话自动隐藏,也可以选择展开视口 |
Spacing | 选择自动隐藏并展开视口时,滚动条和视口之间的空间 |
Vertical Scrollbar | 竖直滚动条 |
3-2、Movement Type弹性模式介绍
滑动框的弹性模式,有 Unrestricted不受限,Elastic 弹性,Clamped 夹紧三种模式。
先来演示一下Unrestricted不受限弹性模式:
Unrestricted不受限弹性模式
滑动状态演示:
设置Unrestricted不受限弹性模式时,拖动结束后松开滚动框,它会根据惯性做减速运行,知道速度为0,并且这个拖动范围不受限制,可能会拖出到视口外面的情况,通常不建议采用这种模式。
Elastic弹性模式
滑动状态演示:
选择Elastic弹性模式,拖动结束后松开滚动框,会根据弹性变量来进行回弹。
拖动范围受到限制,拖动超过范围后会有回弹的效果。
Clamped夹紧模式
滑动状态演示:
这种弹性模式,就跟我们平时拖动的操作感觉差不多了,无论是拖到最上面还是最下面都不会有任何动作了。还带有范围控制,不能拖到视口外了。
3-3、滚动条及能见度
接下来,我们来详细讲一下滚动条及能见度属性:
以垂直滚动条为例,Visibility能见度有三种模式:
这三种模式都是对滚动条的设置。
模式 | 介绍 |
---|---|
permanent | 永久显示,选择后滚动条将会一直显示 |
Auto Hide | 自动隐藏,只有在 Content 不超出 Viewport 的范围的情况下才会隐藏 |
Auto Hide And Expand Viewport | 自动隐藏,并扩展视口 |
ScrollView的滚动条Scrollbar是自动显示的,如果内容的长度用不着滚动条,滚动条就不会显示,比如这样一张图片,用不到滚动条就不会显示:
但是,如果设置成permanent永久显示:
设置成Auto Hide自动隐藏:
设置成Auto Hide And Expand Viewport自动隐藏,并扩展视口:
他有一个Spacing 属性,是用来扩展视口的,也就是滚动条与视口之间的距离
四、ScrollView 滚动视图监听事件
ScrollView 滚动视图的监听事件返回值是一个Vector2的值:
所以,我们也需要定义一个带有Vector2参数的函数。
比如说,我们需要知道ScrollView是否被拖动,以及是否拖动到顶部或者尾部,就可以使用下面的代码:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;public class ScrollViewTest : MonoBehaviour
{private ScrollRect m_ScrollView;void Start(){m_ScrollView = GameObject.Find("Scroll View").GetComponent<ScrollRect>();m_ScrollView.onValueChanged.AddListener(ScrollValueChange);}private void ScrollValueChange(Vector2 ve2){Debug.Log("正在拖动滚动框");if (ve2 == new Vector2(1,1)){Debug.Log("滚动框在顶部");}if (ve2 == new Vector2(0,0)){Debug.Log("滚动框在尾部");}}
}
运行效果:
【Unity3D-UGUI系列】(十二)ScrollView 滚动视图组件详解相关推荐
- ReactNative进阶(二十五):ScrollView 滚动视图组件详解
文章目录 一.概述 二.属性 2.1 Style 2.2 方法 2.2.1 scrollTo() 2.2.2 crollToEnd() 三.拓展阅读 一.概述 ScrollView在Android和i ...
- 【正点原子Linux连载】第三十二章 U-Boot启动流程详解 -摘自【正点原子】I.MX6U嵌入式Linux驱动开发指南V1.0
1)实验平台:正点原子阿尔法Linux开发板 2)平台购买地址:https://item.taobao.com/item.htm?id=603672744434 2)全套实验源码+手册+视频下载地址: ...
- 跟着小马哥学系列之 Spring AOP(Pointcut 组件详解)
学好路更宽,钱多少加班. --小马哥 版本修订 2021.5.19:去除目录 2021.5.21:引用 Spring 官方 Pointcut 概念,修改 Pointcut 功能表述 简介 大家好,我是 ...
- 十二种常见设计模式代码详解
零:设计模式分类 设计模式有创建型模式.结构型模式与行为型模式 创建型:单例模式.工厂模式(简单工厂,工厂方法,抽象工厂) 结构型:适配器模式.门面模式.装饰器模式.注册树模式.代理模式.管道模式 行 ...
- Vue进阶(八十二):updated 应用详解
文章目录 一.前言 二.注意事项 三.拓展阅读 一.前言 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用updated钩子函数. 无论是组件本身的数据变更,还是从父组件接收到的 pr ...
- ADC学习系列(二):ADC参数详解
本章节主要讲解ADC的主要参数,部分类似于某些电压电流参数就不提及了,从ADC的基本参数,静态参数,动态参数三大分类来进行讲解.用ADI的高速ADC LTC2380的datasheet部分参数来进行举 ...
- 第十二课:Sizzle引擎详解
这篇博客难度太大,跟前端开发其实没什么关系,如果你想成为大牛,那就去了解下吧.如果你还不想,那可以忽略,毕竟面试官也不会问到这里来,因为他也不太懂.呵呵. Sizzle引擎是jQuery的选择器,它大 ...
- 前端一HTML:十二:元素查找过程的详解
后代选择器查找原理 <!doctype html> <html lang="en"> <head><meta charset=" ...
- 网络安全系列-十八: OSI七层模型详解
什么是OSI七层模型? OSI七层模型:Open System Interconnect,全称开放系统互连参考模型,是国际标准化组织(ISO)和国际电报电话咨询委员会(CCITT)联合制定的开放系统互 ...
最新文章
- 提示和技巧:光线跟踪最佳实践
- html的meta总结,html标签中meta属性使用介绍和 动态替换字符串
- 在组件之间实现事务和异步提交事务(NET2.0)
- Source Generator 单元测试
- 解决:-bash: telnet: command not found
- 分布式存储图解_BERT的youxiu变体:ALBERT论文图解介绍
- how pwm update
- idea怎么导入jxl.jar库
- matlab如何把实验结果记录在文件中,实验一Matlab基本操作
- git clone 某一特定分支转
- centos8对外开发指定接口
- 蚂蚁可信原生负责人入选“2021年度全球青年领袖”名单
- ubantu14.04搜狗拼音安装
- 《特征值与特征向量》定义、意义及例子
- Centos网络管理(三)-网络配置相关
- 小型元器件介绍:排阻
- Maya角色UV展平技巧笔记
- 内部异常 FileNotFoundException: 设备未就绪。 (异常来自 HRESULT:0x80070015)
- Mendix与JEECG对比
- php tts,给博客添加TTS语音朗读 简单快速版