Android入門教程 | DrawerLayout 側滑欄

DrawerLayout 是實現了側滑選單效果的控制元件。

DawerLayout 分為側邊選單和主內容區兩部分：

• 主內容區要放在側邊選單前面，還有就是主內容區最好以 DrawerLayout 最好為介面的根佈局，否則可能會出現觸控事件被遮蔽的問題。
• 側滑選單部分的佈局必須設定 layout_gravity 屬性，表示側滑選單是在左邊還是右邊，設定了 layout_gravity="start/left" 的檢視才會被認為是側滑選單。

使用的注意事項

• 主內容檢視一定要是 DrawerLayout 的第一個子檢視
• 主內容檢視寬度和高度需要 match_parent
• 必須顯示指定側滑檢視的 android:layout_gravity 屬性 android:layout_gravity = "start" 時，從左向右滑出選單 android:layout_gravity = "end"時，從右向左滑出選單 不推薦使用left和right!!!
• 側滑檢視的寬度以dp為單位，不建議超過320dp(為了總能看到一些主內容檢視)
  設定側滑事件：mDrawerLayout.setDrawerListener(DrawerLayout.DrawerListene

DrawerLayout 示例：

要使用 DrawerLayout，可以在 layout xml 檔案中將 DrawerLayout 設定為根檢視。

從左邊滑出的抽屜檢視（側滑欄）

一個簡單的從左邊滑出側滑欄的例子。

側滑欄滑出後，後面的檢視會有個陰影。

layout 檔案

<?xml version="1.0" encoding="utf-8"?><androidx.drawerlayout.widget.DrawerLayout xmlns:android="
    xmlns:tools="
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:openDrawer="start">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="我是主頁" />
    </RelativeLayout>
    <RelativeLayout
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#ffffff">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="我是側滑欄" />
    </RelativeLayout></androidx.drawerlayout.widget.DrawerLayout>

效果：

需要注意的是，DrawerLayout 要設定 tools:openDrawer="start"；而且側滑欄layout要設定 android:layout_gravity="start"。

如果改成 tools:openDrawer="end"，側滑欄 layout 要設定 android:layout_gravity="end"。側滑欄可以從右邊滑出。

現在側邊欄放的是RelativeLayout。 也可以放一個RecyclerView。

抽屜出來時推動頁面

監聽側滑欄的滑動事件，使用 ActionBarDrawerToggle。側滑欄滑出時，在 onDrawerSlide方法中計算出滑動的距離。 然後主檢視設定水平相對偏移距離 setTranslationX即可。

可在activity的onCreate方法執行配置操作

DrawerLayout root = findViewById(R.id.root);
    final View contentView = findViewById(R.id.content_field);
    ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this, root, android.R.string.yes, android.R.string.cancel) {
        @Override
        public void onDrawerSlide(View drawerView, float slideOffset) {
            super.onDrawerSlide(drawerView, slideOffset);            float slideX = drawerView.getWidth() * slideOffset;
            contentView.setTranslationX(slideX);
        }
    };
    root.addDrawerListener(actionBarDrawerToggle);

改變滑出時的陰影

使用 DrawerLayout 的 setScrimColor方法，改變陰影顏色。預設的陰影顏色是  DEFAULT_SCRIM_COLOR = 0x99000000。

DrawerLayout root = findViewById(R.id.root);
root.setScrimColor(Color.TRANSPARENT);

鎖定 DrawerLayout

root.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED); // 解鎖
root.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED); // 不檢測從左到右的滑動動作