UGUI ScrollRect滑动定位优化详解

前言

UGUI ScrollRect是Unity提供的一个用于制作滚动效果的UI组件，使用它可以比较方便地实现高效的滚动效果。但是在实际使用中，我们可能会遇到滑动定位的问题，即当我们滑动到一个特定位置后，需要把这个位置对应的item定位到屏幕中央或者其他位置。这时候，我们就需要对ScrollRect进行优化。

优化方案

方案一：直接使用ScrollRect

使用ScrollRect的默认滑动方案可能会出现一些问题，比如当滚动列表很长时，滑动的惯性很大，滑动结束后需要等待一段时间才能停止。为了避免这个问题，我们可以在根节点上添加一个ContentSizeFitter组件，同时限制ScrollRect的高度，这样就能够避免惯性问题，不过这个方法仍然会出现突然停止的情况。

方案二：使用SnapRect

我们可以使用第三方插件SnapRect来实现滑动定位，它可以定位ScrollRect的item到指定位置，并且支持惯性滑动的效果。在使用这个插件之前，我们需要先去Unity Asset Store下载并导入插件。

下面是示例一，演示如何使用SnapRect来实现滑动定位。

public class SnapRectExample : MonoBehaviour
{
    public RectTransform content;    // ScrollRect的Content区域
    public Transform[] items;        // 横向布局的子元素，以数组形式保存
    public float spacing;            // 子元素之间的间距
    private int currentItemIndex;    // 当前的元素索引
    private float[] itemPositions;   // 子元素的位置数组
    private bool isDrag;             // 是否在拖拽
    private Bounds contentBounds;    // Content布局区域的界限

    private void Start()
    {
        Init();
    }

    private void Init()
    {
        int itemCount = items.Length;
        itemPositions = new float[itemCount];
        float contentWidth = (itemCount - 1) * spacing;
        for (int i = 0; i < itemCount; i++)
        {
            RectTransform item = items[i] as RectTransform;
            item.anchorMin = new Vector2(0f, 0.5f); // 锚点是左居中
            item.anchorMax = new Vector2(0f, 0.5f);
            item.pivot = new Vector2(0.5f, 0.5f);   // 中心点
            item.anchoredPosition = new Vector2(i * spacing - contentWidth * 0.5f, 0f);
            itemPositions[i] = item.anchoredPosition.x;
            contentBounds.Encapsulate(item.rect);  // 更新Content布局区域的界限
        }
        SnapRect snapRect = content.gameObject.AddComponent<SnapRect>();
        snapRect.Init(content, contentBounds, OnSnap, OnBeginDrag, OnEndDrag);
    }

    private void OnSnap(int itemIndex)
    {
        currentItemIndex = itemIndex;
    }

    private void OnBeginDrag()
    {
        isDrag = true;
    }

    private void OnEndDrag()
    {
        isDrag = false;
    }

    private void Update()
    {
        if (!isDrag)
        {
            float targetX = itemPositions[currentItemIndex];
            Vector2 currentPos = content.anchoredPosition;
            Vector2 targetPos = new Vector2(targetX, currentPos.y);
            content.anchoredPosition = Vector2.Lerp(currentPos, targetPos, Time.deltaTime * 10f);
        }
    }
}

这里使用Canvas Scaler将Canvas缩放，根据它的变化，自适应布局大小和相应控件的位置。然后定义OnSnap、OnBeginDrag、OnEndDrag等方法，使用SnapRect插件来实现滑动定位的效果，最后通过Update方法来实现缓动效果。

上面的代码会将所有子元素当做横向布局的，并且每个子元素的宽度相同。如果子元素的宽度不同，我们需要使用以下示例二来解决。

方案三：使用LoopScrollRect

第三种方案是使用第三方插件LoopScrollRect，它可以支持虚拟无限循环滚动，大大提高了滚动效率。在使用之前同样需要从Unity Asset Store下载并导入插件。

下面是示例二，展示如何使用LoopScrollRect实现滑动定位。

public class LoopScrollRectExample : MonoBehaviour
{
    public LoopScrollRect scrollRect;
    private int targetIndex;

    private void Start()
    {
        Init();
    }

    private void Init()
    {
        scrollRect.totalCount = 100;
        scrollRect.RefillCells(targetIndex);
    }

    public void SetTargetIndex(int index)
    {
        targetIndex = index;
        SnapToTargetIndex();
    }

    private void SnapToTargetIndex()
    {
        scrollRect.SnapToItem(targetIndex, () =>
        {
            Debug.Log("SnapToTargetIndex complete.");
        });
    }
}

在这里，我们可以直接在代码中调用ScrollRect的函数来实现滑动定位。然后通过SnapToItem函数来进行缓动滑动效果。

结论

通过上述三种方法，我们可以实现高效的滑动定位效果，这不仅可以帮助我们解决实际开发中遇到的问题，还可以提高我们的工作效率，使我们更加专注于开发。