安卓側滑之DrawerLayout+NavigationView

NavigationView是谷歌在側滑的MaterialDesign的一種規範，所以提出了一個新的控件，用來規範側滑的基本樣式。

首先準備兩個xml佈局；

第一個佈局是側滑出來的菜單佈局

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <item 
        android:id="@+id/action_gallery"
        android:title="相冊"
        android:orderInCategory="10"
        android:icon="@android:drawable/ic_menu_gallery"
        />
    <item 
        android:id="@+id/action_details"
        android:title="詳情"
        android:orderInCategory="2"
        android:icon="@android:drawable/ic_menu_info_details"
        />
    <item 
        android:id="@+id/action_about"
        android:title="關於"
        android:orderInCategory="100"
        android:icon="@android:drawable/ic_menu_help">
        <menu >
            <item
                android:id="@+id/aaa"
                android:title="111"
                android:icon="@android:drawable/ic_media_play"/>
            <item
                android:id="@+id/bbb"
                android:title="222"
                android:icon="@android:drawable/ic_media_pause"/>
        </menu>
    </item>
    <item 
        android:id="@+id/action_music"
        android:title="音樂"
        android:orderInCategory="100"
        android:icon="@android:drawable/ic_menu_more"
        >
        <menu >
            <item
                android:id="@+id/action_play"
              android:title="播放"
              android:icon="@android:drawable/ic_media_play"/>
            <item
                android:id="@+id/action_pause"
              android:title="暫停"
              android:icon="@android:drawable/ic_media_pause"/>
        </menu>
      </item>

</menu>

第二個是側滑菜單的頭部佈局

<?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="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical" >
    <ImageView 
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:src="@drawable/icon_people"
       />
    <TextView 
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="666"
       android:textSize="10dp"
        />

</LinearLayout>

第二個佈局不是必須，根據產品需求修改。

然後在Activity對應的佈局文件中引用NavigationView

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 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/activity_drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#0f0"
    tools:context="com.example.hp.md.NavigationView_Activity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"></android.support.v7.widget.Toolbar>

    <android.support.v4.widget.DrawerLayout xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/drawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/toolbar"
        tools:context="com.example.hp.md.NavigationView_Activity">
        <!--內容界面-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="這是內容界面這是內容界面這是內容界面這是內容界面這是內容界面這是內容界面這是內容界面這是內容界面這是內容界面這是內容界面這是內容界面這是內容界面這是內容界面這是內容界面這是內容界面這是內容界面這是內容界面這是內容界面這是內容界面這是內容界面這是內容界面這是內容界面" />
        </LinearLayout>
        <!-- 側滑菜單部分 -->

        <android.support.design.widget.NavigationView
            android:id="@+id/my_navigation"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/navigation_headerlayout"
            app:menu="@menu/navigation_menu"></android.support.design.widget.NavigationView>


    </android.support.v4.widget.DrawerLayout>
</RelativeLayout>

 app:menu="@menu/navigation_menu"引用的是上面準備的第一個佈局

 app:headerLayout="@layout/navigation_headerlayout"引用的是上面準備的第二個佈局