Unity UGUI 的 ScrollRect(滚动视图)组件的介绍及应用
1. 什么是 ScrollRect 组件?
ScrollRect(滚动视图)是 Unity UGUI 中的一个罕用组件,用于在 UI 界面中创立可滚动的区域。通过 ScrollRect 组件,能够实现在无限的空间内显示大量的内容,并且能够通过滑动手势来浏览内容。
2. ScrollRect 组件的工作原理
ScrollRect 组件通过将内容搁置在一个可滚动的矩形区域内,而后通过拖动或滑动手势来扭转内容的显示地位。ScrollRect 组件蕴含一个 Viewport(视口)和一个 Content(内容)两个子对象,Viewport 用于限度 Content 的显示范畴,而 Content 则蕴含了理论的内容。
3. ScrollRect 组件的罕用属性
- Content:用于搁置理论的内容的 RectTransform 对象。
- Horizontal:是否容许程度方向的滚动。
- Vertical:是否容许垂直方向的滚动。
- Movement Type:滚动的类型,可选的类型有:Unrestricted(不受限制)、Elastic(弹性)、Clamped(限度)。
- Inertia:是否启用惯性滚动。
- Deceleration Rate:惯性滚动的加速率。
- Scroll Sensitivity:滚动的灵敏度。
4. ScrollRect 组件的罕用函数
- ScrollTo:滚动到指定地位。
- StopMovement:进行滚动。
- OnBeginDrag:开始拖拽时调用的函数。
- OnDrag:拖拽过程中调用的函数。
- OnEndDrag:完结拖拽时调用的函数。
5. 示例代码
示例 1:根本的滚动视图
using UnityEngine;
using UnityEngine.UI;
public class ScrollRectExample : MonoBehaviour
{
public ScrollRect scrollRect;
void Start()
{
// 设置 Content 的大小
RectTransform content = scrollRect.content;
content.sizeDelta = new Vector2(0, 1000);
// 设置滚动视图的滚动范畴
scrollRect.verticalNormalizedPosition = 1;
}
}
操作步骤:
- 创立一个空的 GameObject,并增加 ScrollRect 组件。
- 在 Hierarchy 面板中选中 ScrollRect 对象,将 Content 对象拖拽到 ScrollRect 的 Content 属性中。
- 将示例代码增加到 ScrollRectExample 脚本中,并将 ScrollRect 对象拖拽到 scrollRect 属性中。
- 运行游戏,能够看到滚动视图中的内容能够通过滑动手势进行滚动。
示例 2:限度滚动范畴
using UnityEngine;
using UnityEngine.UI;
public class ScrollRectExample : MonoBehaviour
{
public ScrollRect scrollRect;
void Start()
{
// 设置 Content 的大小
RectTransform content = scrollRect.content;
content.sizeDelta = new Vector2(0, 1000);
// 设置滚动视图的滚动范畴
scrollRect.verticalNormalizedPosition = 1;
scrollRect.movementType = ScrollRect.MovementType.Clamped;
}
}
操作步骤:
- 创立一个空的 GameObject,并增加 ScrollRect 组件。
- 在 Hierarchy 面板中选中 ScrollRect 对象,将 Content 对象拖拽到 ScrollRect 的 Content 属性中。
- 将示例代码增加到 ScrollRectExample 脚本中,并将 ScrollRect 对象拖拽到 scrollRect 属性中。
- 运行游戏,能够看到滚动视图中的内容在滚动到边界时会受到限制。
示例 3:惯性滚动
using UnityEngine;
using UnityEngine.UI;
public class ScrollRectExample : MonoBehaviour
{
public ScrollRect scrollRect;
void Start()
{
// 设置 Content 的大小
RectTransform content = scrollRect.content;
content.sizeDelta = new Vector2(0, 1000);
// 设置滚动视图的滚动范畴
scrollRect.verticalNormalizedPosition = 1;
scrollRect.inertia = true;
scrollRect.decelerationRate = 0.5f;
}
}
操作步骤:
- 创立一个空的 GameObject,并增加 ScrollRect 组件。
- 在 Hierarchy 面板中选中 ScrollRect 对象,将 Content 对象拖拽到 ScrollRect 的 Content 属性中。
- 将示例代码增加到 ScrollRectExample 脚本中,并将 ScrollRect 对象拖拽到 scrollRect 属性中。
- 运行游戏,能够看到滚动视图中的内容在滑动完结后会有惯性滚动的成果。
示例 4:滚动到指定地位
using UnityEngine;
using UnityEngine.UI;
public class ScrollRectExample : MonoBehaviour
{
public ScrollRect scrollRect;
void Start()
{
// 设置 Content 的大小
RectTransform content = scrollRect.content;
content.sizeDelta = new Vector2(0, 1000);
// 设置滚动视图的滚动范畴
scrollRect.verticalNormalizedPosition = 1;
// 滚动到指定地位
scrollRect.ScrollTo(new Vector2(0, 500), 0.5f);
}
}
操作步骤:
- 创立一个空的 GameObject,并增加 ScrollRect 组件。
- 在 Hierarchy 面板中选中 ScrollRect 对象,将 Content 对象拖拽到 ScrollRect 的 Content 属性中。
- 将示例代码增加到 ScrollRectExample 脚本中,并将 ScrollRect 对象拖拽到 scrollRect 属性中。
- 运行游戏,能够看到滚动视图会主动滚动到指定地位。
示例 5:进行滚动
using UnityEngine;
using UnityEngine.UI;
public class ScrollRectExample : MonoBehaviour
{
public ScrollRect scrollRect;
void Start()
{
// 设置 Content 的大小
RectTransform content = scrollRect.content;
content.sizeDelta = new Vector2(0, 1000);
// 设置滚动视图的滚动范畴
scrollRect.verticalNormalizedPosition = 1;
// 进行滚动
scrollRect.StopMovement();}
}
操作步骤:
- 创立一个空的 GameObject,并增加 ScrollRect 组件。
- 在 Hierarchy 面板中选中 ScrollRect 对象,将 Content 对象拖拽到 ScrollRect 的 Content 属性中。
- 将示例代码增加到 ScrollRectExample 脚本中,并将 ScrollRect 对象拖拽到 scrollRect 属性中。
- 运行游戏,能够看到滚动视图会进行滚动。
6. 注意事项
- ScrollRect 组件须要配合其余 UI 组件(如 Mask)一起应用,以限度内容的显示范畴。
- 在应用 ScrollRect 组件时,须要留神 Content 的大小和滚动范畴的设置,以确保内容可能正确地显示和滚动。
7. 参考资料
- Unity 官网文档 – ScrollRect