ToolBar+NavigationDraw實現炫酷的側邊欄

Android Studio自帶的Navigation Drawer主題撐滿了整個界面的高度把ToolBar擋住了，很遺憾左上角那個炫酷的動態Icon看不見了。有興趣的同學可以去創建一個project，什麼都不用寫，直接run就可以看到效果了。

如圖，就是Android Studio自帶的Navigation Drawer樣式。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

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

我們可以看到這是把ToolBar放在DrawerLayout主界面裏的方式，所以會被NavigationView給遮擋住。
本文主要是重新編排DrawerLayout的位置，讓ToolBar顯示出來。
首先新建一個project，（注：最好選擇Navigation Drawer Activity，External Library中該有的都有了），
否則會出現Error:(16) No resource identifier found for attribute ‘headerLayout’ in package ‘com.example.xxx’。當然出現這個錯誤也不要急，只要在build.gradle(Module:app)的compil後面再加上一條即可。

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.0.1'
    compile 'com.android.support:design:25.0.1'    //添加
    testCompile 'junit:junit:4.12'
}

然後在activity_main.xml中佈局，將DrawerLayout放在ToolBar下面

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!--Toolbar-->
    <include layout="@layout/custom_toolbar" />

    <!--DrawerLayout-->
    <include layout="@layout/custom_drawerlayout" />


</LinearLayout>

這裏ToolBar過於簡單就不講了。
custom_drawerlayout.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:openDrawer="start">

<!--========================主界面內容========================-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Hello World!"
        android:textSize="50sp"
        android:textColor="#0A8F08"
        android:gravity="center"/>

<!--========================側邊欄內容========================-->
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:scrollbars="none"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/my_menu"/>

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

爲了美觀，這裏還加了一個header。nav_header_main.xml

<?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="@dimen/nav_header_height"
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        app:srcCompat="@android:drawable/sym_def_app_icon" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="Android Studio"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="[email protected]" />

</LinearLayout>

header可以放個頭像、個人信息、郵箱什麼的，比如QQ就是頭像、QQ等級和簽名。
放置完header以後可以通過menu設置一個帶圖標的菜單欄，（動態添加的方式爲 navigationView.getMenu().add();只是不知道如何添加Icon，如果有大神知道，請告知）。
以下是my_menu.xml部分

<?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="@drawable/ic_menu_camera"
            android:title="Camera" />
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_menu_gallery"
            android:title="Gallery" />
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/ic_menu_slideshow"
            android:title="Slideshow" />
        <item
            android:id="@+id/nav_manage"
            android:icon="@drawable/ic_menu_manage"
            android:title="Tools" />
    </group>

    <item android:title="Communicate">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_menu_share"
                android:title="Share" />
            <item
                android:id="@+id/nav_send"
                android:icon="@drawable/ic_menu_send"
                android:title="Send" />
        </menu>
    </item>

</menu>

到這裏，佈局差不多完成了，不過還有一點要記住，那就是style裏面的主題得選擇NoActionBar，因爲我們有ToolBar了，不再需要ActionBar。(嘗試了一下，如果不改成NoActionBar，App會崩潰。)
最後來講講Activity。
MAinActivity.java

package com.example.zhan.navigationdraw2_demo;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.internal.NavigationMenuView;
import android.support.v4.view.GravityCompat;
import android.view.View;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {

    //聲明相關變量
    public Toolbar toolbar;
    public DrawerLayout mDrawerLayout;
    public ActionBarDrawerToggle mDrawerToggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViews(); //獲取控件
        toolbar.setTitle("Toolbar");//設置Toolbar標題
        toolbar.setTitleTextColor(Color.parseColor("#FFFFFFFF")); //設置標題顏色
        setSupportActionBar(toolbar);   //綁定

        //創建返回鍵，並實現打開關/閉監聽
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.open, R.string.close) {
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
            }
            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
            }
        };
        mDrawerToggle.syncState();  //Synchronize the state of the drawer indicator/affordance with the linked DrawerLayout
        mDrawerLayout.addDrawerListener(mDrawerToggle);     //監聽DrawerLayout
    }

    private void findViews() {
        toolbar = (Toolbar) findViewById(R.id.tl_custom);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);
//        navigationView.setItemIconTintList(null);     //設置圖標爲本色
        disableNavigationViewScrollbars(navigationView);    //設置NavigationView滾動條隱藏
    }

    @Override
    public void onBackPressed() {
        if (mDrawerLayout.isDrawerOpen(GravityCompat.START)) {
            mDrawerLayout.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        // Handle navigation view item clicks here.
        int id = item.getItemId();

        if (id == R.id.nav_camera) {
            // Handle the camera action
        } else if (id == R.id.nav_gallery) {

        } else if (id == R.id.nav_slideshow) {

        } else if (id == R.id.nav_manage) {

        } else if (id == R.id.nav_share) {

        } else if (id == R.id.nav_send) {

        }
        mDrawerLayout.closeDrawer(GravityCompat.START);
        return true;
    }
    private void disableNavigationViewScrollbars(NavigationView navigationView) {
        if (navigationView != null) {
            NavigationMenuView navigationMenuView = (NavigationMenuView) navigationView.getChildAt(0);
            if (navigationMenuView != null) {
                navigationMenuView.setVerticalScrollBarEnabled(false);
            }
        }
    }
}

其實Activity的工作很簡單，就是監聽ToolBar的點擊，點擊後展開側邊欄，側邊欄展開過程中ToolBar左側Icon動態變化以及點擊主界面側邊欄收回等功能無需複雜代碼實現。再一個監聽側邊欄的點擊(點擊後收回)和選中情況(選中不同的item執行不同的事件)。

---

新增圓形頭像

---

資源下載：ToolBar+NavigationDraw實現炫酷的側邊欄

ToolBar+NavigationDraw+Circleimg側邊欄圓形頭像動態圖標