Navigation Drawer与BubblePicker视图重叠问题的排查与解决方案咨询

嘿，我之前在项目里混用自定义视图和Navigation Drawer时也踩过类似的重叠坑，结合你用的BubblePicker和Material Drawer，咱们来一步步分析问题~

可能的原因 #

• 布局层级（Z轴顺序）冲突：BubblePicker作为自定义动画视图，内部可能默认设置了较高的elevation（Android）或zPosition（iOS），或者它的父容器层级优先级比Navigation Drawer更高，导致气泡视图直接覆盖在抽屉上方。
• 布局结构嵌套错误：如果你的BubblePicker没有放在DrawerLayout的主内容区域内，而是和Navigation Drawer处于同一层级甚至位置错误，就很容易出现重叠。
• 库的特殊绘制逻辑：部分自定义视图（比如BubblePicker）会通过WindowManager直接把视图添加到窗口根布局，绕过了你自己的布局层级，这种情况下必然会覆盖抽屉。

解决方法 #

1. 调整层级优先级，让抽屉“浮”在上面 #

在Android中，直接通过elevation属性控制层级：

• 给Navigation Drawer设置更高的elevation值，确保它的层级高于BubblePicker：

  <com.google.android.material.navigation.NavigationView
      android:id="@+id/nav_view"
      android:layout_width="wrap_content"
      android:layout_height="match_parent"
      android:layout_gravity="start"
      android:elevation="16dp" <!-- 这个值要大于BubblePicker的elevation -->
      app:menu="@menu/activity_main_drawer" />
  

• 同时给BubblePicker设置较低的elevation：

  <com.igalata.bubblepicker.BubblePicker
      android:id="@+id/picker"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:elevation="4dp" />
  

如果是iOS，调整zPosition属性，让Drawer的zPosition大于BubblePicker即可。

2. 修正布局结构，确保层级正确 #

一定要让BubblePicker处于DrawerLayout的主内容区域（也就是DrawerLayout的第一个子视图），Navigation Drawer作为第二个子视图。正确的布局结构示例：

<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 主内容容器：放置BubblePicker -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.igalata.bubblepicker.BubblePicker
            android:id="@+id/picker"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </LinearLayout>

    <!-- Navigation Drawer -->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/drawer_menu" />

</androidx.drawerlayout.widget.DrawerLayout>

3. 临时隐藏BubblePicker（针对WindowManager绘制的情况） #

如果排查后发现BubblePicker是通过WindowManager直接添加到根布局的，那可以监听抽屉的开关状态，在抽屉打开时隐藏气泡视图，关闭时再显示：

drawerLayout.addDrawerListener(object : DrawerLayout.DrawerListener {
    override fun onDrawerSlide(drawerView: View, slideOffset: Float) {}
    override fun onDrawerOpened(drawerView: View) {
        // 抽屉打开时隐藏BubblePicker
        picker.visibility = View.GONE
    }
    override fun onDrawerClosed(drawerView: View) {
        // 抽屉关闭时恢复显示
        picker.visibility = View.VISIBLE
    }
    override fun onDrawerStateChanged(newState: Int) {}
})

4. 检查BubblePicker的配置参数 #

去翻一下BubblePicker的官方文档，看看有没有类似isOverlay或者控制视图嵌入模式的参数，如果有的话关闭覆盖模式，让它正常嵌入到你的布局层级中。

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