Android 側滑選單實作：DrawerLayout 透明背景與非覆蓋模式

需求：側滑選單展開時，主內容區不被覆蓋並呈現透明/半透明效果。

核心元件：DrawerLayout

Google 官方 androidx.drawerlayout.widget.DrawerLayout 已內建支援。

關鍵屬性

• android:fitsSystemWindows="true"：配合狀態列/導航列佈局。
• 抽屜視圖設定 android:layout_gravity="start"。

實現透明/半透明主內容

<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <!-- 主內容區 -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white" />

    <!-- 側滑選單 -->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#80000000"  <!-- 50% 黑色半透明 -->
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawer_menu" />
</androidx.drawerlayout.widget.DrawerLayout>

動態調整主內容透明度（可選）

drawerLayout.addDrawerListener(object : DrawerLayout.DrawerListener {
    override fun onDrawerSlide(drawerView: View, slideOffset: Float) {
        // slideOffset: 0 關閉 → 1 完全展開
        contentFrame.alpha = 1 - slideOffset * 0.3f  // 主內容淡出 30%
        contentFrame.translationX = drawerView.width * slideOffset * 0.5f  // 輕微右移
    }
    override fun onDrawerOpened(drawerView: View) {}
    override fun onDrawerClosed(drawerView: View) {}
    override fun onDrawerStateChanged(newState: Int) {}
})

常見坑點