FC 12.3.2 滑动菜单NavgationView

我们可以在滑动菜单页面定制任意的布局，不过谷歌给我们提供了一种更好的办法——使用NavgationView，NavgationView是Design Support库中的一个控件，它不仅是严格按照 Material Design 的要求设计的，而且可以将滑动变的非常简单。

导入依赖包

compile 'de.hdodenhof:circleimageview:2.1.0'
compile 'com.android.support:design:24.2.1'

（这里我新建项目是android6.0，compileSdkVersion对应的是26，导入com.android.support:design:24.2.1不成功，最终使用了一个比较笨的办法，将compileSdkVersion等一系列参数改成对应郭神编写的版本，如果有什么更好的办法，请留言！）

（第一个依赖库就是 Design Support 库；第二个库是一个开源的CircleImageView，轻松实现圆形化的功能。）

准备原料

我们首先要准备：menu（在NavigationView中显示的菜单项） 和 headerLayout（在NavigationView中显示头部布局的）。

创建menu.xml

右击menu==>new==>Menu Resourse，创建nav_menu.xml文件

• （准备几张图片放在drawable-xxhdpi目录下）（icon素材地址：点我）
• 在< menu>嵌套了< group>（一组）
• 将group的checkableBehavior属性设为single（所有菜单项只能单选）。

<?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/nav_call"
            android:icon="@drawable/nav_call"
            android:title="call" />
        <item
            android:id="@+id/nav_friends"
            android:icon="@drawable/nav_friends"
            android:title="friends" />
        <item
            android:id="@+id/nav_location"
            android:icon="@drawable/nav_location"
            android:title="location" />
        <item
            android:id="@+id/nav_mail"
            android:icon="@drawable/nav_mail"
            android:title="mail" />
        <item
            android:id="@+id/nav_task"
            android:icon="@drawable/nav_task"
            android:title="task" />
    </group>
</menu>

创建nav_header.xml

右击layout，创建一个nav_header.xml文件（准备一张图片放在drawable-xxhdpi目录下。最好是一张正方形，因为一会将它圆形化）

（CircleImageView是一个用于将图片圆形话的控件，用法基本和ImageView一样很简单。）

<?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="180dp"
    android:background="?attr/colorPrimary"
    android:padding="10dp">
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/icon_image"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_centerInParent="true"
        android:src="@drawable/nav_icon" />
    <TextView
        android:id="@+id/tv_mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Jack@mail.com"
        android:textColor="#FFF"
        android:textSize="14sp" />
    <TextView
        android:id="@+id/tv_username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/tv_mail"
        android:text="Jack"
        android:textColor="#FFF"
        android:textSize="14sp" />
</RelativeLayout>

使用NavigationView

上一步我们把menu和layout这两个原材料准备好了，就可以使用NavigationView了。修改activity_main.xml

• 这里我们将上一篇文章里的textview修改成了NavigationView，这样滑动菜单里的内容就变成NavigationView了
• 通过app:headerLayout和app:menu属性将我们刚才准备好的layout和menu设置了了进去，这样NavigationView就定义好了

<?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:id="@+id/drawer_Layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    </FrameLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu" />
</android.support.v4.widget.DrawerLayout>

NavigationView定义好了，接下来我们添加菜单项的单击事件

• 首先获取到NavigationView实例
• 然后调动它的setCheckedItem将call设置为默认选中
• 然后调用setNavigationItemSelectedListener设置菜单项选中事件的监听器。（没有添加其他逻辑，只调用了DrawerLayout.closeDrawers()方法将滑动菜单关闭）

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_Layout);
    NavigationView navView = (NavigationView) findViewById(R.id.nav_view);
    ActionBar actionBar = getSupportActionBar();
    if (actionBar != null) {
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
    }
    navView.setCheckedItem(R.id.nav_call); //设置默认选中
    navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { //菜单选项监听事件
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            //处理逻辑
            mDrawerLayout.closeDrawers();
            return true;
        }
    });
}

运行，如图：

做出来效果还是不错的。