摘要：從今天開始，我們講一個關于風格控件系列的文章。個人認為風格還是非常漂亮和好看的。包含，一設置側滑菜單欄就形成了。分為兩部分，一部分是，一部分是。就是對應菜單的頂部部分，一般用來顯示用戶信息什么的，則對應實際的菜單選項。

從今天開始，我們講一個關于Material Design風格控件系列的文章。個人認為Material Design風格還是非常漂亮和好看的。關于Material Design的控件，從今天這篇開始一個一個的講，希望能夠對大家有所幫助。

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

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

從圖中，我們可以看到菜單列表，這個菜單列表是我們剛開始建項目時自動生成的，系統默認的，我們需要定制這個菜單變成我們自己的。其實就是要用到了NavigationView。

NavigationView分為兩部分，一部分是headerLayout，一部分是menu。headerLayout就是對應菜單的頂部部分，一般用來顯示用戶信息什么的，menu則對應實際的菜單選項。我們從上面的布局代碼中可以看出分別對應的就是 app:headerLayout和app: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上的控件的點擊，那就得這樣做了，如下：

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中：

 #3F51B5
 #303F9F
 #FF4081

比如style中：