Android 实现带自定义布局的完全透明Navigation Drawer

1. 配置主布局中的NavigationView #

在包含DrawerLayout的主布局文件中，对NavigationView做如下设置：

• 背景设为透明：android:background="@android:color/transparent"
• 取消阴影效果：app:elevation="0dp"
• 移除默认的menu和header配置（删除app:menu和app:headerLayout属性）
• 将自定义布局直接嵌套或通过include标签引入到NavigationView内部

示例布局代码：

<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"
    android:fitsSystemWindows="true">

    <!-- 主内容区域 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- 你的主界面内容 -->
    </LinearLayout>

    <!-- 自定义NavigationView -->
    <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:background="@android:color/transparent"
        app:elevation="0dp"
        android:fitsSystemWindows="true">

        <!-- 引入自定义Drawer布局 -->
        <include layout="@layout/custom_navigation_drawer" />

    </com.google.android.material.navigation.NavigationView>

</androidx.drawerlayout.widget.DrawerLayout>

2. 创建自定义Drawer布局 #

新建XML布局文件（例如res/layout/custom_navigation_drawer.xml），按照需求设计完整的UI结构，完全替代默认的header和menu。

示例自定义布局：

<?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="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    android:background="@color/semi_transparent_black"> <!-- 可根据需求调整背景，这里用半透明示例 -->

    <!-- 自定义头部区域 -->
    <ImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/user_avatar"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="32dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="张三"
        android:textSize="18sp"
        android:textColor="@color/white"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="8dp"/>

    <!-- 自定义菜单选项 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginTop="32dp">

        <TextView
            android:id="@+id/tv_home"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:text="我的主页"
            android:textColor="@color/white"
            android:gravity="center_vertical"
            android:paddingStart="16dp"
            android:clickable="true"
            android:focusable="true"/>

        <TextView
            android:id="@+id/tv_settings"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:text="设置"
            android:textColor="@color/white"
            android:gravity="center_vertical"
            android:paddingStart="16dp"
            android:clickable="true"
            android:focusable="true"/>

        <!-- 更多自定义选项 -->
    </LinearLayout>

</LinearLayout>

3. 绑定点击事件（可选） #

如果自定义布局中的控件需要交互，在Activity或Fragment中为其设置点击监听器：

// Java示例
NavigationView navView = findViewById(R.id.nav_view);
TextView tvHome = navView.findViewById(R.id.tv_home);
TextView tvSettings = navView.findViewById(R.id.tv_settings);

tvHome.setOnClickListener(v -> {
    // 处理主页点击事件
    drawerLayout.closeDrawer(GravityCompat.START);
});

tvSettings.setOnClickListener(v -> {
    // 处理设置点击事件
    drawerLayout.closeDrawer(GravityCompat.START);
});

// Kotlin示例
val navView = findViewById<NavigationView>(R.id.nav_view)
val tvHome = navView.findViewById<TextView>(R.id.tv_home)
val tvSettings = navView.findViewById<TextView>(R.id.tv_settings)

tvHome.setOnClickListener {
    // 处理主页点击事件
    drawerLayout.closeDrawer(GravityCompat.START)
}

tvSettings.setOnClickListener {
    // 处理设置点击事件
    drawerLayout.closeDrawer(GravityCompat.START)
}

注意事项 #

• 确保项目已引入Material Components库，在Module级别的build.gradle中添加依赖：

  implementation 'com.google.android.material:material:1.9.0'
  

• 若需要适配状态栏，确保android:fitsSystemWindows="true"属性在DrawerLayout和NavigationView上正确设置，避免UI被状态栏遮挡。

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