NGUI UIScrollBar组件：流畅滚动与高效导航的关键组件

Unity打怪升级

已于 2024-08-04 12:15:37 修改

阅读量813

点赞数 8

分类专栏： # UI 文章标签： unity ui 游戏引擎 NGUI

于 2024-08-01 11:46:18 首次发布

本文链接：https://blog.csdn.net/UnityBoy/article/details/140843892

版权

UI 专栏收录该内容

69 篇文章 1 订阅

订阅专栏

在Unity游戏开发中，当用户界面（UI）内容超出可视区域时，滚动条成为了提供流畅浏览体验的关键组件。NGUI（Next-Gen UI）系统中的UIScrollBar组件是一个高效的滚动条解决方案，它支持自定义样式和灵活的交互方式。本文将详细介绍UIScrollBar的用途、特性以及如何在Unity项目中使用它。

UIScrollBar简介

UIScrollBar是NGUI中的一个组件，用于实现滚动功能。它可以让用户通过拖动滑块或点击轨道来滚动内容，适用于列表、文本、图像等长内容的展示。

核心特性

垂直和水平滚动：支持垂直和水平方向的滚动条。
自定义滑块和轨道：可以自定义滑块和轨道的纹理、颜色和大小。
滚动事件：提供滚动事件的回调，方便开发者响应滚动行为。
滚动速度：可以设置滚动速度和加速度，实现更自然的滚动效果。
自动隐藏：当内容适合可视区域时，滚动条可以自动隐藏。

组件详解

UIScrollBar 用于创建滚动条 - 围绕固定大小区域移动的可变大小滑块。它继承了 UIProgressBar 类的所有功能，但更改了前景对象的定位和交互方式。

在这里插入图片描述
与 UISlider 非常相似，UIScrollBar 唯一需要运行的是引用 Foreground 小部件。此小部件应具有滚动条允许占用的绝对最大尺寸，当其大小为 1.0 （100%）时会发生这种情况。

要创建一个非常简单的滚动条，只需创建一个切片的精灵，并为其提供 300 的宽度和 30 的高度。这将是滚动条的背景。

接下来，向其添加一个子切片子画面，该子子画面将充当滚动条的前景。如果想让它看起来更好，可以将其嵌入父项中，以使父项看起来“包围”它。

现在，已完成此操作，将 UIScrollBar 脚本添加到第一个 Sprite（背景）中，并相应地设置 Foreground 和 Background 字段。此时，可以点击 Play 并在 Inspector 窗口中调整值，前景精灵应该会做出相应的反应。

如果希望滚动条是可交互的，请向其添加一个 Box Collider。可以向 Foreground 和 Background Sprite 添加单独的框碰撞器。如果希望它可高亮显示，请将 UIButton 添加到你添加碰撞体的同一精灵中。

请注意，如果有两个碰撞体（一个用于背景，一个用于前台），那么将需要两个 UIButton 脚本（每个碰撞体一个）。可以使一个高亮显示前景，另一个高亮显示背景。

如果希望标签随其移动（例如，显示百分比），则可以将 UILabel 添加为 Foreground 对象的子对象。

滚动条的“方向”控制滚动条在其值从 0 变为 1 时的移动方向。

在 OnValueChange 部分中，可以指定一个函数，当滚动条的值更改时将调用该函数。如果已添加上述标签，则可以轻松引用其 SetCurrentPercent 函数，标签的值将以百分比显示滚动条的值。为此，请将 Label 的游戏对象拖放到 Notify 字段中，然后从下拉列表中选择 UILabel.SetCurrentPercent 函数。

提示

可以在前台使用 UIStretch 使其调整自己的大小以匹配父级，因此当您调整父级大小时，子级将自动调整自身以匹配。

使用UIScrollBar

创建UIScrollBar

在Unity编辑器中，创建一个新的空GameObject。
将UIScrollBar组件附加到该GameObject上。

配置UIScrollBar

在Inspector面板中，可以配置UIScrollBar的属性：

ScrollBar Direction：选择滚动条的方向（垂直或水平）。
Value：设置当前滚动位置的值。
Size：设置滚动条滑块的大小。

自定义滑块和轨道

Handle Sprite：设置滑块的精灵图像。
Background Sprite：设置滚动条轨道的精灵图像。

监听滚动事件

使用C#脚本监听UIScrollBar的滚动事件：

using UnityEngine;
using UnityEngine.UI;

public class ScrollBarListener : MonoBehaviour
{
    public UIScrollBar myScrollBar;

    void Start()
    {
        myScrollBar.onChange.AddListener(HandleScrollChange);
    }

    void HandleScrollChange(float value)
    {
        Debug.Log("Scroll position changed to: " + value);
    }
}

动态控制滚动条

通过脚本动态设置UIScrollBar的值或属性：

public class ScrollBarController : MonoBehaviour
{
    public UIScrollBar myScrollBar;

    public void SetScrollPosition(float newPosition)
    {
        myScrollBar.value = newPosition;
    }
}

性能优化

重用UIScrollBar：对于动态生成的滚动条，使用对象池来管理实例化和销毁过程。
合理使用滚动动画：虽然UIScrollBar支持滚动动画，但过多的动画可能会影响性能。

结语

UIScrollBar是NGUI中一个功能丰富的组件，它为Unity UI提供了强大的滚动功能。通过本文的介绍，你应该能够了解UIScrollBar的基本概念、特性以及使用方法。合理使用UIScrollBar，不仅可以提升游戏的交互性，还可以增强玩家的用户体验。加入知识星球：游戏新质力，获取更多NGUI进阶教程。

NGUI下载地址