Navigation View的使用详解

在这篇文章中，我们将讨论一下Navigation View。

• Material Design定义了 一个抽屉导航应该有何种外观和感受 。

Navigation View是如何工作的?

基本上就是把它添加到DrawerLayout以前用于自定义view的地方。Navigation View需要接收几个必要的参数、一个用于显示头部的布局（可选）以及用于建立导向选项的菜单，这些都设置完之后，你就只添加监听选中事件的listener就行了。

实现

首先，创建菜单。菜单元素是放在group标签之下，同时声明每次只能有一个item被选中：

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group
        android:checkableBehavior="single">

        <item
            android:id="@+id/drawer_home"
            android:checked="true"
            android:icon="@drawable/ic_home_black_24dp"
            android:title="@string/home"/>

        <item
            android:id="@+id/drawer_favourite"
            android:icon="@drawable/ic_favorite_black_24dp"
            android:title="@string/favourite"/>
        ...

        <item
            android:id="@+id/drawer_settings"
            android:icon="@drawable/ic_settings_black_24dp"
            android:title="@string/settings"/>

    </group>
</menu>

官网的介绍中也是这样用的，你可以试试没有android:checkableBehavior=”single”会是什么样子。

理论上，我们还可以通过为item添加子菜单来实现带有头部的分组效果，代码类似于：

<?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/drawer_home"
            android:checked="true"
            android:icon="@drawable/ic_home_black_24dp"
            android:title="@string/home"/>


        <item
            android:id="@+id/section"
            android:icon="@drawable/ic_more_horiz_black_24dp"
            android:title="分组1">
            <menu>
                <item
                    android:id="@+id/drawer_favourite"
                    android:icon="@drawable/ic_favorite_black_24dp"
                    android:title="@string/favourite"/>

                <item
                    android:id="@+id/drawer_downloaded"
                    android:icon="@drawable/ic_file_download_black_24dp"
                    android:title="@string/downloaded"/>
            </menu>
        </item>

        <item
            android:id="@+id/section2"
            android:title="分组2">
            <menu>
                <item
                    android:id="@+id/drawer_more"
                    android:icon="@drawable/ic_more_horiz_black_24dp"
                    android:title="@string/more"/>

                <item
                    android:id="@+id/drawer_settings"
                    android:icon="@drawable/ic_settings_black_24dp"
                    android:title="@string/settings"/>
            </menu>
        </item>


    </group>
</menu>

可以看到效果其实弱爆了。。。

• 注意我给出的代码，分组1的标题我们设置了

android:icon="@drawable/ic_more_horiz_black_24dp"

但实际只显示了文字，可见分组的头部只能为文字。

• 还有个问题，似乎分组的子item无法设置为选中状态，建议你们也自己试试。
  注：分组是可以选中的，在子 menu item 设置 android:checkable=”true” 就行了

现在我们可以添加一个navigation view到activity布局中了，在navigation view里设置好菜单和头部。头部我就不讲了，它可以是任意的布局。你可以在 这里 查看使用的例子。

<android.support.v4.widget.DrawerLayout
    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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

    ...

    </FrameLayout>

    <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>

最后一步是java代码，先启用home as up：

final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
final ActionBar actionBar = getSupportActionBar();

if (actionBar != null) {
    actionBar.setHomeAsUpIndicator(R.drawable.ic_menu_black_24dp);
    actionBar.setDisplayHomeAsUpEnabled(true);
}
接下来，初始化navigation drawer。当一个item被选中的时候，显示一个snackbar（下一篇文章我们将讨论），设置该item为被选中状态同时关闭drawer：

drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

NavigationView view = (NavigationView) findViewById(R.id.navigation_view);
view.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override public boolean onNavigationItemSelected(MenuItem menuItem) {
        Snackbar.make(content, menuItem.getTitle() + " pressed", Snackbar.LENGTH_LONG).show();
        menuItem.setChecked(true);
        drawerLayout.closeDrawers();
        return true;
    }
});

最后，在home菜单被点击的时候，打开drawer（这一步和navigation view其实没啥关系）：

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case android.R.id.home:
            drawerLayout.openDrawer(GravityCompat.START);
            return true;
    }

    return super.onOptionsItemSelected(item);
}

总结

design support library与Navigation View确实让我们很容易创建一个符合Material准则的navigation drawer。接下来的文章我们将涉及其他几个简化用户界面开发的元素。提醒一下，所有的代码都在这里：MaterializeYourApp

---

本文转载于http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0608/3011.html