DrawerLayout是在android.support.v4.widget包下甥角，可以實(shí)現(xiàn)app的側(cè)滑菜單谍珊，通過手勢的滑動打開或關(guān)閉側(cè)邊菜單诅蝶。這篇文章的學(xué)習(xí)將繼續(xù)在上一篇文章搭建的項(xiàng)目上實(shí)現(xiàn)

實(shí)現(xiàn)側(cè)滑菜單

1.使用DrawerLayout和NavigationView

要使用<android.support.v4.widget.DrawerLayout/>,需要將文件根布局改成<android.support.v4.widget.DrawerLayout/>標(biāo)簽,在這個標(biāo)簽中只放兩個直接子控件候生，第一個放之前的整體布局作為界面主要內(nèi)容纱皆，在主要內(nèi)容之后放另外一個drawer作為側(cè)滑導(dǎo)航可以使用如下控件實(shí)現(xiàn)：

<android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:text="This is menu"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu" />

android:layout_gravity="start" 用于設(shè)置側(cè)滑導(dǎo)航從哪邊滑出湾趾，start是根據(jù)系統(tǒng)語言開始的方向設(shè)置（如中文的讀寫就是從左邊往右的芭商，阿拉伯語是從右往左的），所以這樣設(shè)置后我們的側(cè)滑菜單就是從左邊滑出的了搀缠，如果確定是左邊或右邊滑出铛楣，可以直接用left或right

app:headerLayout="@layout/nav_header" 設(shè)置菜單導(dǎo)航頭部布局
app:menu="@menu/nav_menu" 設(shè)置導(dǎo)航菜單選項(xiàng)

nva_header.xml將展示用戶頭像、用戶名以及用戶郵箱等信息艺普，具體代碼如下所示：

<?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="180dp"
    android:padding="16dp"
    android:background="?attr/colorAccent"
    android:gravity="center_vertical"
    android:orientation="vertical">

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_marginTop="30dp"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:src="@drawable/user_head" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="Enid"
        android:textColor="#ffffff" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="kivi18781@gmail.com"
        android:textColor="#ffffff" />

</LinearLayout>

這里面用戶頭像的使用用了<de.hdodenhof.circleimageview.CircleImageView/>實(shí)現(xiàn)簸州，需要在app下的build.grade加入依賴包：

compile 'de.hdodenhof:circleimageview:2.1.0'

nav_menu.xml是實(shí)現(xiàn)菜單選項(xiàng)的文件

<?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_item_1"
            android:icon="@mipmap/ic_launcher"
            android:title="Item1" />
        <item
            android:id="@+id/nav_item_2"
            android:icon="@mipmap/ic_launcher"
            android:title="Item2" />
        <item
            android:id="@+id/nav_item_3"
            android:icon="@mipmap/ic_launcher"
            android:title="Item3" />
    </group>

    <item android:title="Sub items">
        <menu>
            <item
                android:id="@+id/nav_sub_1"
                android:icon="@mipmap/ic_launcher"
                android:title="My sub item 1" />
            <item
                android:id="@+id/nav_sub_2"
                android:icon="@mipmap/ic_launcher"
                android:title="My sub item 2" />
        </menu>
    </item>
</menu>

從上邊的代碼可以看到根布局是一個<menu/>，在<group/>下可以可以放置多個item,group設(shè)置 android:checkableBehavior="single"可以將group下的item設(shè)為單選的狀態(tài)

我們還可以給NavigationView添加屬性 設(shè)置item上title文字的顏色

app:itemTextColor="@color/selector_button_text_color"

selector_button_text_color.xml 是放在 /res/color/目錄下的文件歧譬，里面是一個selector的資源文件

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
        android:color="#ffff1155"/> <!-- pressed -->
    <item android:state_checked="true"
        android:color="#ffff0000"/> <!-- checked -->
    <item android:color="#ff000000"/> <!-- default -->
</selector>

這樣可以設(shè)置在不同狀態(tài)下顯示不同的顏色加以區(qū)分

2.設(shè)置點(diǎn)擊按鈕滑出側(cè)邊導(dǎo)航

在代碼中添加下面的代碼

    ActionBar actionBar = getSupportActionBar();
    if (actionBar != null) {
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setHomeAsUpIndicator(R.drawable.nav_ic_drawer);
    } 

然后在onOptionsItemSelected方法中添加點(diǎn)擊事件勿侯，打開側(cè)邊導(dǎo)航

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.add_item:
                toastMsg("click item Add");
                break;
            case R.id.remove_item:
                toastMsg("click item Remove");
                break;
            case R.id.filter_item:
                toastMsg("click item filter");
                break;
            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
                break;
            default:
                break;
        }
        return true;
    }

在Activity中調(diào)用NavigationView的setNavigationItemSelectedListener方法設(shè)置菜單選擇監(jiān)聽

做到這里一個側(cè)滑菜單已經(jīng)完成了，效果如圖所示

將側(cè)滑導(dǎo)航高度設(shè)置成full_screen

做完上面的工作缴罗，側(cè)邊滑出的導(dǎo)航會從狀態(tài)欄底部開始繪制助琐，要想在縱向方向全屏需要做兩件事

1.把狀態(tài)欄的顏色設(shè)置為透明，可以在所用的主題中將statusBarColor設(shè)置為透明面氓，

2.給根布局（<android.support.v4.widget.DrawerLayout/>）設(shè)置屬性 android:fitsSystemWindows="true"

因?yàn)闋顟B(tài)欄透明只在Android5.0（API 21）及更高的版本中才提供兵钮，所以我們需要給不支持狀態(tài)欄設(shè)為透明的情況準(zhǔn)備備用主題樣式

這里我們在res/values-v21/style.xml中新建一個主題樣式命名為FruitActivityTheme，并讓它繼承之前的AppTheme,設(shè)置狀態(tài)欄為透明的

<style name="FruitActivityTheme" parent="AppTheme">
        <item name="android:statusBarColor">@android:color/transparent</item>
</style>

然后在res/values/style.xml中寫一個名稱相同舌界，但不設(shè)置statusBarColor為透明的主題樣式如：

<style name="FruitActivityTheme" parent="AppTheme">

</style>

最后在AndroidManifelst.xml中的MainActivity的<activity/>中設(shè)置這個theme即可

這樣在Android5.0之前的設(shè)備運(yùn)行時就會執(zhí)行values文件夾下面的樣式掘譬，Android5.0或更高版本的就會執(zhí)行values-v21下面的樣式。

完成后的效果如圖所示:

在Android5.0 以下的手機(jī)系統(tǒng)中運(yùn)行效果如圖所示：

實(shí)現(xiàn)一個側(cè)滑菜單欄就是這么簡單呻拌，下一篇我們將學(xué)習(xí)TabLayout的用法實(shí)現(xiàn)葱轩。