Material Design系列教程（10） - Naviga

简介

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

先来看下 NavigationView 的官方文档：

NavigationView

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

NavigationView 基本使用方法

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

NavigationView

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

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

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

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

布局如下：

<?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:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Main Content"
        android:textSize="30sp" />

    <android.support.design.widget.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_drawer_header"
        app:menu="@menu/menu_navigation_drawer" />

</android.support.v4.widget.DrawerLayout>

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

<?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="200dp">

    <ImageView
        android:id="@+id/img"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/girl" />

</LinearLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<!--res/menu/menu_navigation_drawer.xml-->
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/item_one"
            android:icon="@mipmap/ic_launcher_round"
            android:title="Item 1" />
        <item
            android:id="@+id/item_two"
            android:icon="@mipmap/ic_launcher_round"
            android:title="Item 2" />
        <item
            android:id="@+id/item_three"
            android:icon="@mipmap/ic_launcher_round"
            android:title="Item 3" />
    </group>

    <item android:title="SubItem">
        <menu>
            <item
                android:id="@+id/subitem_one"
                android:icon="@mipmap/ic_launcher"
                android:title="SubItem 1" />
            <item
                android:id="@+id/subitem_two"
                android:icon="@mipmap/ic_launcher"
                android:title="SubItem 2" />
            <item
                android:id="@+id/subitem_three"
                android:icon="@mipmap/ic_launcher"
                android:title="SubItem 3" />
        </menu>
    </item>

</menu>

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

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

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

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