Android Material Design系列之Navigation Drawer

從今天開始，咱們講一個關於Material Design風格控件系列的文章。我的認爲Material Design風格仍是很是漂亮和好看的。關於Material Design的控件，從今天這篇開始一個一個的講，但願可以對你們有所幫助。

Material Design系列控件，咱們今天就先從側滑菜單欄開始，側滑菜單欄經過名字咱們就知道包含兩部分，一部分是側滑（DrawerLayout），一部分是導航菜單欄(NavigationView)。DrawerLayout包含NavigationView，一設置側滑菜單欄就造成了。由於創建一個側滑菜單很簡單，在用Android Studio新建項目時，最後選擇Navigation Drawer Activity或者在新建Activity時選擇Navigation Drawer Activity，就出來了。今天咱們講一下它們的自定義配置。

DrawerLayout佈局

<?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>

從上面的佈局代碼中咱們就看出來了，DrawerLayout包含NavigationView，中間的include先無論，那是toolbar，咱改天詳細講。新建完項目，自帶的佈局效果是這樣的，以下：

從圖中，咱們能夠看到菜單列表，這個菜單列表是咱們剛開始建項目時自動生成的，系統默認的，咱們須要定製這個菜單變成咱們本身的。其實就是要用到了NavigationView。

NavigationView

NavigationView分爲兩部分，一部分是headerLayout，一部分是menu。headerLayout就是對應菜單的頂部部分，通常用來顯示用戶信息什麼的，menu則對應實際的菜單選項。咱們從上面的佈局代碼中能夠看出分別對應的就是 app:headerLayout和app:menu。

headerLayout

佈局代碼以下：

<?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:padding="16dp"
 android:theme="@style/ThemeOverlay.AppCompat.Dark"
 android:background="?attr/colorPrimaryDark"
 android:gravity="center"
 android:orientation="vertical">

 <ImageView
 android:id="@+id/head_iv"
 android:layout_width="60dp"
 android:layout_height="60dp"
 android:layout_marginTop="30dp"
 android:background="@drawable/head" />

 <TextView
 android:text="非著名程序員"
 android:layout_marginTop="10dp"
 android:textColor="#ffffff"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" />

</LinearLayout>

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_home"
 android:icon="@drawable/nav_icon_home"
 android:title="Home" />
 <item
 android:id="@+id/nav_favorite"
 android:icon="@drawable/nav_icon_favorite"
 android:title="收藏" />
 <item
 android:id="@+id/nav_followers"
 android:icon="@drawable/nav_icon_followers"
 android:title="羣組" />

 <item
 android:id="@+id/nav_settings"
 android:icon="@drawable/nav_icon_settings"
 android:title="設置" />
 </group>

 <item android:title="分享和反饋">
 <menu>
 <item
 android:id="@+id/nav_share"
 android:icon="@drawable/nav_icon_my_shares"
 android:title="分享" />
 <item
 android:id="@+id/nav_feedback"
 android:icon="@drawable/nav_icon_feedback"
 android:title="意見反饋" />
 </menu>
 </item>

</menu>

代碼實現

初始化相關控件

裏面的Toolbar和FloatingActionButton稍後咱們在這個系列講，對DrawerLayout和NavigationView進行了聲明和初始化。

//toolbar的設置，稍後講這個控件
 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
 setSupportActionBar(toolbar);

 //懸浮按鈕控件，稍後講這個控件
 FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
 fab.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View view) {
 Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
 .setAction("Action", null).show();
 }
 });

 //設置DrawerLayout
 DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
 ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
 this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
 drawer.setDrawerListener(toggle);
 toggle.syncState();

 //設置NavigationView
 NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
 navigationView.setNavigationItemSelectedListener(this);

側滑菜單中選項按鈕的點擊事件

MainActivity實現了NavigationView.OnNavigationItemSelectedListener這個監聽事件，而後在實現的監聽方法裏判斷點擊事件。
方法以下：

@Override
 public boolean onNavigationItemSelected(MenuItem item) {
 int id = item.getItemId();

 if (id == R.id.nav_home) {
 Toast.makeText(this, "home", Toast.LENGTH_SHORT).show();
 } else if (id == R.id.nav_favorite) {
 Toast.makeText(this, "收藏", Toast.LENGTH_SHORT).show();
 } else if (id == R.id.nav_followers) {
 Toast.makeText(this, "羣組", Toast.LENGTH_SHORT).show();
 } else if (id == R.id.nav_settings) {
 Toast.makeText(this, "設置", Toast.LENGTH_SHORT).show();
 } else if (id == R.id.nav_share) {
 Toast.makeText(this, "分享", Toast.LENGTH_SHORT).show();
 } else if (id == R.id.nav_feedback) {
 Toast.makeText(this, "意見反饋", Toast.LENGTH_SHORT).show();
 }

 DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
 drawer.closeDrawer(GravityCompat.START);
 return true;
 }

記得實現了監聽，別忘了設置監聽：navigationView.setNavigationItemSelectedListener(this);
到這裏就講完了。作完以後的效果圖以下：

噢，忘了，大家確定會問，若是點擊側滑上面的頭像，怎麼實現呢？

headerLayout上的控件實現

若是要實現headerLayout上的控件的點擊，那就得這樣作了，以下：

View navHeaderView = navigationView.inflateHeaderView(R.layout.header_layout);

ImageView headIv = (ImageView) navHeaderView.findViewById(R.id.head_iv);
headIv.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View view) {
 Toast.makeText(MainActivity.this, "點擊個人頭像", Toast.LENGTH_SHORT).show();
 }
});

可是這樣作了以後，就至關於在navigationView上又添加了一個headerlayou佈局，因此這時，咱們須要在佈局文件中把

app:headerLayout="@layout/header_layout"

這行代碼去掉，不然會重複的。

主題和配色

上面用到的主題和顏色，咱們能夠在資源文件中配置。
好比color中：

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <color name="colorPrimary">#3F51B5</color>
 <color name="colorPrimaryDark">#303F9F</color>
 <color name="colorAccent">#FF4081</color>
</resources>

好比style中：

<resources>

 <!-- Base application theme. -->
 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
 <!-- Customize your theme here. -->
 <item name="colorPrimary">@color/colorPrimary</item>
 <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
 <item name="colorAccent">@color/colorAccent</item>
 </style>

 <style name="AppTheme.NoActionBar">
 <item name="windowActionBar">false</item>
 <item name="windowNoTitle">true</item>
 </style>

 <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

 <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

</resources>

在這裏配置成本身想要實現的主題和顏色便可。這回是真講完了。是否是很簡單，趕忙試一試去吧。

歡迎關注微信公衆號：非著名程序員（smart_android），天天每週定時推送原創技術文章。全部技術文章， 均會在微信訂閱號首發，關注微信公衆號能夠及時得到技術文章推送。