点击BottomNavigationView时如何展示自定义悬浮菜单？

以下为原生Android实现步骤，无需引入第三方依赖：

1. 准备悬浮菜单自定义布局 #

新建布局文件layout/custom_float_menu.xml，内部添加三个选项按钮，示例结构如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@drawable/menu_bg_radius"
    android:padding="8dp">
    <TextView
        android:id="@+id/opt_transfer"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:text="Transfer"
        android:gravity="center"/>
    <TextView
        android:id="@+id/opt_payment"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:text="Payment"
        android:gravity="center"/>
    <TextView
        android:id="@+id/opt_commerce"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:text="Commerce"
        android:gravity="center"/>
</LinearLayout>

可自行添加圆角、阴影、图标等样式匹配设计需求。

2. 监听BottomNavigationView的菜单项点击 #

在Activity/Fragment中给BottomNavigationView设置点击拦截逻辑，拦截你要触发悬浮菜单的对应菜单项的默认选中逻辑：

bottomNavigationView.setOnItemSelectedListener { item ->
    when(item.itemId) {
        R.id.menu_plus -> { // 替换为你要触发弹窗的菜单项ID
            showFloatMenu()
            false // 返回false表示不选中该菜单项，不会切换底部导航选中态
        }
        // 其他菜单项的正常逻辑
        else -> {
            // 处理其他导航切换
            true
        }
    }
}

3. 实现悬浮菜单弹出逻辑 #

用PopupWindow实现悬浮窗，计算显示位置到对应菜单项的正上方：

private fun showFloatMenu() {
    // 加载自定义菜单布局
    val menuView = LayoutInflater.from(this).inflate(R.layout.custom_float_menu, null)
    val popupWindow = PopupWindow(
        menuView,
        ViewGroup.LayoutParams.WRAP_CONTENT,
        ViewGroup.LayoutParams.WRAP_CONTENT,
        true // 点击外部自动关闭
    ).apply {
        setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
        // 可选：添加进入退出动画
        animationStyle = R.style.MenuFadeAnim
    }

    // 计算显示位置：获取要弹窗的菜单项的位置
    val menuItemView = bottomNavigationView.findViewById<View>(R.id.menu_plus)
    val location = IntArray(2)
    menuItemView.getLocationOnScreen(location)
    // x轴居中对齐菜单项，y轴显示在菜单项上方
    val x = location[0] + menuItemView.width / 2 - popupWindow.contentView.measuredWidth / 2
    val y = location[1] - popupWindow.contentView.measuredHeight

    popupWindow.showAtLocation(bottomNavigationView, Gravity.NO_GRAVITY, x, y)

    // 给菜单选项设置点击事件
    menuView.findViewById<TextView>(R.id.opt_transfer).setOnClickListener {
        // 处理转账逻辑
        popupWindow.dismiss()
    }
    menuView.findViewById<TextView>(R.id.opt_payment).setOnClickListener {
        // 处理支付逻辑
        popupWindow.dismiss()
    }
    menuView.findViewById<TextView>(R.id.opt_commerce).setOnClickListener {
        // 处理商户逻辑
        popupWindow.dismiss()
    }
}

注意事项 #

• 计算位置时需适配系统底部虚拟导航栏的高度，避免菜单被遮挡
• 可给PopupWindow添加 elevation 属性实现阴影效果，和设计图效果对齐
• 横竖屏切换时注意重建PopupWindow或者保存状态避免崩溃

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