Android中能否实现目标样式的FloatingActionButton？求实现方案

能否实现？ #

完全可以实现你想要的这种带白色背景选项的浮动菜单效果，这属于扩展型浮动操作菜单的范畴，通过自定义样式结合Material Design组件就能完成。

具体实现步骤 #

1. 引入Material组件依赖 #

确保项目中已添加Material Design组件依赖（Module级别的build.gradle文件）：

implementation 'com.google.android.material:material:1.11.0' // 可替换为最新稳定版本

2. 自定义菜单选项的样式 #

首先创建菜单选项的背景drawable（res/drawable/white_menu_bg.xml），实现白色圆角效果：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white" />
    <corners android:radius="8dp" />
    <stroke android:width="1dp" android:color="@color/grey_200" /> <!-- 可选边框，增强层次感 -->
</shape>

接着创建单个菜单选项的布局文件（res/layout/item_floating_menu.xml）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/white_menu_bg"
    android:paddingHorizontal="16dp"
    android:paddingVertical="12dp"
    android:orientation="horizontal"
    android:gravity="center_vertical">

    <ImageView
        android:id="@+id/iv_menu_icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/ic_menu_icon" />

    <TextView
        android:id="@+id/tv_menu_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="菜单选项"
        android:textColor="@color/black"
        android:layout_marginStart="12dp"
        android:textSize="14sp" />
</LinearLayout>

3. 两种实现菜单弹出的方式 #

方式一：使用PopupMenu快速实现

给主浮动按钮设置点击事件，弹出自定义样式的PopupMenu：

val mainFab = findViewById<FloatingActionButton>(R.id.fab_main)
mainFab.setOnClickListener {
    val popupMenu = PopupMenu(this, mainFab, Gravity.END)
    popupMenu.menuInflater.inflate(R.menu/floating_menu_items, popupMenu.menu)

    // 处理菜单点击逻辑
    popupMenu.setOnMenuItemClickListener { menuItem ->
        when (menuItem.itemId) {
            R.id.menu_item_1 -> { /* 执行对应操作 */ }
            R.id.menu_item_2 -> { /* 执行对应操作 */ }
            R.id.menu_item_3 -> { /* 执行对应操作 */ }
        }
        true
    }

    // 配置PopupMenu的样式
    popupMenu.popupWindow.apply {
        setBackgroundDrawable(ContextCompat.getDrawable(context, R.drawable.white_menu_bg))
        elevation = 8f
        isOutsideTouchable = true
    }

    popupMenu.show()
}

对应的菜单资源文件（res/menu/floating_menu_items.xml）：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_item_1"
        android:title="选项1"
        android:icon="@drawable/ic_item_1"/>
    <item
        android:id="@+id/menu_item_2"
        android:title="选项2"
        android:icon="@drawable/ic_item_2"/>
    <item
        android:id="@+id/menu_item_3"
        android:title="选项3"
        android:icon="@drawable/ic_item_3"/>
</menu>

方式二：使用BottomSheetDialog实现更规整的底部菜单

如果希望菜单从底部弹出且样式更统一，可以用BottomSheetDialog：

mainFab.setOnClickListener {
    val bottomSheetDialog = BottomSheetDialog(this)
    val dialogView = layoutInflater.inflate(R.layout/layout_bottom_sheet_menu, null)
    bottomSheetDialog.setContentView(dialogView)

    // 绑定菜单列表
    val menuRecyclerView = dialogView.findViewById<RecyclerView>(R.id.rv_menu_list)
    menuRecyclerView.adapter = FloatingMenuAdapter(menuDataList) // 自定义Adapter加载数据
    menuRecyclerView.layoutManager = LinearLayoutManager(this)

    bottomSheetDialog.show()
}

4. 调整主浮动按钮样式 #

如果需要修改主按钮的外观，直接在XML中配置：

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab_main"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    app:backgroundTint="@color/primary_color"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"/>

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