文章标题

用NavigationView实现抽屉式导航

一、写一个DrawerLayout

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    android:id="@+id/id_drawer_layout"
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/id_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/main_blue"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_below="@id/id_toolbar"
            android:text="@string/hello_world"/>
    </RelativeLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/id_nv_menu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/drawer"
        />
</android.support.v4.widget.DrawerLayout>

可以看到最外层是DrawerLayout，里面一个content，一个作为drawer。我们的drawer为NavigationView。
注意这个view的两个属性app:headerLayout=”@layout/header_just_username”和app:menu=”@menu/menu_drawer”，分别代表drawer布局中的header和menuitem区域，当然你可以根据自己的情况使用。

二、写header的布局文件和menu配置文件

1.下面是header的布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="160dp">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/header_image"
        android:layout_marginLeft="39dp"
        android:layout_marginStart="39dp"
        android:src="@drawable/ic_launcher"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"
        android:id="@+id/textView"
        android:layout_below="@+id/header_image"
        android:layout_alignLeft="@+id/header_image"
        android:layout_alignStart="@+id/header_image"
        android:layout_marginTop="23dp"
        android:layout_alignRight="@+id/header_image"
        android:layout_alignEnd="@+id/header_image" />
</RelativeLayout>

header的布局文件和普通的布局文件一样，很自由。

2.menu的配置文件

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group>
        <item
            android:id="@+id/id_drawer_home"
            android:checkable="true"
            android:title="工作日历"/>
        <item
            android:id="@+id/id_drawer_part_time"
            android:checkable="true"
            android:title="寻找兼职"/>
        <item
            android:id="@+id/id_drawer_sign_in"
            android:checkable="true"
            android:title="打卡统计"/>
        <item
            android:id="@+id/id_drawer_information"
            android:checkable="true"
            android:title="个人资料"/>
        <item
            android:id="@+id/id_drawer_salary"
            android:checkable="true"
            android:title="薪酬结算"/>
    </group>

    <item
        android:id="@+id/id_sub_items"
        android:title="其他">
        <menu>
            <item
                android:id="@+id/id_drawer_about"
                android:checkable="true"
                android:title="关于"/>
            <item
                android:id="@+id/id_drawer_feedback"
                android:checkable="true"
                android:title="反馈"/>
        </menu>
    </item>

</menu>

通过为item添加子菜单来实现带有头部的分组效果，每添加一个分组，都会在该组的最上面添加一根分割线，以和普通的item区分。

三、Activity处的代码

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);

        mDrawerLayout = (DrawerLayout) findViewById(R.id.id_drawer_layout);
        mNavigationView = (NavigationView) findViewById(R.id.id_nv_menu);

        Toolbar mtoolbar = (Toolbar)findViewById(R.id.id_toolbar);
        setSupportActionBar(mtoolbar);

        final ActionBar mActionBar = getSupportActionBar();
        mActionBar.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp);
        mActionBar.setDisplayHomeAsUpEnabled(true);

        setUpDrawerWithNavigationView(mNavigationView);
    }

    private void setUpDrawerWithNavigationView(NavigationView mNavigationView) {
        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {
                menuItem.setChecked(true);
                mDrawerLayout.closeDrawers();
                return true;
            }
        });
    }

我们在Activity里面可以通过navigationView去navigationView.setNavigationItemSelectedListener，当selected的时候，menuItem去setChecked(true)。

最后，在home菜单被点击的时候，打开drawer：

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

    return super.onOptionsItemSelected(item);
}

总结：利用android.support.design包里的NavigationView可以简单地实现抽屉式导航。