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的这种效果我们自己其实也是可以实现的，但是既然有现成的用为什么不用了呢，是吧。。。。。