側滑選單已經司空見慣了，以前大多數app都使用slidingMenu,也有很多使用自定義的控制元件實現,後面有了support包的drawerLayout,這篇部落格裡我們使用Design包裡的NavigationView配合DrawerLayout實現側滑選單,效果如下(只關注側滑部分就好，其他部分後面陸續更新):

使用方法:

同DrawerLayout一樣，xml裡分主介面佈局，側滑選單佈局,

activity_main.xml:

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawerLayout"
 
  xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.chan.iwfu_md_news.MainActivity">

    <!--主內容區-->
 


    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </FrameLayout>


    <!--選單區-->

    <android.support.design.widget.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="wrap_content"
        android:layout_height
 
="match_parent"
        android:layout_gravity="left"
        android:choiceMode="singleChoice"
        android:clickable="true"
        app:headerLayout="@layout/navigation_header"
        app:itemTextColor="#ffffff">

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

要給這個NavigationView設定一個選單檔案,用以在側滑選單顯示選單項，所以我們先建立一個menu檔案:

navigation_menu:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:id="@+id/group1"
        android:checkableBehavior="single">

        <item
            android:checked="true"
            android:icon="@mipmap/xiaoxi"
            android:id="@+id/menu_item1_group1"
            android:title="新聞"/>
        <item
            android:icon="@mipmap/shoucang"
            android:id="@+id/menu_item2_group1"
            android:title="訊息"/>
        <item
            android:icon="@mipmap/youxi"
            android:id="@+id/menu_item3_group1"
            android:title="遊戲"/>

    </group>

    <group android:id="@+id/group2"
           android:checkableBehavior="single">

        <item
            android:icon="@mipmap/tucao"
            android:id="@+id/menu_item1_group2"
            android:title="吐個槽"/>
        <item
            android:icon="@mipmap/gengduo"
            android:id="@+id/menu_item2_group2"
            android:title="更多"/>

    </group>
</menu>

menu檔案的每個item表示一個選單項，可以通過group給選單項分組，每組設定id可以在側滑選單裡顯示出分割線。group設定android:checkableBehavior表示選單項選擇模式。

有了這個選單檔案，接下來將這個選單檔案設定給NavigationView,可以通過xml標籤.

 <android.support.design.widget.NavigationView
         ...
        app:menu="@menu/navigation_menu"/>

也可以通過程式碼:

navigationView.inflateMenu(R.menu.navigation_menu);

給這個NavigationView新增一個頭部佈局:
先寫我們的頭佈局檔案:

header_layout.xml:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/iv_navigation_header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:src="@drawable/banzang"/>

    <TextView
        android:layout_centerHorizontal="true"
        android:layout_alignBottom="@id/iv_navigation_header"
        android:id="@+id/tv_des_navigation_header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="龍啊吞噬我的敵人吧!!"
        android:textColor="#ffffff"
        android:textSize="15sp"/>

    <TextView
        android:id="@+id/tv_name_navigation_header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="半藏"
        android:layout_above="@id/tv_des_navigation_header"
        android:layout_centerHorizontal="true"
        android:textColor="#ffffff"
        android:textSize="25sp"/>



</RelativeLayout>

然後在設定頭元件:

<android.support.design.widget.NavigationView
          ...
        app:headerLayout="@layout/navigation_header"/>

設定選單項的文字顏色:

app:itemTextColor="#ffffff"

這時候已經可以通過側拉拉出NavigationView了，不過只能通過側拉，效果不太友好，接下來我們在ToolBar新增一個用於切換Navigation拉出和回收的按鈕,不熟悉toolBar的點這裡:

，如圖所示。

在MainActivity中設定:

ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(
                this, drawerLayout, toolbar, R.string.open_drawer,
                R.string.close_drawer);
        drawerLayout.addDrawerListener(actionBarDrawerToggle);
        actionBarDrawerToggle.syncState();

其中drawerLayout是xml檔案的最外層的DrawerLayout，ActionBarDrawerToggle建立時要傳入兩個String的資源ID,即在strings.xml檔案中新增,名字可以自設:

    <string name="open_drawer">open</string>
    <string name="close_drawer">close</string>

到此我們既可以通過點選按鈕又可以通過手勢拉出側滑選單，接下來我們設定選單項的監聽事件,方法如下:

// 設定監聽，返回false則navigation的item不可以被選擇,返回true則可以被選擇
        navigationView
                .setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(MenuItem item) {
                        return true;
                    }
                });

判斷item的id的不同做不同處理。

我們發現，NavigationView的子選單放置了圖示，但是圖示沒有顏色，一律是灰色,通過下面一行程式碼設定圖示帶顏色:

navigationView.setItemIconTintList(null);

到此一個NavigationView就成功創建出來了，比之前的方法要簡單很多,感謝能看到這裡~

持續更新~