开发点击可展开视图的带菜单圆形悬浮操作按钮（Circular Floating Action Button with Menu）

核心思路 #

通过控制隐藏视图的显示/隐藏，配合动画和遮罩层，实现点击FAB展开选项的交互效果。以下是基于Android的落地实现方案：

1. 布局文件实现 #

使用ConstraintLayout作为根布局，包含FAB、展开选项容器和半透明遮罩：

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

    <!-- 主内容区域 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="主页面内容"
        app:layout_constraintCenterInParent="true"/>

    <!-- 半透明遮罩（默认隐藏） -->
    <View
        android:id="@+id/maskView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#80000000"
        android:visibility="gone"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <!-- 展开选项容器（默认隐藏） -->
    <LinearLayout
        android:id="@+id/optionsContainer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:visibility="gone"
        android:padding="12dp"
        android:background="@drawable/rounded_bg"
        app:layout_constraintBottom_toTopOf="@id/fab"
        app:layout_constraintEnd_toEndOf="@id/fab"
        app:layout_marginBottom="16dp">

        <!-- 拍照选项 -->
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="12dp"
            android:gravity="center_vertical">
            <ImageView
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:src="@drawable/ic_camera"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="拍照"
                android:layout_marginStart="12dp"/>
        </LinearLayout>

        <!-- 相册选择选项 -->
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="12dp"
            android:gravity="center_vertical">
            <ImageView
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:src="@drawable/ic_gallery"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="从相册选择"
                android:layout_marginStart="12dp"/>
        </LinearLayout>

        <!-- 文档上传选项 -->
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="12dp"
            android:gravity="center_vertical">
            <ImageView
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:src="@drawable/ic_document"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="上传文档"
                android:layout_marginStart="12dp"/>
        </LinearLayout>
    </LinearLayout>

    <!-- 悬浮操作按钮 -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_margin="16dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

其中rounded_bg.xml是选项容器的圆角背景：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white"/>
    <corners android:radius="16dp"/>
    <stroke android:width="1dp" android:color="#EEEEEE"/>
</shape>

2. 逻辑控制（Kotlin） #

在Activity或Fragment中处理FAB和遮罩的点击事件，配合动画实现展开/收起效果：

import android.animation.AnimatorSet
import android.animation.ObjectAnimator
import android.os.Bundle
import android.view.View
import android.view.animation.AccelerateDecelerateInterpolator
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.floatingactionbutton.FloatingActionButton

class MainActivity : AppCompatActivity() {
    private lateinit var fab: FloatingActionButton
    private lateinit var optionsContainer: View
    private lateinit var maskView: View
    private var isExpanded = false

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        fab = findViewById(R.id.fab)
        optionsContainer = findViewById(R.id.optionsContainer)
        maskView = findViewById(R.id.maskView)

        // FAB点击切换展开/收起
        fab.setOnClickListener {
            toggleFabMenu()
        }

        // 点击遮罩收起菜单
        maskView.setOnClickListener {
            toggleFabMenu()
        }
    }

    private fun toggleFabMenu() {
        isExpanded = !isExpanded

        // 切换FAB图标（+变X）
        fab.setImageResource(if (isExpanded) R.drawable.ic_close else R.drawable.ic_add)

        // 组合动画：容器位移+遮罩淡入淡出
        val animatorSet = AnimatorSet()
        val containerAnim = if (isExpanded) {
            ObjectAnimator.ofFloat(optionsContainer, "translationY", 40f, 0f).apply {
                duration = 300
                interpolator = AccelerateDecelerateInterpolator()
            }
        } else {
            ObjectAnimator.ofFloat(optionsContainer, "translationY", 0f, 40f).apply {
                duration = 300
                interpolator = AccelerateDecelerateInterpolator()
            }
        }

        val maskAnim = if (isExpanded) {
            ObjectAnimator.ofFloat(maskView, "alpha", 0f, 1f).apply { duration = 300 }
        } else {
            ObjectAnimator.ofFloat(maskView, "alpha", 1f, 0f).apply { duration = 300 }
        }

        animatorSet.playTogether(containerAnim, maskAnim)
        animatorSet.start()

        // 切换视图可见性
        optionsContainer.visibility = if (isExpanded) View.VISIBLE else View.GONE
        maskView.visibility = if (isExpanded) View.VISIBLE else View.GONE
    }
}

3. 细节优化建议 #

• 给每个选项添加独立点击事件，点击后自动收起菜单
• 调整动画时长和插值器，让交互过渡更顺滑
• 适配小屏设备，确保选项容器不会超出屏幕范围
• 给选项添加Ripple点击反馈，提升交互质感

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