集下拉刷新、自动加载和侧滑菜单的RecyclerView基本实现原理

目录

前言

　　现在这个功能的框架也挺多的了。之所以要写是因为这个框架是自己亲手实现的。说起来有点小激动，这是我正经写出来的第一个框架。对于”不要重复造轮子”这句话，我一直不是太认同，得从不同的维度看。如果从使用上来看，当然没必要重复造轮子，白白费时费力不划算。但是如果从个人学习的角度来看的话，重复造轮子不但应该去做，而且很有必要。只会使用轮子对个人的成长帮助不大。你得知道它是怎么工作的，它为什么能够这样工作，然后更进一步的话，看看我还能不能改进它？而学习轮子效果最好的方法，我认为就是自己再造一个轮子。说白了你来山寨一个，如果可以，就改进它！

正文

项目地址

　　demo和library源码地址：https://github.com/zhangyuChen1991/PtrSwipeMenuRecyclerView

效果

　　和常见的侧滑以及下拉刷新效果一样，见下图：
侧滑菜单效果：

下拉刷新效果：

上拉加载效果:

效果图就是这样，基本使用在上面源码地址中都有，步骤非常简便。下面主要想说的，是它实现的基本原理。

1.侧滑原理

　　侧滑的主要实现，靠的是一个自定义的布局容器。项目中类名为：SwipeMenuLayout，继承FrameLayout.

public class SwipeMenuLayout extends FrameLayout 

　　它有两个成员：

private View contentView;
private LinearLayout menuView;

　　一目了然，一个是内容，一个是菜单。内容自然就是RecyclerView条目中的布局内容，菜单则是自定义的菜单布局。它作为一个容器，包含了这两个子布局。
　　重点是，怎么让两个子布局归位到自己的初始位置呢？内容布局铺满整个宽度，菜单布局放在屏幕外边。简单看看下面的代码：

//init()方法中执行下面三句
LayoutParams contentParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
contentView.setLayoutParams(contentParams);
menuView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

 //重写onLayout()方法
 @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        Log.d(TAG, "contentView.getWidth() = " + contentView.getWidth() + "contentView.getHeight() = " + contentView.getHeight());
        super.onLayout(changed, left, top, right, bottom);

        int contentViewWidth = contentView.getWidth();
        int contentViewHeight = contentView.getHeight();
        int menuViewWidth = menuView.getWidth();
        if (contentView != null && contentViewWidth != 0 && contentViewHeight != 0) {
            contentView.layout(0, 0, contentView.getWidth(), contentView.getHeight());

            if (menuView != null) {
                menuView.layout(contentViewWidth, 0, contentViewWidth + menuViewWidth, contentViewHeight);
            }
        }
    }

　　首先对设置进来的内容布局和菜单布局设定宽高，内容布局宽度铺满整个屏幕。菜单布局的宽度为包裹内容。然后，决定子控件的位置就是在onLayout()方法中进行的，所以重写onLayout()方法，根据内容布局和菜单布局的宽和高来执行它们的layout()方法。可以看到，内容布局的宽是铺满整个屏幕的，菜单布局的宽度范围是contentViewWidth到contentViewWidth+menuViewWidth，也就是从内容布局的宽度终点位置到这个位置加上自己宽度的位置，就刚好在屏幕外面了。
　　初始化位置搞定之后，就要开始处理它的滑动事件了，要把菜单侧滑出来，重写onTouchEvent()方法。这里需要自己来实现smoothScroll()等功能，细节上要处理控制具体可滑动方向，菜单自动打开、自动关闭等问题，具体实现请参考代码。整个SwipeMenuLayout也就两三百行代码，并不复杂。
　　处理完侧滑菜单的具体实现之后，就要考虑把它放到RecyclerView里面去，作为默认的ItemView。当使用者设置他自己的ItemView时，将其作为SwipeMenuLayout的内容布局，然后加上构造的菜单布局(使用者自定义的)，返回SwipeMenuLayout作为新的ItemView，这样，每一个Item就都具备侧滑菜单的效果了。
　　要做以上的事情，不可避免的，需要重写Adapter，这里承担这个角色的是SwipeMenuAdapter，继承RecyclerView.Adapter。

public abstract class SwipeMenuAdapter<V extends PtrSwipeMenuRecyclerView.ViewHolder> extends RecyclerView.Adapter 

　　细心的同学会发现这里ViewHolder和默认的不一样，确实，ViewHolder也重写了，主要是为了设置菜单的点击事件监听，这里先不讨论它。

 @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        menuView = createMenuView(parent, viewType);
        contentView = createContentView(parent, viewType);
        SwipeMenuLayout swipeMenuLayout = new SwipeMenuLayout(parent.getContext(), contentView, menuView);
        return onCreateThisViewHolder(swipeMenuLayout, viewType);
    }

    /**
     * 创建item内容的view布局
     *
     * @param parent
     * @param viewType
     * @return
     */
    protected abstract View createContentView(ViewGroup parent, int viewType);

    /**
     * 创建菜单view的布局
     *
     * @return
     */
    protected abstract LinearLayout createMenuView(ViewGroup parent, int viewType);

    /**
     * 创建ViewHolder
     *
     * @param contentView 已经在createContentView()中创建好，然后经过再次包裹了侧滑菜单布局的itemview
     * @param viewType
     * @return
     */
    public abstract RecyclerView.ViewHolder onCreateThisViewHolder(ViewGroup contentView, int viewType);

　　这里有三个抽象方法，createMenuView()创建一个菜单布局，由使用者自己实现，createContentView()创建一个内容布局，同样由使用者来实现。onCreateThisViewHolder则是替代了原来的onCreateViewHolder()方法，用来返回一个ViewHolder，但是在这里返回的ViewHolder，其实已经是item被包裹了SwipeMenuLayout的item了，实现了侧滑菜单的功能。
　　到这里，侧滑菜单的主干实现原理就大致说完了。下面看下拉刷新和自动加载。
　　

2.下拉刷新及自动加载原理

　　下拉刷新效果总体的流程就是：控制touch事件，根据手指滑动动态的改变头部HeaderView的高度和其内部View的状态，达到好像控件被拉下来触发刷新的效果。(当然也有根据手指滑动往下滚动View的实现方法不是这里用的不去多讲)
　　以前ListView做下拉刷新的时候，在顶部会增加一个Header作为下拉刷新头，而ListView也已经封装了setHeader()方法，十分方便。但是RecyclerView没有，所以实现下拉刷新的第一个任务就是给RecyclerView增加一个HeaderView作为下拉刷新头。
　　增加HeaderView，其实就是在RecyclerView的第0个位置放上自己特定的一个View，用来实现下拉刷新的效果。首先我们封装一个HeaderView，相当于一个自定义布局，方便下拉刷新效果变化的管理(代码略，请参考源码)。
　　要增加HeaderView，又得去重写Adapter了，好在上面做侧滑菜单的时候已经重写了，所以把SwipeMenuAdapter拿出来，继续添加代码。主要是onCreateViewHolder()方法，然后牵涉到getItemCount()和getItemViewType()等方法。由于自动加载更多所添加的FooterView与HeaderView是同样的原理，所以就一并说吧。先看代码：

public class HeaderFooterViewHolder extends RecyclerView.ViewHolder {
        public HeaderFooterViewHolder(View itemView) {
            super(itemView);
        }
    }

    @Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if (viewType == HeaderType) {
            headerViewHolder = new HeaderFooterViewHolder(new HeaderView(parent.getContext()));
            return headerViewHolder;
        }
        if (viewType == FooterType) {
            footerViewHolder = new HeaderFooterViewHolder(new FooterView(parent.getContext()));
            if(!footerViewEnable) { //不允许上拉加载更多，隐藏FooterView
                FooterView footerView = (FooterView) footerViewHolder.itemView;
                footerView.setNowState(FooterView.STATE.HIND);
            }
            return footerViewHolder;
        }
        ...
        ... 
    }

@Override
    public int getItemCount() {
        //添加Header和Footer的数目
        return getThisItemCount() + 2;
    }

    /**
     * 此方法执行RecyclerView.Adapter中getItemCount()的逻辑
     *
     * @return
     */
    public abstract int getThisItemCount();

    /**
     * 重写此方法时请注意保留父类方法的逻辑，否则导致header计数混乱，下拉刷新出错
     * 使用position时注意减1(减去header的位置)
     *
     * @param position
     * @return
     */
    @Override
    public int getItemViewType(int position) {
        if (position == 0)
            return HeaderType;
        if (position == getThisItemCount() + 1)
            return FooterType;
        return super.getItemViewType(position - 1);//减1去掉herder的位置
    }

　　首先是getItemCount()方法，加上HeaderView和FooterView的位置，也就是在原有的数目上加2，原有的数目由getThisItemCount()获取，由使用者自己实现。然后在特定的位置返回特定的类型，position为0时，返回HeaderType，position在最后时，返回FooterType。然后，在onCreateViewHolder()中根据viewType返回特定的ViewHolder类型。这样，就把HeaderView和FooterView都增加进去了。
　　接下来的步骤就是控制touch事件动态设置HeaderView的高度及控件来实现下拉刷新的效果了。当RecyclerView滑动到顶部时，继续往下拉触发下拉刷新。当滑到底部时，自动触发加载更多。然后设置好相关的接口回调，就基本完成。这里面许多细节，一篇文章很难讲完了，基本可以另开新篇。涉及很多基本知识和细节逻辑。大家真的愿意了解的话。源码链接在下方，可以作为参考。

结尾

　　项目托管在github上，再贴一次地址：https://github.com/zhangyuChen1991/PtrSwipeMenuRecyclerView
　　有兴趣的童鞋可以前去下载，如发现问题，请斧正！非常感谢！