集下拉刷新、自动加载和侧滑菜单的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
  有兴趣的童鞋可以前去下载,如发现问题,请斧正!非常感谢!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,716评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,558评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,431评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,127评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,511评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,692评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,915评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,664评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,412评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,616评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,105评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,424评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,098评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,096评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,869评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,748评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,641评论 2 271

推荐阅读更多精彩内容