大家在開發中可能會遇到這樣的需求，實現一個側滑選單，以前(long long ago)我們都是用SlidingMenu實現的！那個時候處理策劃還基本上都是自己判斷滑動距離的，後來MaterialDesign的時候使用NavigationView和DrawerLayout就能很簡單的實現側滑的功能。閒話就說到這裡。。。

本文的知識點

• NavigationView和DrawerLayout實現側滑效果(UI層面)
• 一些佈局檔案和API的說明
• 一些常見的錯誤處理

1.NavigationView和DrawerLayout實現側滑效果(UI層)

其實如果你比較懶的話，在建立Activity的時候，你可以不選擇那個空頁面的Activity，而像這樣選擇

這樣就可以直接建立一個相應的側滑頁面，不用去自己實現了。由於本文主要是為了講解關於怎麼去實現，所以這裡就自己去實現吧！

1.1 佈局檔案的實現

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimaryDark"
        app:layout_constraintBottom_toTopOf="@id/dl_content"
        app:layout_constraintTop_toTopOf="parent"
        app:navigationIcon="@mipmap/back_icon"
        app:title="導航選單的展示"
        app:titleTextColor="@android:color/white" />

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/dl_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.NavigationView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            app:headerLayout="@layout/nav_header"
            app:menu="@menu/menu_navation_drawer" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="假裝這裡有內容" />
        </LinearLayout>

    </android.support.v4.widget.DrawerLayout>
</LinearLayout>
複製程式碼

簡單說明一下：因為一會要演示返回按鈕的問題，所以這裡的佈局是把DrawerLayout放在了Toolbar的下面，如果你直接建立的話，側滑出來的選單會把Toolbar蓋住。

• 這裡要注意一個屬性，android:layout_gravity="left" 代表側滑的方向是從左側出來，這裡你可以左右各加一個，但是不能上下加。。。否則會出異常的！
• app:headerLayout="@layout/nav_header" NavigationView頂部顯示的佈局，這裡主要是為了處理相應的頭像什麼的
• app:menu="@menu/menu_navation_drawer" Navigation底部顯示的條目

別的就沒有什麼好說的了和其他控制元件的屬性都差不多。

1.2 頂部標頭檔案的實現

這個和寫平時的佈局都是一樣的。沒有什麼區別

<?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="wrap_content"
    android:gravity="center"
    android:background="#198672"
    android:minHeight="150dp"
    android:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher_round" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:textColor="@android:color/white"
        android:layout_marginTop="10dp"
        android:text="假裝這裡有一個標題" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:textColor="@android:color/white"
        android:text="假裝這裡又有一個標題" />
</LinearLayout>
複製程式碼

1.3 底部條目的佈局

這裡需要有關menu的知識了？如果你不懂可以看看我簡書的Android中menu的使用集錦，這裡就不講了。。。

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_camera"
            android:icon="@mipmap/ic_call_white_24dp"
            android:title="打電話" />
        <item
            android:id="@+id/nav_gallery"
            android:icon="@mipmap/ic_directions_bike_white_24dp"
            android:title="騎行" />
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@mipmap/ic_dialer_sip_white_24dp"
            android:title="又是打電話" />
        <item
            android:id="@+id/nav_manage"
            android:icon="@mipmap/ic_chat_bubble_outline_white_24dp"
            android:title="訊息" />
    </group>

    <item android:title="底部條目組">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@mipmap/ic_call_missed_outgoing_white_24dp"
                android:title="轉彎" />
            <item
                android:id="@+id/nav_send"
                android:icon="@mipmap/ic_import_export_white_24dp"
                android:title="好奇怪" />
        </menu>
    </item>
</menu>
複製程式碼

然後我們就可以'Run' app了。。。就會看到如下驚悚的場面！！！

2. 一些佈局檔案和API的說明

2.1 Navigation的一些屬性

佈局屬性

• app:itemBackground 指定選單項的的背景顏色
• app:itemTextColor 指定選單項的文字顏色
• app:itemTextAppearance 指定選單項的文字樣式，這裡引用的是一種樣式有關與樣式的使用可以參考

<style name="Theme.IconMenu">  
    <!--Menu/item attributes -->  
    <item name="android:itemTextAppearance">@android:style/TextAppearance.Widget.IconMenu.Item</item>  
    <item name="android:itemBackground">@android:drawable/menu_selector</item>  
    <item name="android:itemIconDisabledAlpha">?android:attr/disabledAlpha</item>  
    <item name="android:horizontalDivider">@android:drawable/divider_horizontal_dark</item>  
    <item name="android:verticalDivider">@android:drawable/divider_vertical_dark</item>  
    <item name="android:windowAnimationStyle">@android:style/Animation.OptionsPanel</item>  
    <item name="android:moreIcon">@android:drawable/ic_menu_more</item>  
    <item name="android:background">@null</item>  
</style> 
複製程式碼

• app:itemIconTint 指定選單項的圖示色彩

API

• addHeaderView(View view) 新增一個頭部，這個頭部可以新增多個
• getHeaderCount() 獲取頭目的數量
• getHeaderView(int index) 根據索引獲取頭部的佈局
• getItemBackground() 獲取頭部的背景
• getItemIconTintList() 獲取條目的集合
• getItemTextColor() 獲取條目的顏色
• getMenu() 獲取底部的menu物件
• removeHeaderView(View view) 溢位相應的頭目
• setCheckedItem(int id) 設定選擇條目
• setItemBackground(Drawable itemBackground) 設定條目的背景
• setItemBackgroundResource(int resId) 設定背景圖
• setItemIconTintList(ColorStateList tint) 設定圖示的集合
• setItemTextAppearance(int resId) 設定圖示的樣式
• setItemTextColor(ColorStateList textColor) 設定條目的顏色
• setNavigationItemSelectedListener(@Nullable OnNavigationItemSelectedListener listener) 這裡寫監聽的時候有一個注意事項，如果你設定了不起效果，請看後面的錯誤集錦。具體的寫法就像下面這樣：

        NavigationView nv_left = findViewById(R.id.nv_left);
        nv_left.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.nav_camera://條目的ID
                        Log.e(TAG, "onNavigationItemSelected: ");
                        break;
                }
                return true;
            }
        });
複製程式碼

這裡有個問題，設定了監聽之後，條目會有點選效果，並且不會在關閉相應的NavigationView。如果你返回true的話，條目會有相應的選中效果，注意一下就可以了。

2.2 DrawerLayout的一些屬性

API

• openDrawer(@EdgeGravity int gravity) closeDrawer(@EdgeGravity int gravity);代表開啟和關閉側滑出來的佈局，可選引數為：
  • Gravity.LEFT 左側的
  • Gravity.RIGHT 右側的
• addDrawerListener(DrawerListener listener) 處理Drawer的狀態的監聽，這裡主要有開啟、關閉、狀態改變的回撥相應的回撥寫的很清楚，這裡就不做過多講解了。至於可以做什麼就看你的思維了。。。
• setDrawerLockMode(@LockMode int lockMode) 啟用和禁用抽屜效果，可以呼叫這個方法操作相應的抽屜。有以下三種可選
  • LOCK_MODE_UNLOCKED 未知
  • LOCK_MODE_LOCKED_CLOSED 關閉
  • LOCK_MODE_LOCKED_OPEN 開啟
• getDrawerLockMode(@EdgeGravity int edgeGravity) 獲取抽屜的狀態
• isDrawerOpen(@EdgeGravity int drawerGravity) 判斷相應的抽屜是否是開啟狀態

基本上的API就這麼多，如果感興趣的可以研究以下DrawerView裡面提供的API。這裡就不多做解釋了。

3. 一些細節的頁面展示問題

3.1 DrawerLayout和Toolbar聯動的效果

效果大概是這個樣子的：

主要是看頂部左側的那個按鈕，主要是實現這個功能。這個功能主要是依託ActionBarDrawerToggle實現的，他聯動了DrawerLayout和Toolbar的關聯,看一下具體的程式碼實現吧！

        //這是帶Home旋轉開關按鈕
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, dl_content,
                toolbar,
                R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        dl_content.addDrawerListener(toggle);
        toggle.syncState();
複製程式碼

加上上面的程式碼就可以實現聯動了，但是你聯動的時候可能頂部的顏色是黑色的。反正我剛開始顯示的時候是黑色的。那麼怎麼把這個東西改成白色呢？只有修改相應的主題樣式了。。。像這個樣子

    <!-- 基類的主題新增中間那個內容 -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!--toolbar小漢堡樣式-->
        <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
    </style>

    <!--設定左側按鈕的顏色-->
    <style name="DrawerArrowStyle" parent="@style/Widget.AppCompat.DrawerArrowToggle">
        <item name="spinBars">true</item>
        <item name="color">@android:color/white</item>
    </style>
複製程式碼

3.2 處理返回按鈕

其實不使用上面的方法，可以通過isDrawerOpen(@EdgeGravity int drawerGravity)的判斷處理返回按鈕的邏輯問題。

4. 一些常見的問題集錦

4.1 java.lang.RuntimeException: Unable to start activity ComponentInfo異常的處理

關於這個異常，網上的說法很多，有說必須是AppCompat的主題、有說必須有windowNoTitle屬性，都沒有解決這個異常，最後發現如果你在主題中設定了<item name="android:textColorSecondary">#ffffff</item>屬性的話，就會報這個異常。刪了就好了！

4.2 setNavigationItemSelectedListener條目監聽無效的處理方法

這裡處理起來挺奇葩的，你只要把NavigationView放在DrawerLayout的最後面就可以了。監聽方法就會生效了。。。可能是一個BUG吧(如此值汗顏)！

---

基本上關於兩個控制元件的組合就這麼多，如果有什麼問題歡迎留言。

歡迎關注，你的支援是我最大的動力