Unity基础控件笔记——UGUI滚动条Scorllbar&ScorllRect组件

最新推荐文章于 2024-09-02 16:47:09 发布

一条闲の鱼

最新推荐文章于 2024-09-02 16:47:09 发布

阅读量1.1k

点赞数 4

分类专栏： Unity 文章标签： unity ugui scrollbar

本文链接：https://blog.csdn.net/qq_39435884/article/details/116133339

版权

Unity 专栏收录该内容

6 篇文章 3 订阅

订阅专栏

UGUI使用Scorllbar&ScorllRect组件实现滚动条

前言
一、UI创建&Sorllbar组件介绍
二、Mask遮罩&Scorll Rect组件
- 1.添加Mask遮罩组件
- 2.添加ScorllRect组件

前言

缩进该文章主要是记录Unity基础组件知识，主要是用Scrollbar、Scorll Rect和Mask遮罩实现竖直滚动条拖拉效果（水平滚动条同理）

提示：以下是本篇文章正文内容，下面案例可供参考

一、UI创建&Sorllbar组件介绍

1.Hierarchy面板UI

在这里插入图片描述
效果图：

其中：
TextPanel：是需要滚动的内容,其长度一定要大于父级Bg的长度，这样才能够滚动显示

2.Scorllbar创建与组件属性

2.1Scorllbar创建

Scorllbar：在Hierarchy面板鼠标右键UI→Scorllbar创建
在这里插入图片描述
Scrollbar:滚动条底部背景图片（不需要变动长度的）;
Handle:滚动条前部显示图片（根据拖动UI总长度、拖动位置变化）；
*Handle图片类型为Sliced类型，如果是非矩形固定形状，需要对图片进行切割，以防拉伸变形

2.2Scorllbar组件属性

在这里插入图片描述
主要就是更改Direction属性，其他均为默认。
其中Bottom To Top和Top To Bottom是用于竖直滚动条，其余是水平方向。

二、Mask遮罩&Scorll Rect组件

1.添加Mask遮罩组件

给Bg添加Mask组件，添加完成后Bg子物体中超出Bg范围的内容就不显示了。
在这里插入图片描述
Show Mask Graphic:取消勾选添加Mask的Image不显示，实现透明背景框（默认勾选，显示背景框）

*建议将滚动条Scorllbar不放至Bg子物体中，应处于和其同一层级，因为这样就可以随意移动滑动条位置，不用担心被Bg的Mask组件遮挡不显示

2.添加ScorllRect组件

给Bg添加ScorllRect组件,将TextPanel拖到ScorllRect组件Content属性里，将Scorllbar拖到Vertical Scrollbar属性里，然后运行就可以实现滑动条效果
在这里插入图片描述
Content:内容，需要滚动的内容，填入滑动面板所有内容的父面板；

Horizontal:是否允许水平滑动，勾选之后可以在水平方向拖动滑动面板；

Vertical:是否允许竖直滑动，勾选之后可以在竖直方向拖动滑动面板；

MovementType: 滑动限制类型，分为三种
在这里插入图片描述
Unrestricted:不限制滑动，滑动时容易将滑动面板滑出范围外，一般不选择；
Elastic：弹性限制滑动，滑动时到边界有反弹效果，选中后可以设置Elasticty（滚动条反弹所需时间，越短滑动反弹越快）属性
Clamped:固定限制滑动，滑动时移动多少就是多少，没有偏移量，比较僵硬；