如何让关闭状态的Navigation Drawer置于布局底层并保证交互正常?
你的核心问题是布局层级和DrawerLayout的使用方式错误。DrawerLayout的设计要求它作为根布局,内部第一个子View是页面主内容区域,第二个子View是侧边栏导航(NavigationView)。你现在把DrawerLayout和WebView平级放在ConstraintLayout里,导致层级覆盖,要么WebView被DrawerLayout挡住点不了,要么DrawerLayout被WebView盖住无法触发。
修改后的正确布局代码
<?xml version="1.0" encoding="utf-8"?> <androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/my_drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" tools:ignore="HardcodedText,SpeakableTextPresentCheck"> <!-- 主内容区域:包含WebView和所有悬浮按钮 --> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent"> <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"> </WebView> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/boReFAB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="16dp" android:layout_marginBottom="16dp" android:clickable="true" android:contentDescription="@string/add_to_bookmarks" android:focusable="true" android:translationY="-480px" android:visibility="gone" app:backgroundTint="#03A9F4" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:srcCompat="@android:drawable/btn_star_big_off" tools:ignore="SpeakableTextPresentCheck,ImageContrastCheck" /> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/baHoFAB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="16dp" android:layout_marginBottom="16dp" android:clickable="true" android:contentDescription="@string/go_back_home" android:focusable="true" android:translationY="-320px" android:visibility="gone" app:backgroundTint="#E91E63" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:srcCompat="@android:drawable/ic_menu_gallery" tools:ignore="SpeakableTextPresentCheck" /> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/shLiFAB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="16dp" android:layout_marginBottom="16dp" android:clickable="true" android:contentDescription="@string/go_to_the_shopping_list" android:focusable="true" android:translationY="-160px" android:visibility="gone" app:backgroundTint="#E91E63" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:srcCompat="@drawable/baseline_view_list_24" tools:ignore="SpeakableTextPresentCheck" /> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/moBuFAB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="16dp" android:layout_marginBottom="16dp" android:clickable="true" android:contentDescription="@string/show_buttons" android:focusable="true" app:backgroundTint="#E91E63" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:srcCompat="@android:drawable/ic_menu_add" tools:ignore="SpeakableTextPresentCheck" /> </androidx.constraintlayout.widget.ConstraintLayout> <!-- 侧边栏导航 --> <com.google.android.material.navigation.NavigationView android:id="@+id/navView" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:menu="@menu/navigation_menu" /> </androidx.drawerlayout.widget.DrawerLayout>
关键修改点说明
- 把DrawerLayout设为根布局:这是DrawerLayout的标准用法,它会自动管理主内容和侧边栏的显示层级与交互。
- 主内容放在DrawerLayout的第一个子节点:包含WebView和所有FAB的ConstraintLayout作为主内容区域,确保它能正常接收点击事件。
- NavigationView作为DrawerLayout的第二个子节点:并设置
android:layout_gravity="start",让它能从左侧滑出,且不会挡住主内容区域的交互。
这样修改后,WebView可以正常接收点击,同时Navigation Drawer也能通过滑动或代码触发正常打开。
内容的提问来源于stack exchange,提问作者Louiskoder
相关产品推荐
相关产品推荐

