Unity3D UI 嵌套滚动视图

于 2024-12-01 14:04:41 发布
阅读量871 收藏 10
点赞数 7
CC 4.0 BY-SA版权
分类专栏： Unity3D 文章标签： unity
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76984003/article/details/144169016

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);
    }
}
[Unity3D]Unity3D游戏开发之连续滚动背景
素履独行 | 元培的个人博客
04-05 1万+
在诸如天天跑酷等2D游戏中，由于游戏需要表现出运动的感觉，通常都会使游戏背景连续循环滚动以增强视觉效果，那么今天，博主就来带领大家一起来实现连续滚动背景吧！          首先来讲述一下原理，准备两张连续的图片(博主这里使用了一张图片，好吧，我偷懒了），我们使用正交投影的摄像机对准第一张背景，然后使用脚本让图片自右向左开始移动，当第一张图片移出摄像机的视野时，第二张图片立即接在第一张图的后面
【unity3D】直播间滚动式弹幕效果
LicalKi的博客
04-18 5891
新时代总会有新产物，比如直播。直播的特色就在于实时互动。将原本的视频聊天一对一，变成主播和评论区聊天的一对多。 直播的特色也很明显，底部摄像机渲染实时画面；在左下角叠上一层弹幕滚动实时显示评论，右下角点赞购买等，同时点击屏幕会触发点赞动画；顶部左上角为头像和粉丝数以及关注，然后跟着一排打赏排行榜。 这些套用到游戏里的话，就是把原本的摄像机实时画面，变成游戏场景就行了。 下面主要是介绍单机直播弹幕的实现。 ...
Unity嵌套滚动ScrollView.zip
05-25
Unity UGUI ScrollView(ScrollRect)嵌套滚动列表（横竖滑动列表）
ScrollView嵌套ScrollView滑动
09-14
ScrollView 嵌套ScrollView 事件分发问题
Unity实现3D循环滚动效果
08-26
主要为大家详细介绍了Unity实现3D循环滚动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
DynamicScrollRect可滚动的ScrollRect的unity3d插件UI布局
04-25
DynamicScrollRect可滚动的ScrollRect的unity3d插件UI布局 用于unity2021以上版本为该场景提供了一种优化的解决方案。滚动视图仅会实例化滚动视图内部将要显示的元素，从而节省了大量的绘制和内存使用。...
Unity3D优化插件：DynamicScrollRect的高级UI布局
资源摘要信息:"DynamicScrollRect可滚动的ScrollRect的unity3d插件UI布局" 知识点： 1. Unity3D插件介绍： - Unity3D是一款强大的跨平台游戏开发引擎，广泛应用于游戏开发行业。 - 插件是为Unity3D提供特定功能...
UNITY3D的UGUI的UI图之类的
10-19
总结起来，"UNITY3D的UGUI的UI图之类的"这个主题涵盖了Unity3D中的UI设计、交互、性能优化等多个方面，通过预制体和UI图资源，开发者可以高效地创建出功能丰富、视觉美观的用户界面。在实际项目中，开发者需要结合...
深入解析NGUI：Unity3D中提升UI性能的5大秘诀
NGUI作为Unity3D中广泛使用的一款UI系统，其性能对游戏和应用程序的流畅运行至关重要。本文对NGUI进行了全面的性能优化探讨，从基础的最佳实践和Canvas渲染优化，到资源管理和事件系统性能调优，再到脚本编程和碰撞...
Unity3D4.6UGUI开发设计及案例讲解
10-20
Unity3D 4.6 引入了全新的用户界面（UI）系统——UGUI（Unity Graphic User Interface），这个系统的引入极大地改善了Unity中2D界面的设计和交互性。UGUI的出现使得开发者能够更轻松地创建复杂且高性能的UI元素，...
unity3d-UGUI仿3D滑动
06-08
Unity3d仿3D滑动很真实,基于UGUI实现 例如卡牌的选择，关卡选择都能使用。
一个很简单的原创 ScrollView
07-18
代码简单，功能也简单，后续在补个完整点，这个现在仅支持竖向
多级 ScrollView 嵌套的实现方案。.zip
01-15
方案是为解决特定问题或达成特定目标而制定的一系列计划或步骤。它的作用是提供一种系统性的方法，以有效地应对挑战、优化流程或实现目标。以下是方案的主要作用： 问题解决： 方案的核心目标是解决问题。通过系统性的规划和执行，方案能够分析问题的根本原因，提供可行的解决方案，并引导实施过程，确保问题得到合理解决。 目标达成： 方案通常与明确的目标相关联，它提供了一种达成这些目标的计划。无论是企业战略、项目管理还是个人发展，方案的制定都有助于明确目标并提供达成目标的路径。 资源优化： 方案在设计时考虑了可用资源，以最大化其效用。通过明智的资源分配，方案可以在有限的资源条件下实现最大的效益，提高效率并减少浪费。 风险管理： 方案通常会对潜在的风险进行评估，并制定相应的风险管理策略。这有助于减轻潜在问题的影响，提高方案的可行性和可持续性。 决策支持： 方案提供了决策者所需的信息和数据，以便做出明智的决策。这种数据驱动的方法有助于减少不确定性，提高决策的准确性。 团队协作： 复杂的问题通常需要多个人的协同努力。方案提供了一个共同的框架，帮助团队成员理解各自的职责和任务，促进协作并确保整个团队朝着共同的目标努力。 监控与评估： 方案通常包括监控和评估的机制，以确保实施的有效性。通过定期的评估，可以及时调整方案，以适应变化的环境或新的挑战。 总体而言，方案的作用在于提供一种有序、有计划的方法，以解决问题、实现目标，并在实施过程中最大化资源利用和风险管理。
Unity3D滚动列表的编码与实现详解
最新发布
Thomas_YXQ的博客
07-01 833
ScrollRect组件可以绑定一个滚动视图（Viewport）和一个滚动内容（Content），通过调整滚动视图的位置来显示滚动内容的不同部分。对象池预先创建一定数量的数据项对象，当需要显示新的数据项时，从对象池中取出空闲对象进行复用，而不是重新创建。滚动列表作为常见的UI元素之一，在游戏、应用程序中广泛使用，如角色列表、物品背包、设置菜单等。在ScrollListController脚本中，首先定义一些必要的变量和属性，如列表项预制体（Prefab）、总数据项数、列表项高度等。csharp复制代码。
Unity——ScrollView嵌套
weixin_43891047的博客
02-03 796
解决两层ScrollView嵌套，底层事件无法触发的问题
Unity（三十三）：ScrollView嵌套
You瞧谁不起 - 道不尽世间的沧桑，诉不完人生的悲凉
02-21 2749
效果 布局 脚本 using UnityEngine; using UnityEngine.EventSystems; using UnityEngine.UI; public class CustomScrollRect : ScrollRect { private CustomScrollRect _parent; private enum Direction { Horizontal, Vertical } // 滑动方
Unity内嵌ScrollView
枫叶的博客
03-23 279
内嵌ScrollView
unity3D scrollview嵌套不能滑动的问题及其解决办法
qq_41841073的博客
11-15 1467
unity3D scrollview嵌套不能滑动的问题及其解决办法
Unity双层嵌套ScrollView
qq_37244872的博客
07-30 2512
在unity中实现2层ScrollView的嵌套，两层的ScrollView的拖动方向不一样，这个功能的核心就是如何把子ScrollView事件传递给父ScrollView，在查阅资料之后发现只需要实现一下3个接口就行了 using System.Collections; using UnityEngine; using UnityEngine.EventSystems; using Unit...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值