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

從今天開始，我們講一個關(guān)于Material Design風(fēng)格控件系列的文章。個人認(rèn)為Material Design風(fēng)格還是非常漂亮和好看的。關(guān)于Material Design的控件，從今天這篇開始一個一個的講，希望能夠?qū)Υ蠹矣兴鶐椭?/p>

Material Design系列控件，我們今天就先從側(cè)滑菜單欄開始，側(cè)滑菜單欄通過名字我們就知道包含兩部分，一部分是側(cè)滑（DrawerLayout），一部分是導(dǎo)航菜單欄(NavigationView)。DrawerLayout包含NavigationView，一設(shè)置側(cè)滑菜單欄就形成了。因?yàn)榻⒁粋€側(cè)滑菜單很簡單，在用Android Studio新建項(xiàng)目時，最后選擇Navigation Drawer Activity或者在新建Activity時選擇Navigation Drawer Activity，就出來了。今天我們講一下它們的自定義配置。

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

從圖中，我們可以看到菜單列表，這個菜單列表是我們剛開始建項(xiàng)目時自動生成的，系統(tǒng)默認(rèn)的，我們需要定制這個菜單變成我們自己的。其實(shí)就是要用到了NavigationView。

NavigationView分為兩部分，一部分是headerLayout，一部分是menu。headerLayout就是對應(yīng)菜單的頂部部分，一般用來顯示用戶信息什么的，menu則對應(yīng)實(shí)際的菜單選項(xiàng)。我們從上面的布局代碼中可以看出分別對應(yīng)的就是 app:headerLayout和app:menu。

布局代碼如下：

里面的Toolbar和FloatingActionButton稍后我們在這個系列講，對DrawerLayout和NavigationView進(jìn)行了聲明和初始化。

 //toolbar的設(shè)置，稍后講這個控件
 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();
 }
 });

 //設(shè)置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();

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

MainActivity實(shí)現(xiàn)了NavigationView.OnNavigationItemSelectedListener這個監(jiān)聽事件，然后在實(shí)現(xiàn)的監(jiān)聽方法里判斷點(diǎn)擊事件。
方法如下：

@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, "設(shè)置", 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;
 }

記得實(shí)現(xiàn)了監(jiān)聽，別忘了設(shè)置監(jiān)聽：navigationView.setNavigationItemSelectedListener(this);
到這里就講完了。做完之后的效果圖如下：

噢，忘了，你們肯定會問，如果點(diǎn)擊側(cè)滑上面的頭像，怎么實(shí)現(xiàn)呢？

如果要實(shí)現(xiàn)headerLayout上的控件的點(diǎn)擊，那就得這樣做了，如下：

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, "點(diǎn)擊我的頭像", Toast.LENGTH_SHORT).show();
 }
});

但是這樣做了之后，就相當(dāng)于在navigationView上又添加了一個headerlayou布局，所以這時，我們需要在布局文件中把

app:headerLayout="@layout/header_layout"

這行代碼去掉，否則會重復(fù)的。

上面用到的主題和顏色，我們可以在資源文件中配置。
比如color中：

 #3F51B5
 #303F9F
 #FF4081

比如style中：