使用NaviGationView来配置SlidingMenu的左侧菜单——学习笔记

大概实现下面这样的效果吧，不过这个布局是之前用过的DrawerLayout的左侧菜单，现在把它实现在SlidingMenu的左侧菜单上， 相当于承接了前几篇的布局：

使用NaviGationView之前呢，需要添加Design Support库，因为这个控件是由这个库提供的，之后还会用到一个圆形化图片的控件，所以也需要添加这个控件的依赖，虽然之前已经添加过了，不过这里再声明一下

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

NaviGationView分为两个部分，一个是头布局，一个是下面的菜单列表，从上面的图可以看的非常明白，所以需要准备headerLayout和menu.

在res下创建menu文件夹，然后创建一个nav_menu.xml,代码如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <group android:checkableBehavior="single">

        <item
            android:id="@+id/my_friends"
            android:title="我的好友"
            android:icon="@mipmap/ic_friends"/>
        <item
            android:id="@+id/my_collection"
            android:title="我的收藏"
            android:icon="@mipmap/ic_collection"/>
        <item
            android:id="@+id/my_history"
            android:title="浏览历史"
            android:icon="@mipmap/ic_history"/>
        <item
            android:id="@+id/my_account"
            android:title="账号管理"
            android:icon="@mipmap/ic_account"/>
        <item
            android:id="@+id/my_update"
            android:title="下载完整版客户端"
            android:icon="@mipmap/ic_update"/>
        <item
            android:id="@+id/my_exit"
            android:title="退出"
            android:icon="@mipmap/ic_exit"/>

    </group>
</menu>

图片资源是利用很久以前找的，上面的代码中需要注意，item是写在一个group中的，同时这个group指定了一条属性，就是item都只能单选，不能多选。

接下来准备headerLayout，在layout文件夹中创建nav_header.xml，布局如下：

<?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:padding="5dp"
    android:background="@drawable/head_background">

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="85dp"
        android:layout_height="85dp"
        android:id="@+id/my_header"
        android:src="@drawable/huaji1"
        android:layout_centerInParent="true"/>

    <TextView
        android:id="@+id/my_email"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="FuckYouHolyShit@.com"
        android:textSize="14sp"
        android:textColor="#fff"
        android:layout_alignParentBottom="true"/>

    <TextView
        android:id="@+id/my_name"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="一个老瓜皮"
        android:textSize="14sp"
        android:textColor="#fff"
        android:layout_above="@+id/my_email"/>

</RelativeLayout>

将头布局完成后，接下来前往SlidingMenu的左菜单来完成整个左菜单的布局，在leftmenu_pager.xml中这样布局：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">


    <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:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"/>

</FrameLayout>

然后布局就完成了，就是下面这个样子：

然后就是给左侧菜单这些item设置一下点击事件，下面是LeftMenuFragment的代码：

public class LeftMenuFragment extends BaseFragment {
    private NavigationView navView;

    @Override
    public View initView() {
        View view = View.inflate(context, R.layout.leftmenu_pager, null);
        navView = (NavigationView) view.findViewById(R.id.nav_view);

        LogUtil.e("左侧菜单页面被初始化");
        return view;
    }

    @Override
    public void initData() {
        super.initData();
        LogUtil.e("左侧数据被初始化");

        navView.setCheckedItem(R.id.my_friends);//设置默认选中哪个item
        navView.setNavigationItemSelectedListener(new MyNavigationItemSelectedListener());
    }

    //点击事件监听
    class MyNavigationItemSelectedListener implements NavigationView.OnNavigationItemSelectedListener{

        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()){
                case R.id.my_friends:
                    Toast.makeText(context, "还没有设置好友功能", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.my_collection:
                    Toast.makeText(context, "还没有设置收藏功能", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.my_history:
                    Toast.makeText(context, "还没有设置浏览历史功能", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.my_account:
                    Toast.makeText(context, "还没有设置账号管理功能", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.my_update:
                    Toast.makeText(context, "然而并没有客户端！！", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.my_exit:
                    getActivity().finish();
                    break;
                default:
                    break;
            }
            return true;
        }
    }
}

不过有一点需要注意，之前我设置过让左侧菜单也具有全屏滑动功能，这个会和点击功能有冲突，所以先暂时把在MainActivity中的这行代码注释掉，然后点击功能就能正常使用了：

slidingMenu.setTouchModeBehind(SlidingMenu.TOUCHMODE_FULLSCREEN);//同时给左菜单添加滑动

下面是整个运行示例：

关于如何解决冲突事件，之后再来补充。

————————————————————————————————————————————————————

2017.10.26日补充，解决左侧菜单设置全屏滑动后菜单内部按钮无法点击的问题

解决方法：

1、在SlidingMenu的库中找到CustomViewAbove.java,搜索onTouchEvent函数，找到MotionEvent.ACTION_DOWN，修改break为return mQuickReturn;

2、找到CustomViewBehind.java,搜索onInterceptTouchEvent函数，
将原先的：return !mChildrenEnabled;
替换为：return mViewAbove.onInterceptTouchEvent(e);

3、找到CustomViewBehind.java,搜索onTouchEvent函数，
将原先的：return !mChildrenEnabled;
替换为：return mViewAbove.onTouchEvent(e);

4、找到你的菜单布局文件，在根布局上添加属性：

android:clickable=”true”

第四步的话因人而异。
下面是效果：

还剩下顶部状态栏的沉浸式效果的问题没有结局，之后再来补充。