AndroidASD完全解析01之NavigationView

　　在2015年GoogleIO大会上，Google除了推出Android L之外，还推出了一个全新的支持库Android Support Design Library，这个库给我们提供了8个具有规范的Merterial Design风格控件。这8个控件分别是：NavigationView，TextInputLayout，FloatingActionButton，Snackbar，TabLayout，CoordinatorLayout，AppBarLayout，CollapsingToolbarLayout，接下来我们会写一系列的文章介绍这个ASD库，TabLayout我们在前面已经介绍过了，想了解的猛戳这里，下面我们开始学习这个ADS库吧。

在Android Studio中使用这个库需要在gradle中添加如下代码：

compile 'com.android.support:design:24.0.0'

这一篇我们开始学习第一个控件：NavigationView

概述

　　侧滑菜单在我们开发中非常常用，例如QQ等应用，在没有这个NavigationView之前，我们考虑的是通过FrameLayout+DrawerLayout实现，现在有了这个控件，我们就不在需要再考虑那么多了。有了NavigationView之后，我们只需要写一下布局就可以实现了，而且非常符合Google的MD设计风格，效果也非常好，并且向下兼容到2.1，下面我们来学习使用一下这个强大的控件吧！

使用

使用起来非常easy，只需要写一下布局文件就可以了，下面我们通过一个例子实现一下：

首先是布局文件代码：

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.adsdemo.MainActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

</LinearLayout>

<android.support.design.widget.NavigationView
    android:id="@+id/nv"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="left"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/head_layout"
    app:menu="@menu/menu_main"/>
</android.support.v4.widget.DrawerLayout>

NavigationView与DrawerLayout一起使用，NavigationView类似于一个Framelayout，android:layout_gravity=”left”这句代码设置从屏幕左边滑出。app:headerLayout=”@layout/head_layout”这句是添加一个头布局，代码如下：

<?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="160dp"
          android:layout_marginTop="10dp"
          android:background="#81C784"
          android:orientation="vertical">

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginTop="16dp"
    android:src="@mipmap/ic_account_circle"/>

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:gravity="center"
    android:text="用户名"
    android:textColor="#ffffff"
    android:textSize="18sp"/>

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:gravity="center"
    android:text="不要只是路过"
    android:textColor="#ffffff"
    android:textSize="18sp"/>
</LinearLayout>

这里没有什么好解析的，就是一个简单的布局而已。在上一个布局文件中，app:menu=”@menu/menu_main”这句代码是给NavigationView添加一个menu，一般在AS中不会默认创建menu文件夹，需要自己创建，直接在res目录下创建即可，menu_main的代码如下：

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


<group
    android:id="@+id/menu_has_icon"
    android:checkableBehavior="none">
    <item
        android:id="@+id/menu_nv"
        android:icon="@mipmap/ic_app"
        android:title="NavigationView实例"/>
    <item
        android:id="@+id/menu_til"
        android:icon="@mipmap/ic_friends"
        android:title="TextInputLayout实例"/>
    <item
        android:id="@+id/menu_fab"
        android:icon="@mipmap/ic_messages"
        android:title="FloatingActionButton实例"/>
    <item
        android:id="@+id/menu_sb"
        android:icon="@mipmap/ic_notification"
        android:title="Snackbar实例"/>

</group>

<group
    android:id="@+id/menu_not_icon"
    android:checkableBehavior="none">

    <item
        android:id="@+id/menu_cl"
        android:title="CoordinatorLayout实例"/>
    <item
        android:id="@+id/menu_al"
        android:title="AppBarLayout实例"/>
    <item
        android:id="@+id/menu_ctl"
        android:title="CollapsingToolbarLayout实例"/>
</group>

<group
    android:id="@+id/menu_other"
    android:checkableBehavior="none">
    <item
        android:id="@+id/ic_setting"
        android:icon="@mipmap/ic_app"
        android:title="设置"/>
    <item
        android:id="@+id/ic_search"
        android:icon="@mipmap/ic_search"
        android:title="搜索"/>
</group>
</menu>

在menu中，如果给group设置id属性就会有分割线，不设置的话不会有。好了，到这里基本把侧滑菜单的布局搞定了，下面我们来看看Activity的代码：

package com.example.adsdemo;

import android.graphics.Color;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
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 implements NavigationView.OnNavigationItemSelectedListener {


private DrawerLayout mDrawerLayout;
private NavigationView mNavigationView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    toolbar.setTitleTextColor(Color.WHITE);
    setSupportActionBar(toolbar);

    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);
    mNavigationView = (NavigationView) findViewById(R.id.nv);

    ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);
    mDrawerLayout.addDrawerListener(actionBarDrawerToggle);
    actionBarDrawerToggle.syncState();


    mNavigationView.setNavigationItemSelectedListener(this);
}

/**
 * NavigationView里面Item监听事件
 *
 * @param item
 * @return
 */
@Override
public boolean onNavigationItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.menu_nv:
            ToastUtils.showToast(this, "NavigationView使用实例");
            break;
        case R.id.menu_til:
            ToastUtils.showToast(this, "TextInputLayout使用实例");
            break;
        case R.id.menu_fab:
            ToastUtils.showToast(this, "FloatingActionButton使用实例");
            break;
        case R.id.menu_sb:
            ToastUtils.showToast(this, "Snackbar使用实例");
            break;
        case R.id.menu_cl:
            ToastUtils.showToast(this, "CoordinatorLayout使用实例");
            break;
        case R.id.menu_al:
            ToastUtils.showToast(this, "AppBarLayout使用实例");
            break;
        case R.id.menu_ctl:
            ToastUtils.showToast(this, "CollapsingToolbarLayout使用实例");
            break;
        case R.id.ic_setting:
            ToastUtils.showToast(this, "设置");
            break;
        case R.id.ic_search:
            ToastUtils.showToast(this, "搜索");
            break;
    }
    mDrawerLayout.closeDrawer(GravityCompat.START);
    return true;
}
}

　　这一句setSupportActionBar(toolbar)中，给Activity设置一个ToolBar，需要给当前的Activity换一个没有Actionbar的主题，不然会报错，或者也可以直接在整个APP中换一个没有ActionBar的主题。

　然后下面就是给DrawerLayout设置一个addDrawerListener，因为ActionBarDrawerToggle已经实现了DrawerLayout.DrawerListener这个接口，所以我们可以直接用ActionBarDrawerToggle，里面的五个参数分别是：Context上下文对象，DrawerLayout，第三个可以直接用ToolBar，最后就是两个普通的值了。

　　必须要用 actionBarDrawerToggle.syncState();这一句，不然不起作用。

　 mNavigationView.setNavigationItemSelectedListener(this); 这一句是给NavigationView里面的Item设置监听。

下面我们看一下最终的效果

总的来说这个控件的使用不是很复杂，猛戳这里可以看到NavigationView的国内镜像API。NavigationView这个控件就介绍到这里了，如果有什么错误的欢迎留言指出。下一篇我们会介绍一下另外一个控件：TextInputLayout，这个使用也很简单，但是效果很好。