随笔-Unity中的ScrollView如何跳转到指定的Item位置

         在我们平时开发滑动列表的UI时,虽然UGUI的ScrollView并不是很好用,但是有时一些非常简单的列表我们没有必要加入一些很复杂的列表插件,用简单的ScrollView就可以完成我们的需求。

        我们可以通过计算列表中有多少个Item,再利用ScrollView中Content的长度来计算Item的具体位置,得到位置之后直接调整ScrollView中normalizedPosition的值做到跳转的目的。但是每次都计算显得麻烦,也不美观,我们可以把这套计算写成扩展方法。

        直接贴上代码:整个计算方式很简单,代码量也很少,计算方式就像上面说的一样。完成扩展方法之后只需要像这样直接调用,传入想要跳转位置的item的RectTransform即可:scrollView.normalizedPosition = scrollView.UpdateTargetPos(item.rect);

using UnityEngine;
using UnityEngine.UI;

/// <summary>
/// 扩展
/// </summary>
public static class Extension
{
    public static Vector2 UpdateTargetPos(this ScrollRect scrollRect, RectTransform item)
    {
        Vector3 itemCurrentLocalPostion = scrollRect.GetComponent<RectTransform>().InverseTransformVector(ConvertLocalPosToWorldPos(item));
        Vector3 itemTargetLocalPos = scrollRect.GetComponent<RectTransform>().InverseTransformVector(ConvertLocalPosToWorldPos(scrollRect.viewport));

        Vector3 diff = itemTargetLocalPos - itemCurrentLocalPostion;
        diff.z = 0.0f;

        var newNormalizedPosition = new Vector2(
            diff.x / (scrollRect.content.rect.width - scrollRect.viewport.rect.width),
            diff.y / (scrollRect.content.rect.height - scrollRect.viewport.rect.height)
            );

        newNormalizedPosition = scrollRect.normalizedPosition - newNormalizedPosition;

        newNormalizedPosition.x = Mathf.Clamp01(newNormalizedPosition.x);
        newNormalizedPosition.y = Mathf.Clamp01(newNormalizedPosition.y);

        //有DOTween时使用
        //DOTween.To(() => scrollRect.normalizedPosition, x => scrollRect.normalizedPosition = x, newNormalizedPosition, 0.8f);
        //无DOTween时使用
        //scrollRect.normalizedPosition = newNormalizedPosition;

        return newNormalizedPosition;
    }

    private static Vector3 ConvertLocalPosToWorldPos(RectTransform target)
    {
        var pivotOffset = new Vector3(
            (0.5f - target.pivot.x) * target.rect.size.x,
            (0.5f - target.pivot.y) * target.rect.size.y,
            0f);

        var localPosition = target.localPosition + pivotOffset;

        return target.parent.TransformPoint(localPosition);
    }

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值