【Unity】LeanTouch实现ScrollView与UI拖拽兼容

官方API: http://carloswilkes.com/Documentation/LeanTouch
插件地址:https://assetstore.unity.com/packages/tools/input-management/lean-touch-30111

LeanTouch

LeanTouch是一款Unity触控插件,集成触控屏各类操作,是常用插件之一。
Demo测试了使用LeanTouch,实现多个UI框独立拖拽。并在UI框里加入ScrollView文字拖动框,实现了2者拖拽的兼容。

Unity版本:2021.3.6f1c1
Lean Touch 3.0.0
Demo源码:https://download.csdn.net/download/qq_17523181/86904941

步骤一:创建一个基础

  • 通过Package Manager -> My Assets -> 安装Lean Touch
  • 在Hierarchy里,右键 -> Lean -> Touch创建基础插件(LeanTouch)
  • 制作2个带ScroolView的UI
    在这里插入图片描述
    在这里插入图片描述

步骤二:实现简单拖动

  • 在Box(1)里加入LeanDragTranslate脚本,这时若运行,发现Box(1)不能被拖动;
  • 把Bg图片的Raycast Target去掉,发现Box(1)可以拖动了,但是需要点在Box(1)的外部;
  • 去掉Box(1)的LeanDragTranslate脚本的Ignore Started Over Gui的勾,发现Box(1)内部也可以拖动了
    在这里插入图片描述

LeanTouch的拖动响应是会被UI层遮挡掉的。所以需要去Bg图片的Raycast Target;去掉Ignore Started Over Gui的勾,来确定这个UI层是需要Touch响应的。

步骤三:两个Box能单独拖动

  • 在Box(2)里也加入LeanDragTranslate脚本,LeanDragTranslate脚本的Ignore Started Over Gui的勾去掉。发现拖动是2个Box同时的,不能单独拖动。
  • 在Box(1)里加入Lean Selectable By Finger脚本,运行,发现Box(1)不能被拖动了,但是Box(2)可以被拖动,因为默认Lean Selectable By Finger脚本是未选中状态。所以Box(1)在未选中状态下是不可以被拖动的。
    在这里插入图片描述
  • 在运行状态下,我们勾下Self Selected,发现2个Box都可以被拖动了。接下来,就是利用这一个功能来实现Box单独拖动。
  • 接下来,使用LeanFingerDown + LeanSelectByFinger来实现触发LeanSelectableByFinger;在LeanTouch的对象里(基础组件),加入这2个脚本。(不是在Box层上)
    在这里插入图片描述
  • LeanFingerDown这里,需要去掉Gui的勾,OnFinger与LeanSelectByFinger脚本触发绑定起来。
    在这里插入图片描述

整体流程:Finger点击后,触发射线,射线射中有Selectabe的对象,使之打上勾。

  • 此时运行,发现在背景处拖动,Box不会别拖动,在Box1上拖动,Box2不会被动。继续拖动Box2,发现2个Box都同时拖动了。因为此时2个Box都已经打上Selectable的勾。接下来,要实现如何去勾
  • 在LeanSelectByFinger里,勾上Deselect With Nothing。当我点击背景时,2个Box的Selectable的勾会去掉。
    在这里插入图片描述
  • 此时,当我点击Box1拖动,再点下Bg,再点下Box2时,Box2可以单独拖动了。但是,若点Box1后直接点Box2,2个Box还是会同时被拖动。
  • 在Box的LeanSelectableByFinger里,配置Events,OnSelected Select Finger Up,当鼠标抬起时,运行自己的Deselect()函数。
    在这里插入图片描述
  • 此时已经实现了2个Box可以独立拖动了

步骤四:兼容ScrollView的拖动

  • 此时,发现当我拖动ScrollView框时,Box也同时拖动,而ScrollView的拖动响应就非常不灵敏了。

  • 接下来要实现,当拖动ScrollView时,Box不拖动,拖动Box的其他区域,Box仍然可以拖动;

  • 当运行时,去掉Selectable的勾,ScrollView就可正常拖动;若去掉ScrollRect的勾,拖动也不受影响;另外,LeanSelectByFinger有一个Layers,响应层的设置。使用这3个功能组合,实现兼容。

  • 先去掉2个Box上Image的RaycastTarget勾,此时2个Box都不能拖动了;当在ScrollView上反而可以拖动。
    在这里插入图片描述

  • 在Box层下,建立一个Drag,里面加入一些Image,颜色调成透明,布局在可以拖动的区域
    在这里插入图片描述

  • 把ScrollView设置一个新的Layer,可以取名为 CannotDrag
    在这里插入图片描述

  • 在LeanSelectByFinger里,把CannotDrag的勾去掉
    在这里插入图片描述

此时功能完成,祝福大家一切顺利~

猜你喜欢

转载自blog.csdn.net/qq_17523181/article/details/127692658