Android开发之DrawerLayout与NavigationView之间不得不说的基友情

前言：话说自从5.0之后，Google为了安卓应用的风格更加统一(之前是holo风格,不过引起的反响不大)，开始了Matrail Design的设计风格，咱今天所讲的就是基于Matrail Design设计风格的NavigationView，他的出生就是为了搭配DrawerLayout来使用，这个菜单分为两部分，头部(headerLayout)和尾部(menu)，其实这样的效果，我们自己也可以来实现，但是既然Google出来了，我们今天就来探讨一下NavigationView的使用！

-------------------------------------------分割线-------------------------------------------------

使用：还是放在DrawerLayout里面，只是把侧滑栏换成NavigationView，具体看代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--内容布局-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/png01"></LinearLayout>

    <!--侧边栏布局-->
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#fff"
        app:headerLayout="@layout/navigation_headerlayout"
        app:menu="@menu/navigation_menu" />

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

其中android:layout_gravity="start"属性，相信大家都很熟悉了，该属性表示左侧滑栏。

app:headerLayout="@layout/navigation_headerlayout"，该属性表示头布局。

app:menu="@menu/navigation_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="80dp"
        android:layout_height="80dp"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android" />
</LinearLayout>

尾布局代码：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/action_gallery"
        android:icon="@android:drawable/ic_menu_gallery"
        android:orderInCategory="100"
        android:title="相册" />

    <item
        android:id="@+id/action_details"
        android:icon="@android:drawable/ic_menu_info_details"
        android:orderInCategory="100"
        android:title="详情" />

    <item
        android:id="@+id/action_about"
        android:icon="@android:drawable/ic_menu_help"
        android:orderInCategory="100"
        android:title="帮助" />
    <item
        android:id="@+id/action_fly"
        android:icon="@mipmap/ic_launcher"
        android:orderInCategory="100"
        android:title="fly" />
    <item
        android:id="@+id/action_fly2"
        android:icon="@mipmap/ic_launcher"
        android:orderInCategory="100"
        android:title="fly2" />
    <item
        android:id="@+id/action_fly3"
        android:icon="@mipmap/ic_launcher"
        android:orderInCategory="100"
        android:title="fly3" />

    <item
        android:id="@+id/action_music"
        android:icon="@android:drawable/ic_menu_more"
        android:orderInCategory="100"
        android:title="音乐">
        <menu>
            <item
                android:id="@+id/action_play"
                android:icon="@android:drawable/ic_media_play"
                android:title="播放" />
            <item
                android:id="@+id/action_pause"
                android:icon="@android:drawable/ic_media_pause"
                android:title="暂停" />
        </menu>
    </item>
</menu>

效果图：

-------------------------------------------分割线-------------------------------------------------

图片显示不正常，默认显示的都是灰色偏黑色，在java中添加如下代码即可：

navigationView.setItemIconTintList(null);

再看下图：

当然了我们也可以设置app:itemIconTint="@color/blue"属性，来更改图片的显示颜色。

设置app:itemBackground="@color/colorAccent"每一个item的背景颜色，app:itemTextColor=""item的背景颜色

-------------------------------------------分割线-------------------------------------------------

分割线：在menu中将相应的item放到一个group中，并给该group取一个id即可，上面给出的有代码。

-------------------------------------------分割线-------------------------------------------------

头部点击事件：

View headerView = navigationView.getHeaderView(0);
        headerView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "我是头部", Toast.LENGTH_SHORT).show();
            }
        });

效果图：

-------------------------------------------分割线-------------------------------------------------

尾部点击事件：

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                //在这里处理item的点击事件
                switch (item.getItemId()) {
                    case R.id.action_gallery:
                        Toast.makeText(MainActivity.this, "我是相册", Toast.LENGTH_SHORT).show();
                        break;
                }
                return true;
            }
        });

效果图：

-------------------------------------------分割线-------------------------------------------------

ok！以上就是NavigationView的使用方法，敬请期待下节课！