Android开发：如何在垂直ScrollView上方添加固定悬浮按钮（仿Gmail App）

嗨，这个需求我之前也做过，和Gmail的发件按钮效果完全一致，核心就是别把按钮放进ScrollView里，让它和ScrollView处在同一个父布局下，直接固定位置就行。我给你详细说下实现方式：

ScrollView的子控件会随着滚动一起移动，所以要让按钮固定不动，必须让它成为ScrollView的「同级元素」，由父布局来控制它的位置，这样滚动内容时按钮完全不受影响。

现在Android开发里ConstraintLayout是最灵活的布局，用它来实现固定位置的按钮非常方便，代码示例如下：

<?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">

    <!-- 可滚动的内容区域 -->
    <ScrollView
        android:id="@+id/scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- 这里放你的滚动内容，用LinearLayout包裹各种控件即可 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="16dp">

            <!-- 示例长内容，实际替换成你的业务布局 -->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="这是可滚动的内容行1"
                android:textSize="18sp"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="这是可滚动的内容行2"
                android:textSize="18sp"/>
            <!-- 可以多加几个TextView模拟长页面 -->

        </LinearLayout>
    </ScrollView>

    <!-- 悬浮按钮：固定在右下角 -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_email" <!-- 替换成你的发邮件图标 -->
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

如果你还在使用RelativeLayout，也能轻松实现，代码如下：

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

    <ScrollView
        android:id="@+id/scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- 滚动内容区域，同上 -->
    </ScrollView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_margin="16dp"
        android:src="@drawable/ic_email"/>

</RelativeLayout>

按钮的点击逻辑和普通控件完全一样，在Activity或Fragment里绑定事件即可：

Kotlin示例 #

val fabSend = findViewById<FloatingActionButton>(R.id.fab_send)
fabSend.setOnClickListener {
    // 这里写点击后的逻辑，比如跳转到发邮件页面
    Toast.makeText(this, "准备发邮件啦", Toast.LENGTH_SHORT).show()
}

Java示例 #

FloatingActionButton fabSend = findViewById(R.id.fab_send);
fabSend.setOnClickListener(v -> {
    // 处理点击事件
    Toast.makeText(MainActivity.this, "准备发邮件啦", Toast.LENGTH_SHORT).show();
});

• 如果你用Material Design的FAB，记得在项目的build.gradle(Module level)里添加依赖（版本可以根据你的项目调整）：

  implementation 'com.google.android.material:material:1.9.0'
  

• 按钮的layout_margin可以根据设计需求调整，避免按钮紧贴屏幕边缘影响体验
• 如果需要给按钮添加动画（比如滚动时显示/隐藏），可以监听ScrollView的滚动事件来实现，但基础的固定效果用上面的代码就足够了

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