Android Design Support之NavigationView实战

1、简介

Android在2015/05推出了Android Design Support Library，专门针对Material Design提供了很多Material Design组件，并且向后兼容至Android 2.1，关于Android Desgin Support Library，请参考如下网址：

https://android-developers.blogspot.com/2015/05/android-design-support-library.html

这次主要来讲一下Design Support Library中一个比较炫酷的组件：NavigationView。本次博客Demo最终的效果如下所示。我们都用过DrawerLayout，这个NavigationView就是放在DrawerLayout里面的。在以前的设计当中，可能我们还得考虑布局怎么设计，比如ListView等。现在有了NavigationView这个组件，我们只需要写写布局就行了，并且兼容到Android2.1，非常值得使用，下面进入正题。

2、使用

1、首先是布局，当然我们需要在Dependencies中引入：

 compile 'com.android.support:appcompat-v7:24.0.0' compile 'com.android.support:design:24.0.0'

<?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/drawlayout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true">    <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:layout_width="match_parent"        android:layout_height="match_parent"        tools:context="com.easyliu.demo.navigationviewdemo.MainActivity">        <android.support.v7.widget.Toolbar            android:id="@+id/toolbar"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize"            android:background="?attr/colorPrimary"            android:elevation="4dp"            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"            app:logo="@mipmap/ic_launcher"            app:navigationIcon="@drawable/ic_drawer"            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"            app:subtitle="sub Title"            app:title="Title" />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_below="@id/toolbar"            android:layout_marginLeft="@dimen/activity_horizontal_margin"            android:layout_marginTop="@dimen/activity_horizontal_margin"            android:text="@string/app_name" />    </RelativeLayout>    <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>

在上面的布局当中，最顶层控件为DrawerLayout，主界面是一个RelativeLayout，里面放了一个ToolBar，然后侧滑项就是NavigationView了。

然后我们发现NavigationView当中有两个属性：

 app:headerLayout="@layout/drawer_header" app:menu="@menu/drawer"

这两个属性分别用来指定头部和菜单项。

头部布局drawer_header布局如下所示：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="192dp"    android:background="?attr/colorPrimaryDark"    android:padding="16dp"    android:theme="@style/ThemeOverlay.AppCompat.Dark">    <TextView        android:id="@+id/id_link"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_marginBottom="16dp"        android:text="http://blog.csdn.net/liuyi1207164339" />    <TextView        android:id="@+id/id_username"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_above="@id/id_link"        android:text="EasyLiu" />    <ImageView        android:layout_width="72dp"        android:layout_height="72dp"        android:layout_above="@id/id_username"        android:layout_marginBottom="16dp"        android:src="@mipmap/ic_launcher" /></RelativeLayout>

菜单布局drawer如下所示，这里还指定了子菜单项目。注意：需要给子菜单项指定android:checkable=true属性，不然是没有选中效果的。

<?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/navigation_item_home"            android:checked="true"            android:icon="@drawable/ic_home_black_24dp"            android:title="@string/navigation_item_home" />        <item            android:id="@+id/navigation_item_message"            android:icon="@drawable/ic_message_black_24dp"            android:title="@string/navigation_item_message" />        <item            android:id="@+id/navigation_item_friends"            android:icon="@drawable/ic_perm_identity_black_24dp"            android:title="@string/navigation_item_friends" />        <item            android:id="@+id/navigation_item_discussion"            android:icon="@drawable/ic_feedback_black_24dp"            android:title="@string/navigation_item_discussion" />    </group>    <item        android:id="@+id/navigation_subheader"        android:title="@string/navigation_subheader">        <menu>            <item                android:id="@+id/navigation_sub_item_1"                android:checkable="true"                android:icon="@drawable/ic_dashboard_black_24dp"                android:title="@string/navigation_sub_item_1" />            <item                android:id="@+id/navigation_sub_item_2"                android:checkable="true"                android:icon="@drawable/ic_home_black_24dp"                android:title="@string/navigation_sub_item_2" />        </menu>    </item></menu>

布局文件就写好了。

2、MainActivity

package com.easyliu.demo.navigationviewdemo;import android.support.design.widget.NavigationView;import android.support.design.widget.Snackbar;import android.support.v4.view.GravityCompat;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.ActionBar;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.support.v7.widget.Toolbar;import android.view.MenuItem;public class MainActivity extends AppCompatActivity {    private DrawerLayout drawerLayout;    private NavigationView navigation_view;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        final ActionBar actionBar = getSupportActionBar();        if (actionBar != null) {            actionBar.setDisplayHomeAsUpEnabled(true);        }        drawerLayout = (DrawerLayout) findViewById(R.id.drawlayout);        navigation_view = (NavigationView) findViewById(R.id.navigation_view);        navigation_view.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {            @Override            public boolean onNavigationItemSelected(MenuItem menuItem) {                Snackbar.make(MainActivity.this.getWindow().getDecorView(), menuItem.getTitle() + " pressed", Snackbar.LENGTH_LONG).show();                menuItem.setChecked(true);                drawerLayout.closeDrawers();                return true;            }        });    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        switch (item.getItemId()) {            case android.R.id.home:                drawerLayout.openDrawer(GravityCompat.START);                return true;        }        return super.onOptionsItemSelected(item);    }}

在以上代码当中，把ToolBar设置成了ActionBar，同时给ActionBar设置了setDisplayHomeAsUpEnabled为true，这当点击ToolBar的NavigationIcon的时候就会弹出NavigationView，当然前提是实现了如上所示的onOptionsItemSelected方中的代码。

然后给NavigationView设置了监听OnNavigationItemSelectedListener，当选中某一项的时候弹出一个Snackbar且关闭NavigationView，设置选择项为选中状态。

3、记得设置Material design主题，这个在前面的Toolbar的博客中讲了，这里不再赘述。

以上就是整个NavigationView的使用过程，是不是so easy~~。

ps:发现一个很酷的效果，如果我们在values-21的styles.xml当中把android:statusBarColor设置为：

 <item name="android:statusBarColor">@android:color/transparent</item>

也就是把状态栏设置成透明，侧滑的效果如下，看起来更炫酷的样子。现在很多App都是使用这种效果，相当于可以无视状态栏的存在，最大限度的利用屏幕空间。

demo下载地址：https://github.com/EasyLiu-Ly/MaterialDesignDemos

不过使用过DrawerLayout的都知道NavigationView的这种效果我们自己其实也是可以实现的，但是既然有现成的用为什么不用了呢，是吧。。。。。