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

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

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

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

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

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

布局代碼如下：

里面的Toolbar和FloatingActionButton稍后我們?cè)谶@個(gè)系列講，對(duì)DrawerLayout和NavigationView進(jìn)行了聲明和初始化。

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

 //懸浮按鈕控件，稍后講這個(gè)控件
 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這個(gè)監(jiān)聽(tīng)事件，然后在實(shí)現(xiàn)的監(jiān)聽(tīng)方法里判斷點(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, "意見(jiàn)反饋", Toast.LENGTH_SHORT).show();
 }

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

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

噢，忘了，你們肯定會(huì)問(wèn)，如果點(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上又添加了一個(gè)headerlayou布局，所以這時(shí)，我們需要在布局文件中把

app:headerLayout="@layout/header_layout"

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

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

 #3F51B5
 #303F9F
 #FF4081

比如style中：