Android分栏导航_NavigationView

这是在 Android 6.0 推出的新控件, 目的是配合DrawerLayout 方便的实现 Google的Material Design设计规范, 简单的说就是将一个菜单和一个布局组成一个新的布局NavigationView.

演示

添加依赖

这是Google提供的design包下的控件, 后面的版本号可以建议跟随最新的sdk版本号

1
compile 'com.android.support:design:25.0.1'

定义布局

在布局文件中添加android.support.design.widget.NavigationView控件

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
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/drawer_main"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--页面内容-->
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/drawer_main_menu"/>
</android.support.v4.widget.DrawerLayout>

宽度layout_height:建议不要超过280dp, 推荐使用wrap_content

菜单方向layout_gravity: 表示菜单在左方还是右方划出.

NaigationView里面包括两个重要的属性app:headerLayoutapp:menu

NavigationView由这两部分组成:Header和menu

引入的两个XMl

drawer_header
这里没有代码补全提示请自己手动输入, android:layout_height 这个属性值填 match_parent 或者wrap_content都是包裹内容, 建议使用Google默认的160dp

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:background="@color/colorPrimary"
android:layout_height="160dp">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/ic_launcher"/>
</LinearLayout>

drawer_main_menu

这里给菜单设置的图标都会变成Google默认的灰色,这里我也会介绍怎么修改颜色

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:icon="@mipmap/ic_launcher"
android:title="演示"/>
<item
android:icon="@mipmap/ic_launcher"
android:title="演示"/>
<item
android:icon="@mipmap/ic_launcher"
android:title="演示"/>
</menu>

菜单样式

通过NavigationView的属性修改菜单样式, 并不提供修改单个菜单选项的颜色, 因为这并不符合MaterialDesign设计规范, 如果有需要直接自定义就行了

修改菜单的文字颜色

1
app:itemTextColor="@color/colorPrimary"

修改菜单的图标颜色

1
app:itemIconTint="@color/colorPrimary"

监听器

监听点击事件

1
2
3
4
5
6
7
8
9
10
11
mNavView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
// 设置菜单条目为被点击状态
item.setCheckable(true);
// 关闭抽屉
mDrawerMain.closeDrawer(GravityCompat.START);
// 默认返回false, 如返回true, 更新UI为被点击状态
return true;
}
});

onNavigationItemSelected的返回值不同, 被点击后的状态也不一样,

返回false

返回true