Android Design Library之三: NavigationView

##简介
要想实现抽屉式的效果,在之前我们大都是使用的SlidingMenu等第三方库。不过Google发布了DrawerLayout来实现相同的效果。各有优缺点吧。这里我们介绍NavigationView的使用。
先来看下最终的效果。
NavigationView效果

Demo

先看下实际运行的效果。感觉还是蛮不错的吧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?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/drawer_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="55dp"
android:background="@color/main"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:title="Title"
app:titleTextColor="@color/white"/>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_main"
android:layout_width="250dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/layout_nav_header"
app:itemIconTint="@null"
app:itemTextColor="#009688"
app:menu="@menu/nav"/>
</android.support.v4.widget.DrawerLayout>

需要注意的是,需要按照官方文档中的说明将你的布局放在NagigationView的上方。不然会有一些意想不到的效果,就因为这个,之前吃了挺大的亏。
通过headerLayout设置menu的头视图。通过menu属性设置每一个item。
NavigationView有几个属性:

  • itemBackground: 设置每一个item的背景颜色。
  • itemIconTint: 改变menu中的图标颜色
  • itemTextAppearance:设置每个item的字体样式。
  • itemTextColor:设置每个item的文字颜色。

Toggle

设置toggleDrawerLayout进行联动。方法很简单。就几句代码。

1
2
3
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer, toolbar, R.string.open, R.string.close);
toggle.syncState();
drawer.addDrawerListener(toggle);

##item 点击时间。
通过设置NavigationItemSelectedListener来为每一个条目设置点击事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
navigation.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.nav_music:
break;
case R.id.nav_movie:
break;
case R.id.nav_setting:
break;
}
return false;
}
});

监听back

当抽屉展开的时候,点击返回按钮收起收起,代码很简单。

1
2
3
4
5
6
7
8
@Override
public void onBackPressed() {
if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}

完成代码

GitHub地址