android 随意拖拽可吸边的悬浮View

原创

mob64ca12f6e9a0 2024-09-13 05:05:00 ©著作权

文章标签 Android 拖拽 xml 文章分类 Android 移动开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f6e9a0的原创作品，请联系作者获取转载授权，否则将追究法律责任

实现 Android 随意拖拽可吸边的悬浮View

在 Android 开发中，制作一个支持拖拽和吸边的悬浮 View 是一个非常有趣且实用的任务。本文将引导你一步步实现这一功能，确保你能够掌握基本原理和实现步骤。下面是本教程的主要内容和流程：

流程概述

步骤	描述
1. 创建一个新的 Android 项目	在 Android Studio 中创建一个新项目
2. 设计布局	在 XML 中设计悬浮 View 的布局
3. 实现拖拽功能	使用 GestureDetector 实现拖拽处理
4. 实现吸边效果	根据当前的坐标位置实现吸边功能
5. 测试与优化	进行测试，确保功能正常，进行必要的优化

flowchart TD
    A[创建一个新的 Android 项目] --> B[设计布局]
    B --> C[实现拖拽功能]
    C --> D[实现吸边效果]
    D --> E[测试与优化]

步骤详解

1. 创建一个新的 Android 项目

首先，在 Android Studio 中创建一个新的项目，选择 "Empty Activity" 模板，命名项目，例如 "DraggableFloatingView"。

2. 设计布局

接下来，你需要设计悬浮 View 的布局。这可以通过 res/layout/activity_main.xml 文件完成。以下是一个简单的布局示例：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/floatingView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:src="@drawable/ic_launcher_foreground"  <!-- 悬浮 View 的背景图标 -->
        android:padding="16dp"
        android:clickable="true"/>
        
</RelativeLayout>

3. 实现拖拽功能

在 MainActivity 中实现 View 的拖拽功能。首先，获取 ImageView 的引用并设定手势检测器。

import android.content.Context;
import android.graphics.Point;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;

public class MainActivity extends AppCompatActivity {

    private ImageView floatingView;  // 悬浮 View
    private float dX, dY;  // 存储 X 和 Y 偏移
    private RelativeLayout mainLayout; // 主布局

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

        floatingView = findViewById(R.id.floatingView);
        mainLayout = findViewById(R.id.mainLayout);

        // 监听触摸事件
        floatingView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent event) {
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        dX = view.getX() - event.getRawX();  // 获取 X 的偏移
                        dY = view.getY() - event.getRawY();  // 获取 Y 的偏移
                        break;
                    case MotionEvent.ACTION_MOVE:
                        // 设置悬浮 View 的位置
                        view.animate()
                            .x(event.getRawX() + dX)  // 新 X 坐标
                            .y(event.getRawY() + dY)  // 新 Y 坐标
                            .setDuration(0)            // 不需要动画
                            .start();
                        break;
                    default:
                        return false;
                }
                return true; // 处理事件
            }
        });
    }
}

代码解析：

dX 和 dY 用于记录触摸点与视图的偏移量。
ACTION_DOWN 用于获取放下手指时的触摸位置。
ACTION_MOVE 则实现了更新视图位置的逻辑。

4. 实现吸边效果

现在，让我们添加吸边效果。当悬浮 View 靠近屏幕边缘时，它将自动吸附到该边缘。

private static final int SNAP_RANGE = 100; // 吸附范围

private void snapToEdges(View view) {
    int screenWidth = getResources().getDisplayMetrics().widthPixels; // 屏幕宽度
    int screenHeight = getResources().getDisplayMetrics().heightPixels; // 屏幕高度
    float x = view.getX();
    float y = view.getY();

    // 判断是否靠近左边
    if (x < SNAP_RANGE) {
        view.animate().x(0).setDuration(200).start();
    }
    // 判断是否靠近右边
    else if (x > screenWidth - view.getWidth() - SNAP_RANGE) {
        view.animate().x(screenWidth - view.getWidth()).setDuration(200).start();
    }
    // 判断是否靠近上边
    else if (y < SNAP_RANGE) {
        view.animate().y(0).setDuration(200).start();
    }
    // 判断是否靠近下边
    else if (y > screenHeight - view.getHeight() - SNAP_RANGE) {
        view.animate().y(screenHeight - view.getHeight()).setDuration(200).start();
    }
}

// 在触摸事件的 `ACTION_UP` 中调用吸附方法
case MotionEvent.ACTION_UP:
    snapToEdges(view); // 吸附
    break;