我們可以在滑動選單頁面定製任意的佈局，不過谷歌給我們提供了一種更好的辦法——使用NavgationView，NavgationView是Design Support庫中的一個控制元件，它不僅是嚴格按照 Material Design 的要求設計的，而且可以將滑動變的非常簡單。

匯入依賴包

compile 'de.hdodenhof:circleimageview:2.1.0'
compile 'com.android.support:design:24.2.1'

（這裡我新建專案是android6.0，compileSdkVersion對應的是26，匯入com.android.support:design:24.2.1不成功，最終使用了一個比較笨的辦法，將compileSdkVersion等一系列引數改成對應

（第一個依賴庫就是 Design Support 庫；第二個庫是一個開源的CircleImageView，輕鬆實現圓形化的功能。）

準備原料

我們首先要準備：menu（在NavigationView中顯示的選單項） 和 headerLayout（在NavigationView中顯示頭部佈局的）。

建立menu.xml

右擊menu==>new==>Menu Resourse，建立nav_menu.xml檔案

• （準備幾張圖片放在drawable-xxhdpi目錄下）（icon素材地址：點我）
• 在< menu>嵌套了< group>（一組）
• 將group的checkableBehavior屬性設為single（所有選單項只能單選）。

<?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_call"
            android:icon="@drawable/nav_call"
            android:title="call" />
        <item
            android:id="@+id/nav_friends"
            android:icon="@drawable/nav_friends"
            android:title="friends" />
        <item
            android:id="@+id/nav_location"
            android:icon="@drawable/nav_location"
            android:title="location" />
        <item
            android:id="@+id/nav_mail"
            android:icon="@drawable/nav_mail"
            android:title="mail" />
        <item
            android:id="@+id/nav_task"
            android:icon="@drawable/nav_task"
            android:title="task" />
    </group>
</menu>
 

建立nav_header.xml

右擊layout，建立一個nav_header.xml檔案（準備一張圖片放在drawable-xxhdpi目錄下。最好是一張正方形，因為一會將它圓形化）

（CircleImageView是一個用於將圖片圓形話的控制元件，用法基本和ImageView一樣很簡單。）

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:background="?attr/colorPrimary"
    android:padding="10dp">
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/icon_image"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_centerInParent="true"
        android:src="@drawable/nav_icon" />
    <TextView
        android:id="@+id/tv_mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="[email protected]"
        android:textColor="#FFF"
        android:textSize="14sp" />
    <TextView
        android:id="@+id/tv_username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/tv_mail"
        android:text="Jack"
        android:textColor="#FFF"
        android:textSize="14sp" />
</RelativeLayout>

使用NavigationView

上一步我們把menu和layout這兩個原材料準備好了，就可以使用NavigationView了。修改activity_main.xml

• 這裡我們將上一篇文章裡的textview修改成了NavigationView，這樣滑動選單裡的內容就變成NavigationView了
• 通過app:headerLayout和app:menu屬性將我們剛才準備好的layout和menu設定了了進去，這樣NavigationView就定義好了

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_Layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    </FrameLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu" />
</android.support.v4.widget.DrawerLayout>

NavigationView定義好了，接下來我們新增選單項的單擊事件

• 首先獲取到NavigationView例項
• 然後調動它的setCheckedItem將call設定為預設選中
• 然後呼叫setNavigationItemSelectedListener設定選單項選中事件的監聽器。（沒有新增其他邏輯，只調用了DrawerLayout.closeDrawers()方法將滑動選單關閉）

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_Layout);
    NavigationView navView = (NavigationView) findViewById(R.id.nav_view);
    ActionBar actionBar = getSupportActionBar();
    if (actionBar != null) {
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
    }
    navView.setCheckedItem(R.id.nav_call); //設定預設選中
    navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { //選單選項監聽事件
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            //處理邏輯
            mDrawerLayout.closeDrawers();
            return true;
        }
    });
}

執行，如圖：

做出來效果還是不錯的。