Unity UGUI ScrollRect 滑动显示左右箭头

一、前言

二、效果

三、代码解析

EnhancedScrollRect.cs 解析

Start 方法

HandleArrowVisibility 方法

EnhancedScrollRectEditor.cs 解析

OnEnable 方法

OnInspectorGUI 方法

四、完整代码

EnhancedScrollRect.cs

EnhancedScrollRectEditor.cs

五、总结

Demo链接:

https://download.csdn.net/download/qq_41973169/89428682https://download.csdn.net/download/qq_41973169/89428682

一、前言

Unity版本:2022.3.x

在Unity游戏开发中，ScrollRect是一个常用的UI组件，用于实现可滚动的内容区域。然而，默认的ScrollRect组件并不提供对内容边缘的指示功能，例如在内容可以向左或向右继续滚动时显示箭头。为了解决这个问题，我们扩展了ScrollRect组件，增加了两个箭头指示器（leftArrow和rightArrow），用于提示用户当前内容是否可以继续滚动。这两个脚本分别是EnhancedScrollRect.cs和EnhancedScrollRectEditor.cs。

二、效果

三、代码解析

EnhancedScrollRect.cs 解析

Start 方法

在Start方法中，我们首先调用了基类的Start方法，然后添加了一个监听器，当ScrollRect的值改变时触发HandleArrowVisibility方法。接着，我们检查内容是否有ContentSizeFitter组件，如果有的话，我们强制立即重建布局以确保内容的尺寸正确。最后，我们手动调用一次HandleArrowVisibility方法，以初始化箭头的可见性。

protected override void Start()
{
    base.Start();
    onValueChanged.AddListener(HandleArrowVisibility);

    var contentSizeFitter = content.GetComponent<ContentSizeFitter>();
    if (!contentSizeFitter.IsUnityNull())
    {
        LayoutRebuilder.ForceRebuildLayoutImmediate(content);
    }

    HandleArrowVisibility(new Vector2());
}

HandleArrowVisibility 方法

HandleArrowVisibility方法主要用于根据内容的位置来更新箭头的可见性。首先，我们检查各种关键组件是否为null，如果有任何一个为null，则直接返回。然后，我们计算内容的起始位置和结束位置，并根据这些位置判断是否应该显示左右箭头。

private void HandleArrowVisibility(Vector2 position)
{
    if (content.IsUnityNull() || viewport.IsUnityNull() || leftArrow.IsUnityNull() || rightArrow.IsUnityNull())
    {
        return;
    }

    var contentStart = content.anchoredPosition.x;
    var contentEnd = contentStart + content.rect.width - viewport.rect.width;
    leftArrow.gameObject.SetActive(contentStart < -1.0f);
    rightArrow.gameObject.SetActive(contentEnd > 1.0f);
}

EnhancedScrollRectEditor.cs 解析

OnEnable 方法

在OnEnable方法中，我们首先调用基类的OnEnable方法，然后使用serializedObject.FindProperty方法查找leftArrow和rightArrow属性，并将结果存储在相应的变量中。

protected override void OnEnable()
{
    base.OnEnable();
    _leftArrow = serializedObject.FindProperty("leftArrow");
    _rightArrow = serializedObject.FindProperty("rightArrow");
}

OnInspectorGUI 方法

在OnInspectorGUI方法中，我们首先调用基类的OnInspectorGUI方法，然后更新序列化对象的状态。接着，我们使用EditorGUILayout.PropertyField方法绘制leftArrow和rightArrow属性的编辑字段。最后，我们应用修改并在检测到GUI发生变化时，将目标对象标记为脏，以确保更改被保存。

public override void OnInspectorGUI()
{
    base.OnInspectorGUI();

    serializedObject.Update();

    EditorGUILayout.PropertyField(_leftArrow);
    EditorGUILayout.PropertyField(_rightArrow);

    serializedObject.ApplyModifiedProperties();
    if (GUI.changed)
    {
        EditorUtility.SetDirty(target);
    }
}

四、完整代码

EnhancedScrollRect.cs

using Unity.VisualScripting;
using UnityEngine;
using UnityEngine.UI;

public class EnhancedScrollRect : ScrollRect
{
    [SerializeField] private RectTransform leftArrow;

    [SerializeField] private RectTransform rightArrow;

    protected override void Start()
    {
        base.Start();
        onValueChanged.AddListener(HandleArrowVisibility);

        var contentSizeFitter = content.GetComponent<ContentSizeFitter>();
        if (!contentSizeFitter.IsUnityNull())
        {
            LayoutRebuilder.ForceRebuildLayoutImmediate(content);
        }

        HandleArrowVisibility(new Vector2());
    }

    private void HandleArrowVisibility(Vector2 position)
    {
        if (content.IsUnityNull() || viewport.IsUnityNull() || leftArrow.IsUnityNull() || rightArrow.IsUnityNull())
        {
            return;
        }

        var contentStart = content.anchoredPosition.x;
        var contentEnd = contentStart + content.rect.width - viewport.rect.width;
        leftArrow.gameObject.SetActive(contentStart < -1.0f);
        rightArrow.gameObject.SetActive(contentEnd > 1.0f);
    }
}

EnhancedScrollRectEditor.cs

using UnityEditor;
using UnityEditor.UI;
using UnityEngine;

[CustomEditor(typeof(EnhancedScrollRect), true)]
[CanEditMultipleObjects]
public class EnhancedScrollRectEditor : ScrollRectEditor
{
    private SerializedProperty _leftArrow;

    private SerializedProperty _rightArrow;

    protected override void OnEnable()
    {
        base.OnEnable();
        _leftArrow = serializedObject.FindProperty("leftArrow");
        _rightArrow = serializedObject.FindProperty("rightArrow");
    }

    public override void OnInspectorGUI()
    {
        base.OnInspectorGUI();

        serializedObject.Update();

        EditorGUILayout.PropertyField(_leftArrow);
        EditorGUILayout.PropertyField(_rightArrow);

        serializedObject.ApplyModifiedProperties();
        if (GUI.changed)
        {
            EditorUtility.SetDirty(target);
        }
    }
}