@author ASCE1885的 Github 簡書 微博 CSDN
原文鏈接

Google I/O 2015為Android開發(fā)者帶來了一個(gè)全新的開發(fā)函數(shù)庫，本系列文章將會(huì)對(duì)這個(gè)材料設(shè)計(jì)兼容函數(shù)庫進(jìn)行較為詳細(xì)的介紹。

雖然Chris Banes已經(jīng)在Github上開源了一個(gè)很好的使用示例，我還是想進(jìn)一步講解每個(gè)新特性，并通過移植MaterializeYourApp這個(gè)Github工程進(jìn)行實(shí)例講解。

導(dǎo)航視圖

本文開始講解導(dǎo)航視圖，自從材料設(shè)計(jì)（Material Design）發(fā)布后，我們知道如何設(shè)計(jì)一個(gè)符合標(biāo)準(zhǔn)的導(dǎo)航抽屜：

在開發(fā)中遵循這些設(shè)計(jì)準(zhǔn)則相當(dāng)費(fèi)時(shí)，不過現(xiàn)在有了導(dǎo)航視圖，實(shí)現(xiàn)起來就簡單多了。

導(dǎo)航視圖的工作原理

使用導(dǎo)航視圖替換之前抽屜布局（DrawerLayout）中的自定義視圖
，導(dǎo)航視圖需要傳入一組參數(shù)，一個(gè)可選的頭部布局，以及一個(gè)用于構(gòu)建導(dǎo)航選項(xiàng)的菜單。完成上面這些步驟之后，就只需要給導(dǎo)航選項(xiàng)添加響應(yīng)事件的監(jiān)聽器就可以了。

實(shí)現(xiàn)

首先我們來創(chuàng)建菜單，直截了當(dāng)，你只需要?jiǎng)?chuàng)建一個(gè)group并指定同一時(shí)間只有一個(gè)item可以被選中：

<menu xmlns:android="http://schemas.android.com/apk/res/android">
 
    <group
        android:checkableBehavior="single">
 
        <item
            android:id="@+id/drawer_home"
            android:checked="true"
            android:icon="@drawable/ic_home_black_24dp"
            android:title="@string/home"/>
 
        <item
            android:id="@+id/drawer_favourite"
            android:icon="@drawable/ic_favorite_black_24dp"
            android:title="@string/favourite"/>
        ...
 
        <item
            android:id="@+id/drawer_settings"
            android:icon="@drawable/ic_settings_black_24dp"
            android:title="@string/settings"/>
 
    </group>
</menu>

理論上，通過使用一個(gè)子菜單作為item，你也可以添加包含頭部的菜單項(xiàng)，如下所示：

<item
    android:id="@+id/section"
    android:title="@string/section_title">
    <menu>
        <item
            android:id="@+id/drawer_favourite"
            android:icon="@drawable/ic_favorite_black_24dp"
            android:title="@string/favourite"/>
 
        <item
            android:id="@+id/drawer_downloaded"
            android:icon="@drawable/ic_file_download_black_24dp"
            android:title="@string/downloaded"/>
    </menu>
</item>

這將會(huì)創(chuàng)建一個(gè)分割線和一個(gè)頭部，緊跟著一個(gè)item。然而，這些子菜單里面的item似乎不能被選中。如果找到解決方案了我會(huì)更新這一點(diǎn)，你應(yīng)該自己親自試驗(yàn)一下。

接著我們可以給activity布局添加導(dǎo)航視圖，同時(shí)設(shè)置菜單選項(xiàng)和頭部布局。這里我不會(huì)詳細(xì)介紹頭部，因?yàn)樗梢允侨魏文阆胍牟季?，Github上面有一個(gè)例子可以參考一下。

<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:context=".MainActivity">
 
    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
 
    ...
 
    </FrameLayout>
 
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/drawer"/>
 
</android.support.v4.widget.DrawerLayout>

最后就是添加Java代碼，首先我們需要給左上角圖標(biāo)的左邊加上一個(gè)返回的圖標(biāo)：

final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
final ActionBar actionBar = getSupportActionBar();
 
if (actionBar != null) {
    actionBar.setHomeAsUpIndicator(R.drawable.ic_menu_black_24dp);
    actionBar.setDisplayHomeAsUpEnabled(true);
}

接著初始化導(dǎo)航抽屜，當(dāng)導(dǎo)航選項(xiàng)被選中時(shí)，將會(huì)顯示一個(gè)snackbar（后續(xù)的文章會(huì)進(jìn)行介紹），并置選中的菜單項(xiàng)為選中態(tài)，同時(shí)關(guān)閉抽屜：

drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
 
NavigationView view = (NavigationView) findViewById(R.id.navigation_view);
view.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override public boolean onNavigationItemSelected(MenuItem menuItem) {
        Snackbar.make(content, menuItem.getTitle() + " pressed", Snackbar.LENGTH_LONG).show();
        menuItem.setChecked(true);
        drawerLayout.closeDrawers();
        return true;
    }
});

最后，當(dāng)菜單按鈕被點(diǎn)擊時(shí)，打開抽屜：

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case android.R.id.home:
            drawerLayout.openDrawer(GravityCompat.START);
            return true;
    }
 
    return super.onOptionsItemSelected(item);
}

總結(jié)

由于引入了材料設(shè)計(jì)兼容函數(shù)庫和導(dǎo)航視圖（Navigation View），現(xiàn)在要?jiǎng)?chuàng)建一個(gè)符合材料設(shè)計(jì)標(biāo)準(zhǔn)的導(dǎo)航抽屜是輕而易舉的事兒。下一篇文章將會(huì)介紹有助于簡化用戶界面創(chuàng)建的另外一些新組件?，F(xiàn)在你可以進(jìn)入到下一篇文章Floating Action Button的學(xué)習(xí)了，不要忘了我們的代碼都在示例工程中。

歡迎關(guān)注我的微信公眾號(hào)