UGUI ScrollRect滑动居中CenterOnChild实现

NGUI有一个UICenterOnChild脚本,可以轻松实现ScrollView中拖动子物体后保持一个子物体位于中心位置。然而UGUI就没这么方便了,官方并没有类似功能的脚本。网上找到一些运行效果都不对,可能因为UGUI需要配置的东西太多,RectTransfrom不同设置效果就不一样。故自己实现了该功能,使用时的配置如下:

1. 仅适用于水平方向拖动的ScrollRect。
2. ScrollRect中的Grid必须使用GridLayoutGroup。
3. 由于需要知道ScrollRect的宽度以便计算中心位置,故ScrollRect的Anchors的四个小三角中的上面或者下面的一对角不得分离,不然宽度计算出错,即需要:Anchors.Min.x == Anchors.Max.x。最好四角合一。
4. 由于是通过设置ScrollRect's content的localPosition实现,故需要将ScrollRect的中心点Pivot与content的中心点均置于自身最左边(0, 0.5)。
5. 由于第一个与最后一个子物体需要停留在中间,故ScrollRect的Movement Type需要设置为Unrestricted。该项会在运行时自动设置。

代码如下:

/// <summary>
    ///
    /// 拖动ScrollRect结束时始终让一个子物体位于中心位置。
    ///
    /// </summary>
    public class CenterOnChild : MonoBehaviour, IEndDragHandler, IDragHandler
    {
        //将子物体拉到中心位置时的速度
        public float centerSpeed = 9f;

        //注册该事件获取当拖动结束时位于中心位置的子物体
        public delegate void OnCenterHandler (GameObject centerChild);
        public event OnCenterHandler onCenter;

        private ScrollRect _scrollView;
        private Transform _container;

        private List<float> _childrenPos = new List<float> ();
        private float _targetPos;
        private bool _centering = false;

        void Awake ()
        {
            _scrollView = GetComponent<ScrollRect> ();
            if (_scrollView == null)
            {
                Debug.LogError ("CenterOnChild: No ScrollRect");
                return;
            }
            _container = _scrollView.content;

            GridLayoutGroup grid;
            grid = _container.GetComponent<GridLayoutGroup> ();
            if (grid == null)
            {
                Debug.LogError ("CenterOnChild: No GridLayoutGroup on the ScrollRect's content");
                return;
            }

            _scrollView.movementType = ScrollRect.MovementType.Unrestricted;

            //计算第一个子物体位于中心时的位置
            float childPosX = _scrollView.GetComponent<RectTransform> ().rect.width * 0.5f - grid.cellSize.x * 0.5f;
            _childrenPos.Add (childPosX);
            //缓存所有子物体位于中心时的位置
            for (int i = 0; i < _container.childCount - 1; i++)
            {
                childPosX -= grid.cellSize.x + grid.spacing.x;
                _childrenPos.Add (childPosX);
            }
        }

        void Update ()
        {
            if (_centering)
            {
                Vector3 v = _container.localPosition;
                v.x = Mathf.Lerp (_container.localPosition.x, _targetPos, centerSpeed * Time.deltaTime);
                _container.localPosition = v;
                if (Mathf.Abs (_container.localPosition.x - _targetPos) < 0.01f)
                {
                    _centering = false;
                }
            }
        }

        public void OnEndDrag (PointerEventData eventData)
        {
            _centering = true;
            _targetPos = FindClosestPos (_container.localPosition.x);
        }

        public void OnDrag (PointerEventData eventData)
        {
            _centering = false;
        }

        private float FindClosestPos (float currentPos)
        {
            int childIndex = 0;
            float closest = 0;
            float distance = Mathf.Infinity;

            for (int i = 0; i < _childrenPos.Count; i++)
            {
                float p = _childrenPos[i];
                float d = Mathf.Abs (p - currentPos);
                if (d < distance)
                {
                    distance = d;
                    closest = p;
                    childIndex = i;
                }
            }

            GameObject centerChild = _container.GetChild (childIndex).gameObject;
            if (onCenter != null)
                onCenter (centerChild);

            return closest;
        }
    }

由于已缓存所有子物体的位置信息,故该代码简单修改可以扩展功能,如增加到上一项、到下一项、跳转到指定项等功能。

Unity中使用UGUI实现居中放大滑动效果,可以按照以下步骤进行操作: 1. 创建一个新的Canvas对象,确保其Render Mode设置为Screen Space - Overlay。 2. 在Canvas下创建一个Panel作为容器,用于放置要滑动放大的内容。 3. 在Panel下创建一个Image或者其他UI组件,作为滑动放大的目标对象。 4. 为Panel添加一个Scroll Rect组件,用于实现滑动功能。在Scroll Rect的Content属性中指定目标对象。 5. 在Panel下创建一个空的GameObject,命名为Center,并将目标对象移动到Center下,确保目标对象的Pivot点位于(0.5, 0.5)。 6. 创建一个新的脚本,用于控制滑动放大的逻辑。可以将脚本挂载到Panel上。 7. 在脚本中添加以下代码: ``` using UnityEngine; using UnityEngine.UI; public class ScaleAndScroll : MonoBehaviour { public float minScale = 1.0f; public float maxScale = 2.0f; public float scrollSpeed = 0.1f; private ScrollRect scrollRect; private RectTransform centerRect; private void Start() { scrollRect = GetComponent<ScrollRect>(); centerRect = transform.Find("Center").GetComponent<RectTransform>(); } private void Update() { float scale = Mathf.Lerp(maxScale, minScale, scrollRect.normalizedPosition.y); centerRect.localScale = new Vector3(scale, scale, 1); } } ``` 8. 在脚本中的Inspector视图中,调整minScale和maxScale的值以控制目标对象的最小和最大放大倍数。 9. 运行场景,就能够看到滑动屏幕时目标对象会以中心为轴进行放大缩小的效果。 通过上述步骤,可以实现Unity中使用UGUI实现居中放大滑动的效果。通过调整脚本中的参数,可以灵活调节滑动和放大的速度和比例。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值