Unity3D UI 嵌套滚动视图

Unity3D 解决 UI 嵌套滚动视图滑动问题。

嵌套滚动视图

滑动问题

在游戏开发中，我们常常会遇到一种情况，在一个滚动视图列表中，每个 item 还包含了一个内嵌的滚动视图。

这样，当我们在滑动外层的滚动视图时，如果点击位置在内嵌的滚动视图上，很可能滑不动，内外层滚动视图的滑动事件出现了冲突。

如下图所示，点击位置在奖励文本上时，是可以正常滑动的。但是，点击位置在奖励列表时，滑动方向变成了左右，而不是期望的上下滑动。

滑动冲突

解决方案

通常的解决方案是，根据拖拽的增量，判断滑动的方向，如果方向与内层的方向相同，则优先滑动内层；如果方向不同，则传递滑动事件给外层的滚动视图。

为此，我们创建一个脚本 CustomScrollRect.cs，继承 ScrollRect，并重写它的一些方法。

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;public class CustomScrollRect : ScrollRect
{protected override void Awake(){base.Awake();}public override void OnBeginDrag(PointerEventData eventData){base.OnBeginDrag(eventData);}public override void OnDrag(PointerEventData eventData){base.OnDrag(eventData);}public override void OnEndDrag(PointerEventData eventData){base.OnEndDrag(eventData);}public override void OnScroll(PointerEventData eventData){base.OnScroll(eventData);}
}

首先，在 Awake 中，获取父节点的 CustomScrollRect 组件。

这里使用的 GetComponentInParent，会从当前节点开始查找，递归遍历其父节点。

所以要从 transform.parent 开始遍历，避免获取到自己身上的 CustomScrollRect 组件。

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;public class CustomScrollRect : ScrollRect
{CustomScrollRect parent;protected override void Awake(){base.Awake();if (parent == null){parent = transform.parent.GetComponentInParent<CustomScrollRect>();}}// ...
}

同时，在类内部定义一个方向枚举，在 Awake 时，记录当前的方向。

这里仅判断是水平还是垂直，通常不会有两个方向都能滑动的情况。

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;public class CustomScrollRect : ScrollRect
{CustomScrollRect parent;enum Direction{horizontal,vertical}Direction curDirection;Direction dragDirection;protected override void Awake(){base.Awake();if (parent == null){parent = transform.parent.GetComponentInParent<CustomScrollRect>();}curDirection = horizontal ? Direction.horizontal : Direction.vertical;}// ..
}

然后在开始拖拽时，根据 eventData.delta 的 x 和 y 变量增幅哪个较大，判断滑动的方向。

当拖拽的方向和当前方向不同，且有外层滚动视图时，把 beginDragHandler 传递给外层，如果不符合条件，则执行自身的 OnBeginDrag 事件。

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;public class CustomScrollRect : ScrollRect
{// ...public override void OnBeginDrag(PointerEventData eventData){// 判断拖拽的方向dragDirection = Mathf.Abs(eventData.delta.x) > Mathf.Abs(eventData.delta.y)? Direction.horizontal : Direction.vertical;// 拖拽的方向和当前方向不同，且有外层滚动视图if (dragDirection != curDirection && parent != null){// 把 beginDragHandler 传递给外层ExecuteEvents.Execute(parent.gameObject, eventData,ExecuteEvents.beginDragHandler);// 不执行自身的 OnBeginDrag 事件return;}// 执行自身的 OnBeginDrag 事件base.OnBeginDrag(eventData);}
}

依此类推，在其他方法中也加上这样的判断（dragDirection 可以仅在开始拖拽时赋值）。

需要注意的是，

OnBeginDrag 方法传递的事件是 beginDragHandler
OnDrag 方法传递的事件是 dragHandler
OnEndDrag 方法传递的事件是 endDragHandler
OnScroll 方法传递的事件是 scrollHandler

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;public class CustomScrollRect : ScrollRect
{// ...public override void OnDrag(PointerEventData eventData){if (dragDirection != curDirection && parent != null){ExecuteEvents.Execute(parent.gameObject, eventData,ExecuteEvents.dragHandler);return;}base.OnDrag(eventData);}public override void OnEndDrag(PointerEventData eventData){if (dragDirection != curDirection && parent != null){ExecuteEvents.Execute(parent.gameObject, eventData,ExecuteEvents.endDragHandler);return;}base.OnEndDrag(eventData);}public override void OnScroll(PointerEventData eventData){if (dragDirection != curDirection && parent != null){ExecuteEvents.Execute(parent.gameObject, eventData,ExecuteEvents.scrollHandler);return;}base.OnScroll(eventData);}
}

使用说明

移除掉原来的 ScrollRect 组件，换上 CustomScrollRect 组件。

记得要拖拽 Viewport 和 Content 节点。

内外层滚动视图都需要换上 CustomScrollRect 组件。

更换组件

最终效果如图：

最终效果

完整代码

CustomScrollRect.cs

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;public class CustomScrollRect : ScrollRect
{CustomScrollRect parent;enum Direction{horizontal,vertical}Direction curDirection;Direction dragDirection;protected override void Awake(){base.Awake();if (parent == null){parent = transform.parent.GetComponentInParent<CustomScrollRect>();}curDirection = horizontal ? Direction.horizontal : Direction.vertical;}public override void OnBeginDrag(PointerEventData eventData){// 判断拖拽的方向dragDirection = Mathf.Abs(eventData.delta.x) > Mathf.Abs(eventData.delta.y)? Direction.horizontal : Direction.vertical;// 拖拽的方向和当前方向不同，且有外层滚动视图if (dragDirection != curDirection && parent != null){// 把 beginDragHandler 传递给外层ExecuteEvents.Execute(parent.gameObject, eventData,ExecuteEvents.beginDragHandler);// 不执行自身的 OnBeginDrag 事件return;}// 执行自身的 OnBeginDrag 事件base.OnBeginDrag(eventData);}public override void OnDrag(PointerEventData eventData){if (dragDirection != curDirection && parent != null){ExecuteEvents.Execute(parent.gameObject, eventData,ExecuteEvents.dragHandler);return;}base.OnDrag(eventData);}public override void OnEndDrag(PointerEventData eventData){if (dragDirection != curDirection && parent != null){ExecuteEvents.Execute(parent.gameObject, eventData,ExecuteEvents.endDragHandler);return;}base.OnEndDrag(eventData);}public override void OnScroll(PointerEventData eventData){if (dragDirection != curDirection && parent != null){ExecuteEvents.Execute(parent.gameObject, eventData,ExecuteEvents.scrollHandler);return;}base.OnScroll(eventData);}
}