如何在现有视图中添加可移动FloatingActionButton并解决布局移位问题？

你遇到的布局偏移问题，大概率是因为FloatingActionButton（简称FAB）的默认布局规则（比如依赖父布局位置时挤压了其他View）导致的。下面给你几个实用的可选方案，既能实现可移动的FAB，又不会影响原有布局：

方案1：用ConstraintLayout作为根布局（最推荐） #

ConstraintLayout可以让你精准控制每个View的位置，FAB和其他布局完全独立约束，不会互相干扰。

XML布局示例 #

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 你的原有布局，按原来的约束逻辑编写即可 -->
    <LinearLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent">
        <!-- 原有内容 -->
    </LinearLayout>

    <!-- 可移动的FAB -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/movable_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        android:layout_margin="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

实现可移动逻辑（Kotlin示例） #

在Activity/Fragment中给FAB添加触摸事件：

val fab = findViewById<FloatingActionButton>(R.id.movable_fab)
var lastX = 0f
var lastY = 0f

fab.setOnTouchListener { view, event ->
    when (event.action) {
        MotionEvent.ACTION_DOWN -> {
            lastX = event.rawX - view.left
            lastY = event.rawY - view.top
            true
        }
        MotionEvent.ACTION_MOVE -> {
            val left = (event.rawX - lastX).toInt()
            val top = (event.rawY - lastY).toInt()
            val right = left + view.width
            val bottom = top + view.height
            // 限制FAB不能超出屏幕范围
            view.layout(left, top, right, bottom)
            true
        }
        else -> false
    }
}

方案2：用FrameLayout作为根布局（最简单） #

FrameLayout是层叠布局，FAB会直接放在原有布局的上层，完全不会影响下面的View位置。

XML布局示例 #

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 你的原有布局，直接嵌套即可 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- 原有内容 -->
    </LinearLayout>

    <!-- 可移动的FAB -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/movable_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"/>

</FrameLayout>

可移动逻辑和方案1完全一致，直接复用即可。

方案3：用CoordinatorLayout自定义Behavior（Material Design风格） #

如果你的项目遵循Material Design规范，推荐用CoordinatorLayout配合自定义Behavior，这样FAB的移动更符合设计逻辑，还能和Snackbar等组件联动。

XML布局示例 #

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 你的原有布局 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- 原有内容 -->
    </LinearLayout>

    <!-- 可移动的FAB，指定自定义Behavior -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/movable_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        android:layout_margin="16dp"
        app:layout_behavior=".MovableFabBehavior"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

自定义Behavior代码（Kotlin示例） #

class MovableFabBehavior(context: Context, attrs: AttributeSet) : FloatingActionButton.Behavior(context, attrs) {
    private var lastX = 0f
    private var lastY = 0f

    override fun onTouchEvent(parent: CoordinatorLayout, child: FloatingActionButton, event: MotionEvent): Boolean {
        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                lastX = event.rawX - child.left
                lastY = event.rawY - child.top
                return true
            }
            MotionEvent.ACTION_MOVE -> {
                val left = (event.rawX - lastX).toInt()
                val top = (event.rawY - lastY).toInt()
                val right = left + child.width
                val bottom = top + child.height
                // 限制FAB在父布局内移动
                child.layout(left, top, right, bottom)
                return true
            }
        }
        return super.onTouchEvent(parent, child, event)
    }
}

这些方案都能避免FAB干扰原有布局的位置，你可以根据项目结构和需求选择最合适的~

内容的提问来源于stack exchange，提问作者john