发布于 由admin

DragGestureRecognizer：区分水平与垂直滑动的斜率阈值（Slop）判断

好的，我们开始今天的讲座。今天的主题是 DragGestureRecognizer：区分水平与垂直滑动的斜率阈值（Slop）判断。我们将深入探讨如何在iOS或Android等移动平台上，使用 DragGestureRecognizer 来区分用户的滑动操作是更偏向水平方向还是垂直方向，以及斜率阈值（Slop）在其中的作用。

1. 什么是 DragGestureRecognizer?

DragGestureRecognizer 是一种手势识别器，用于检测用户在屏幕上的拖动（滑动）操作。它可以提供拖动的起始位置、当前位置、速度等信息，使得开发者能够响应用户的拖动行为，例如移动视图、滚动内容、调整大小等。

在iOS中，它通常指 UIPanGestureRecognizer，而在Android中，则可以使用 GestureDetector 或直接处理 MotionEvent 来实现类似的功能。

2. 水平与垂直滑动判定的重要性

在许多应用场景中，我们需要区分用户的滑动方向。例如：

  • 横向滑动的页面切换： 类似新闻应用的左右滑动切换文章。
  • 纵向滑动的列表滚动： 类似邮件列表或通讯录的滚动。
  • 滑动解锁： 根据滑动方向和距离进行解锁。
  • 游戏中角色的移动： 水平滑动控制左右移动，垂直滑动控制跳跃或下蹲。

简单地说，区分水平和垂直滑动可以帮助我们更精确地理解用户的意图，并提供更符合用户期望的交互体验。

3. 斜率阈值（Slop）的概念

斜率阈值（Slop）是一个数值，用于定义滑动方向的“倾斜”程度。它决定了在多大程度上，一个滑动操作会被认为是更接近水平或垂直方向。

想象一下，如果用户以完全水平的方向滑动，那么滑动的轨迹是一条水平线，其斜率为 0。如果用户以完全垂直的方向滑动，那么滑动的轨迹是一条垂直线，其斜率是无穷大（或者在实际计算中，可以设定一个非常大的值）。

当用户的滑动轨迹既不完全水平也不完全垂直时，我们可以计算出滑动的斜率，并将其与斜率阈值进行比较。如果斜率小于阈值，我们认为滑动更偏向水平方向；如果斜率大于阈值，我们认为滑动更偏向垂直方向。

4. 斜率计算方法

斜率通常定义为纵向变化量（Δy）与横向变化量（Δx）的比值：

斜率 = Δy / Δx

在我们的场景中：

  • Δy = 当前触摸点的y坐标 – 起始触摸点的y坐标
  • Δx = 当前触摸点的x坐标 – 起始触摸点的x坐标

5. iOS (UIPanGestureRecognizer) 的实现

以下是使用 UIPanGestureRecognizer 在 iOS 中区分水平和垂直滑动的代码示例：

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var panView: UIView!
    var startLocation: CGPoint?
    let slopThreshold: CGFloat = 1.0 // 斜率阈值

    override func viewDidLoad() {
        super.viewDidLoad()

        let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePanGesture(_:)))
        panView.addGestureRecognizer(panGesture)
    }

    @objc func handlePanGesture(_ gesture: UIPanGestureRecognizer) {
        let translation = gesture.translation(in: view) // 获取手势在视图中的偏移量
        let currentLocation = gesture.location(in: view)

        switch gesture.state {
        case .began:
            startLocation = currentLocation
        case .changed:
            guard let start = startLocation else { return }

            let deltaX = currentLocation.x - start.x
            let deltaY = currentLocation.y - start.y

            // 计算斜率 (注意处理除数为0的情况)
            let slope = abs(deltaX) > 0 ? abs(deltaY / deltaX) : CGFloat.greatestFiniteMagnitude //避免除以0

            if slope < slopThreshold {
                // 水平滑动
                print("水平滑动")
                // 在这里执行水平滑动相关的操作，例如：
                // panView.center = CGPoint(x: panView.center.x + translation.x, y: panView.center.y)
            } else {
                // 垂直滑动
                print("垂直滑动")
                // 在这里执行垂直滑动相关的操作，例如：
                // panView.center = CGPoint(x: panView.center.x, y: panView.center.y + translation.y)
            }

            // 重要：重置 translation，避免累积偏移量
            gesture.setTranslation(.zero, in: view)

        case .ended, .cancelled:
            startLocation = nil
        default:
            break
        }
    }
}

代码解释：

  1. slopThreshold: 定义了斜率阈值。可以根据应用的需求调整该值。
  2. startLocation: 记录拖动开始时的位置。
  3. handlePanGesture(_:): 手势处理函数，在每次拖动事件发生时被调用。
  4. translation: 通过 gesture.translation(in: view) 获取手势在视图中的偏移量，但这里我们更关心起始点和当前点。
  5. 斜率计算: 计算 deltaX 和 deltaY，然后计算斜率。注意要处理 deltaX 为 0 的情况，避免除以 0 导致程序崩溃。 当deltaX为0时，我们将斜率设置为一个非常大的值，CGFloat.greatestFiniteMagnitude，使得它一定会被判定为垂直滑动。
  6. 方向判断: 将计算出的斜率与 slopThreshold 进行比较，判断滑动方向。
  7. 重置 translation: 非常重要的一步。每次处理完手势后，都需要调用 gesture.setTranslation(.zero, in: view) 来重置 translation，否则 translation 会累积偏移量，导致 panView 移动过快。

6. Android 的实现 (使用 GestureDetector)

以下是使用 GestureDetector 在 Android 中区分水平和垂直滑动的代码示例：

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.view.GestureDetectorCompat;

public class MainActivity extends AppCompatActivity implements GestureDetector.OnGestureListener {

    private GestureDetectorCompat mDetector;
    private TextView textView;
    private float slopThreshold = 1.0f; // 斜率阈值
    private float startX, startY;

    @SuppressLint("ClickableViewAccessibility")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        textView = findViewById(R.id.textView);
        mDetector = new GestureDetectorCompat(this, this);

        // 设置 OnTouchListener，将触摸事件传递给 GestureDetector
        textView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                return mDetector.onTouchEvent(event);
            }
        });
    }

    @Override
    public boolean onDown(MotionEvent event) {
        startX = event.getX();
        startY = event.getY();
        return true;
    }

    @Override
    public boolean onFling(MotionEvent event1, MotionEvent event2, float velocityX, float velocityY) {
        float deltaX = event2.getX() - startX;
        float deltaY = event2.getY() - startY;

        // 计算斜率
        float slope = Math.abs(deltaX) > 0 ? Math.abs(deltaY / deltaX) : Float.MAX_VALUE;

        if (slope < slopThreshold) {
            // 水平滑动
            textView.setText("水平滑动");
        } else {
            // 垂直滑动
            textView.setText("垂直滑动");
        }

        return true;
    }

    @Override
    public void onShowPress(MotionEvent event) {}

    @Override
    public boolean onSingleTapUp(MotionEvent event) {
        return false;
    }

    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
        return false;
    }

    @Override
    public void onLongPress(MotionEvent event) {}

}

代码解释：

  1. GestureDetectorCompat: 用于检测手势。
  2. slopThreshold: 定义了斜率阈值。
  3. startX, startY: 记录拖动开始时的位置。
  4. onDown(MotionEvent event): 在手势按下时被调用，记录起始位置。
  5. onFling(MotionEvent event1, MotionEvent event2, float velocityX, float velocityY): 在快速滑动（fling）时被调用，这里我们利用它来判断滑动方向。
  6. 斜率计算: 计算 deltaX 和 deltaY，然后计算斜率。 注意处理 deltaX 为 0 的情况，避免除以 0 导致程序崩溃。
  7. 方向判断: 将计算出的斜率与 slopThreshold 进行比较，判断滑动方向。
  8. onTouch(View v, MotionEvent event): 将触摸事件传递给 GestureDetector。

7. Android 的实现 (直接处理 MotionEvent)

除了使用 GestureDetector，你也可以直接在 onTouchEvent 中处理 MotionEvent，这样可以更灵活地控制手势识别的过程：

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private TextView textView;
    private float slopThreshold = 1.0f; // 斜率阈值
    private float startX, startY;

    @SuppressLint("ClickableViewAccessibility")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        textView = findViewById(R.id.textView);

        textView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        startX = event.getX();
                        startY = event.getY();
                        return true; // Consume the event
                    case MotionEvent.ACTION_MOVE:
                        float deltaX = event.getX() - startX;
                        float deltaY = event.getY() - startY;

                        // 计算斜率
                        float slope = Math.abs(deltaX) > 0 ? Math.abs(deltaY / deltaX) : Float.MAX_VALUE;

                        if (slope < slopThreshold) {
                            // 水平滑动
                            textView.setText("水平滑动");
                        } else {
                            // 垂直滑动
                            textView.setText("垂直滑动");
                        }
                        return true; // Consume the event
                    case MotionEvent.ACTION_UP:
                    case MotionEvent.ACTION_CANCEL:
                        // Reset start values or handle other end-of-gesture logic
                        break;
                }
                return false; // Don't consume the event by default
            }
        });
    }
}

代码解释：

  1. onTouch(View v, MotionEvent event): 直接处理触摸事件。
  2. ACTION_DOWN: 在手势按下时被调用，记录起始位置。
  3. ACTION_MOVE: 在手势移动时被调用，计算斜率并判断滑动方向。
  4. ACTION_UP, ACTION_CANCEL: 在手势抬起或取消时被调用，可以进行一些清理工作。

8. 选择合适的斜率阈值 (Slop Threshold)

选择合适的斜率阈值至关重要，它直接影响到滑动方向的判断准确性。

  • 较小的阈值: 会使得稍微偏离水平方向的滑动也被认为是垂直滑动，对水平滑动更加敏感。
  • 较大的阈值: 会使得稍微偏离垂直方向的滑动也被认为是水平滑动，对垂直滑动更加敏感。

以下是一些选择斜率阈值的建议：

  • 根据应用场景调整： 如果应用需要非常精确的水平滑动，可以设置较小的阈值。如果应用需要容忍一定的滑动偏差，可以设置较大的阈值。
  • 用户测试： 通过用户测试来确定最佳的阈值。让用户尝试不同的滑动操作，观察应用的响应，并根据用户的反馈进行调整。
  • 考虑屏幕尺寸和分辨率： 在不同的设备上，相同的斜率值可能对应不同的视觉角度。因此，需要根据屏幕尺寸和分辨率进行调整。通常，在大屏幕或高分辨率设备上，可以适当增加阈值。
  • 动态调整阈值： 在某些情况下，可以根据用户的滑动速度或滑动距离动态调整阈值。例如，如果用户滑动速度很快，可以适当增加阈值，以避免误判。

9. 一些需要注意的问题

  • 初始状态的抖动： 在拖动刚开始时，触摸点可能会有一些抖动，导致计算出的斜率不稳定。可以忽略拖动开始的一小段时间内的斜率值，或者使用滑动平均等方法来平滑斜率。
  • 边缘情况： 当 deltaX 或 deltaY 非常接近 0 时，计算出的斜率可能会出现异常。需要特别处理这些边缘情况，避免程序崩溃。
  • 性能优化： 手势识别是一个频繁触发的操作，需要注意性能优化，避免阻塞主线程。可以将一些计算密集型的操作放在后台线程中执行。
  • 用户体验： 在进行方向判断时，要尽量减少用户的等待时间，让用户感觉操作流畅自然。可以使用一些视觉反馈来提示用户当前的滑动方向。

10. 总结和一些思考

今天我们深入探讨了 DragGestureRecognizer 中斜率阈值在区分水平和垂直滑动中的作用。我们学习了斜率的计算方法，并分别在 iOS 和 Android 平台上实现了相关的代码示例。

区分水平和垂直滑动是移动应用开发中一个常见的需求，掌握这种技术可以帮助我们更好地理解用户的意图，并提供更符合用户期望的交互体验。斜率阈值是控制滑动方向判断精度的关键参数，需要根据实际应用场景和用户反馈进行调整。

在实际开发中，还可以结合其他因素，例如滑动速度、滑动距离、以及其他手势识别器的结果，来更准确地判断用户的意图。 例如，可以设置一个最小滑动距离，只有当滑动距离超过这个阈值时，才进行方向判断，避免误判。 此外，还可以使用机器学习等技术来自动学习用户的滑动习惯，并根据用户的习惯动态调整斜率阈值。

希望今天的讲座能够帮助你更好地理解 DragGestureRecognizer 和斜率阈值，并在实际开发中灵活运用。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注