Android实现NavigationView使用教程

一、概述

Google I/O 2015 给大家带来了Android Design Support Library，对于希望做md风格的app的来说，简直是天大的喜讯了~大家可以通过Android Design Support Library该文章对其进行了解，也可以直接在github上下载示例代码运行学习。为了表达我心中的喜悦，我决定针对该库写一系列的文章来分别介绍新增加的控件。

ok，那么首先介绍的就是NavigationView。

注意下更新下as的SDK，然后在使用的过程中，在build.gradle中添加：

<span style="font-size:18px;color:#FF6666;"><strong>compile 'com.android.support:design:22.2.0'</strong></span>

在MD(支持5.0状态栏沉浸等特征)风格的app中，例如如下风格的侧滑菜单非常常见：

一、使用

（一）布局文件 activity_main.xml

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout    android:id="@+id/id_drawer_layout"    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true"  >    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="match_parent">        <android.support.v7.widget.Toolbar            android:id="@+id/id_toolbar"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize"            android:background="?attr/colorPrimary"            app:layout_scrollFlags="scroll|enterAlways"            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"           />        <TextView            android:id="@+id/id_tv_content"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:text="HelloWorld"            android:textSize="30sp"/>    </RelativeLayout>    <android.support.design.widget.NavigationView        android:id="@+id/id_nv_menu"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_gravity="left"        android:fitsSystemWindows="true"        app:headerLayout="@layout/header_just_username"        app:menu="@menu/menu_zlb"        /></android.support.v4.widget.DrawerLayout>

可以看到我们的最外层是DrawerLayout，里面一个content，一个作为drawer。我们的drawer为NavigationView。
注意这个view的两个属性app:headerLayout="@layout/header_just_username"和app:menu="@menu/menu_drawer"，分别代表drawer布局中的header和menuitem区域，当然你可以根据自己的情况使用。

接下来看看header的布局文件和menu配置文件：

header.xml

<?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/colorPrimary"    android:orientation="vertical"    android:padding="16dp" >    <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/zlb_lover"/>    <TextView        android:id="@+id/id_username"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_above="@id/id_link"        android:text="Bad boy"/>    <ImageView        android:layout_width="72dp"        android:layout_height="72dp"        android:layout_above="@id/id_username"        android:layout_marginBottom="16dp"        android:src="@mipmap/default_portrait"/></RelativeLayout>

menu.xml

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    <group >        <item            android:id="@+id/nav_home"            android:checkable="true"            android:icon="@mipmap/icon_feedback"            android:title="信息反馈"/>        <item            android:checkable="true"            android:id="@+id/nav_messages"            android:icon="@mipmap/icon_setting"            android:title="设置"/>        <item            android:checkable="true"            android:id="@+id/nav_friends"            android:icon="@mipmap/icon_update"            android:title="系统更新"/>        <item            android:checkable="true"            android:id="@+id/nav_discussion"            android:icon="@mipmap/icon_user_center"            android:title="用户中心"/>    </group>    <item android:title="Sub items">        <menu>            <item                android:checkable="true"                android:icon="@mipmap/icon_about"                android:title="关于我们"/>            <item                android:checkable="true"                android:icon="@mipmap/icon_about"                android:title="关于版本"/>        </menu>    </item></menu>别忘了设置theme~
<code class="language-xml hljs  has-numbering"><span style="color:#FF6666;"><span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"Theme.DesignDemo"</span> <span class="hljs-attribute">parent</span>=<span class="hljs-value">"Base.Theme.DesignDemo"</span>></span><span class="css">    </span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>    <span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"Base.Theme.DesignDemo"</span> <span class="hljs-attribute">parent</span>=<span class="hljs-value">"Theme.AppCompat.Light.NoActionBar"</span>></span><span class="css">        <<span class="hljs-tag">item</span> <span class="hljs-tag">name</span>="<span class="hljs-tag">colorPrimary</span>"><span class="hljs-id">#673AB7</span></<span class="hljs-tag">item</span>>        <<span class="hljs-tag">item</span> <span class="hljs-tag">name</span>="<span class="hljs-tag">colorPrimaryDark</span>"><span class="hljs-id">#512DA8</span></<span class="hljs-tag">item</span>>        <<span class="hljs-tag">item</span> <span class="hljs-tag">name</span>="<span class="hljs-tag">colorAccent</span>"><span class="hljs-id">#FF4081</span></<span class="hljs-tag">item</span>><span class="hljs-at_rule"><span class="hljs-keyword"></span>    </span></span><span class="hljs-tag"></<span class="hljs-title">style</span>></span></span></code><pre name="code" class="prettyprint"><code class="language-xml hljs  has-numbering"><span class="hljs-tag"><<span class="hljs-title">activity</span><span class="hljs-attribute"></span><span class="hljs-value"></span>   <span style="color:#FF0000;"> <span class="hljs-attribute">android:theme</span>=<span class="hljs-value">"@style/Theme.DesignDemo"</span>></span></span><span class="hljs-tag"></<span class="hljs-title">activity</span>></span></code>

最后MainActivity.class

public class MainActivity extends AppCompatActivity {    private DrawerLayout mDrawerLayout;    private NavigationView mNavigationView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mDrawerLayout = (DrawerLayout) findViewById(R.id.id_drawer_layout);        mNavigationView = (NavigationView) findViewById(R.id.id_nv_menu);        /**         *不写下面代码，navigationView中菜单的图片默认是灰色的，         *如果我想让图片就是显示他本身的颜色该怎么办呢？在Java代码中调用如下方法：         */        mNavigationView.setItemIconTintList(null);        Toolbar toolbar = (Toolbar) findViewById(R.id.id_toolbar);        setSupportActionBar(toolbar);//设置toolbar        getSupportActionBar().setHomeAsUpIndicator(R.mipmap.icon_back);//更改toolbar的返回按钮图片        getSupportActionBar().setDisplayHomeAsUpEnabled(true);        setupDrawerContent(mNavigationView);    }    private void setupDrawerContent(NavigationView navigationView)    {        navigationView.setNavigationItemSelectedListener(                new NavigationView.OnNavigationItemSelectedListener()                {                    @Override                    public boolean onNavigationItemSelected(MenuItem menuItem)                    {                        menuItem.setChecked(true);                        mDrawerLayout.closeDrawers();//关闭抽屉                        return true;                    }                });    }    //添加menu    @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.menu_zlb,menu);        return  true;    }    //菜单项单击事件    @Override    public boolean onOptionsItemSelected(MenuItem item)    {        if(item.getItemId() == android.R.id.home)        {            mDrawerLayout.openDrawer(GravityCompat.START);            return true ;        }        return super.onOptionsItemSelected(item);    }}