Android最簡單的側劃選單，DrawerLayout的使用

一、先看一下Demo的效果圖

Demo的效果圖.png

二、DrawerLayout的使用

很多APP都喜歡用側劃選單，比如QQ、酷狗等。但側劃選單怎麼做呢？牛的人自定義，差一點的就使用開源庫SlidingMenu。但Android有原生的，現在我們就拿原生的DrawerLayout來玩玩。

三、先看Activity關聯的佈局

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/dl"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--內容佈局-->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="#87845124"
            android:gravity="center"
            android:onClick="toggle"
            android:padding="12dp"
            android:text="Context"
            android:textSize="28dp" />
    </FrameLayout>


    <!--android:layout_gravity="start" 表示從左邊拉出，左邊的佈局-->
    <!--android:layout_gravity="end" 表示從右邊拉出，右邊的佈局-->


    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        android:background="#fff">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="right"
            android:textSize="18dp" />
    </FrameLayout>

</android.support.v4.widget.DrawerLayout>

1.設定屬性android:layout_gravity="start" 表示從左邊拉出，左邊的佈局

2. 設定屬性android:layout_gravity="end" 表示從右邊拉出，右邊的佈局

三、Activity的程式碼

public class DrawerLayoutActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drawer_layout);
        mDrawerLayout = findViewById(R.id.dl);
        try {
            // 去看原始碼就可以知道，mMinDrawerMargin 預設是64dp
            // 用反射來設定划動出來的距離 mMinDrawerMargin
            // 爽YY，可以定製UI設計的划動出來的距離
            Field mMinDrawerMarginField = DrawerLayout.class.getDeclaredField("mMinDrawerMargin");
            mMinDrawerMarginField.setAccessible(true);
            int minDrawerMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                    50, getResources().getDisplayMetrics());
            mMinDrawerMarginField.set(mDrawerLayout, minDrawerMargin);
        } catch (Exception e) {
            e.printStackTrace();
        }

        // 設定陰影顏色
        mDrawerLayout.setScrimColor(Color.parseColor("#55000000"));
        // 設定邊緣顏色
        mDrawerLayout.setDrawerShadow(new ColorDrawable(Color.parseColor("#22000000")), Gravity.RIGHT);
        mDrawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                // 這裡可以寫動畫
            }

            @Override
            public void onDrawerOpened(View drawerView) {
                // 開啟的時候，手勢可以划動
                mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED);
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                // 關閉的時候，手勢不可以划動
                mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
            }

            @Override
            public void onDrawerStateChanged(int newState) {

            }
        });
        // 預設設定，手勢不可以划動
        mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
    }

    public void toggle(View view) {
        // 如果沒有開啟，就去開啟
        if (!mDrawerLayout.isDrawerOpen(Gravity.RIGHT)) {
            mDrawerLayout.openDrawer(Gravity.RIGHT);
        }
    }
}

使用DrawerLayout優點：

1. 使用簡單，可定製強，划動出來的距離也可以通過反射設定。
2. 是Android原生的控制元件，不用關聯三方庫。