Material Design系列教程（10） - NavigationView

简介

NavigationView，中文译为：导航视图，主要用作应用的导航菜单。

先来看下 NavigationView 的官方文档：

NavigationView

从文档中可以看到，NavigationView 存在于 design 包中，且继承于FrameLayout。它通常被放置在 DrawerLayout 内部，作为侧滑导航菜单。

NavigationView 基本使用方法

NavigationView 的使用方式很简单，因为它的布局可以说是固定的，如下图所示：

NavigationView

可以看到，NavigationView 的布局主要包括两大部分：

• 头部布局：可通过app:headerLayout设置头部布局

• 菜单布局：可通过app:menu指定导航菜单的资源文件

现在，就让我们动手实现上面那张图显示的内容：

布局如下：

其中，NavigationView 的app:headerLayout的布局详情如下：

NavigationView 的app:menu的布局详情如下：

标签的作用就是归类菜单，可以为该组菜单选择设置某种行为（如单选），布局效果上会显示出一条分割线。

然后，我们先来看下效果：

可以看到，效果基本出来了，但是菜单图片却显示灰色的，这个需要在代码中调用：

NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);
navigationView.setItemIconTintList(null);

这样菜单按钮的颜色就会正常显示了。

下面为头部布局增加控件点击事件，就比如我们要实现上面例子中，头部布局的ImageView的点击事件：

源码如下：

        View headerView = this.mNavigation.getHeaderView(0);
        headerView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(v, "ImageView clicks", Snackbar.LENGTH_SHORT).show();
            }
        });
    }

接下来为菜单增加点击事件，那其实就更简单了，源码如下：

this.mNavigation.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        Snackbar.make(NavigationViewActivity.this.mNavigation, item.getTitle(), Snackbar.LENGTH_SHORT).show();
        item.setCheckable(true);//设置选项可选
        item.setChecked(true);//设置选型被选中
        return true;
    }
}); 

可以通过 MenuItem 的getItemId()方法得到点击 Item 的控件 id，然后你就可以做对应的操作。我们这个例子只是简单获取菜单 Item 标题。

最终效果如下：

NavigationView_Menu_Listener

总结

其实，NavigationView 只是 Google 给我们提供的一个导航视图控件，其实我们自己去写一个类似的布局完全是能够替换 NavigationView 的，只是自己需要耗费额外的布局时间。

NavigationView 可以很好地帮助我们完成常见的导航视图布局，但是它对于个性化的定制上面支持的并不好，比如：

1. 不能动态调整菜单项的个数与内容。虽然NavigationView提供了inflateMenu方法，但是该方法只能在现有菜单上增加新的菜单，并不能替换掉原有菜单。
2. 无法设置菜单文字的大小。
3. 每个菜单项只有图标和文字，不能添加其他控件。
4. 无法设置每个菜单项的间距。

因此，要想实现丰富可定制的导航菜单，还得自己定义一个导航视图。

参考

• 官方文档 - NavigationView

• Android开发笔记（一百三十三）导航视图NavigationView