自定义View实现上拉/下拉刷新

1 概述

最近在做项目的时候，需要实现列表的下拉刷新和上拉加载更多的功能，由于项目周期问题，下拉刷新就直接使用了系统提供的SwipeRefreshLayout类，但是SwipeRefreshLayout的实现效果真的是太low了而且无法达到视觉工程师的要求；上拉加载更多则通过在列表的最后添加一个提示上拉加载的item来实现，虽然实现效果达到了视觉工程师的要求但是会使列表的实现变得复杂。最近又被一个同学问起上面的功能有没有简单的实现方式，趁着现在闲暇就通过自定义View(RefreshLayout)实现了上面的功能。

2 RefreshLayout的使用

首先看一下实现效果：

图1

下图是对上图中的下拉刷新和上拉加载更多的流程的概括：

图2

上图中的列表是通过RecyclerView实现的，实现该列表的下拉刷新和上拉加载更多的功能是通过在RecyclerView之上嵌套我自定义的RefreshLayout实现的，使用RefreshLayout的代码如下：

布局activity_test_refresh.xml：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.cytmxk.customview.refresh.RefreshLayout
        android:id="@+id/refreshlayout_test"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerview_test_refresh"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </com.cytmxk.customview.refresh.RefreshLayout>

</LinearLayout>

public class TestRefreshActivity extends AppCompatActivity implements RefreshLayout.OnRefreshStatusListener {

    private RefreshLayout testRefreshLayout;
    private RecyclerView testRefreshRV;
    private MyAdapter adapter;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test_refresh);
        testRefreshLayout = (RefreshLayout) findViewById(R.id.refreshlayout_test);
        testRefreshLayout.setPullDownPromptLayout(new SamplePullDownPromptLayout(this));
        testRefreshLayout.setPullUpPromptLayout(new SamplePullUpPromptLayout(this));
        testRefreshLayout.setSupportPullUp(true);
        testRefreshLayout.setOnRefreshStatusListener(this);

        testRefreshRV = (RecyclerView) findViewById(R.id.recyclerview_test_refresh);
        testRefreshRV.setLayoutManager(new LinearLayoutManager(getApplicationContext(), LinearLayoutManager.VERTICAL, false));
        adapter = new MyAdapter();
        testRefreshRV.setAdapter(adapter);
    }

    @Override
    public void onPullDownRefresh() {
        testRefreshLayout.postDelayed(new Runnable() {
            @Override
            public void run() {
                adapter.temp = "人间正道是沧桑";
                adapter.notifyDataSetChanged();
                testRefreshLayout.refreshFinish(0);
            }
        }, 2000);
    }

    @Override
    public void onPullUpRefresh() {
        testRefreshLayout.postDelayed(new Runnable() {
            @Override
            public void run() {
                adapter.itemCount += 10;
                adapter.notifyDataSetChanged();
                testRefreshLayout.refreshFinish(1);
            }
        }, 2000);
    }

    public class MyAdapter extends RecyclerView.Adapter {

        private String temp = "天若有情天亦老";
        private int itemCount = 20;

        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            return new MyViewHolder(new TextView(parent.getContext()));
        }

        @Override
        public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
            ((MyViewHolder)holder).update(temp + position);
        }

        @Override
        public int getItemCount() {
            return itemCount;
        }
    }

    public class MyViewHolder extends RecyclerView.ViewHolder {

        public MyViewHolder(View itemView) {
            super(itemView);
        }

        public void update(String data) {
            ((TextView)itemView).setTextSize(30);
            ((TextView)itemView).setText(data);
        }
    }
}

可以看到通过RefreshLayout实现RecyclerView下拉刷新和上拉加载更多的功能是很简单的。

3 RefreshLayout的实现

首先通过下图理解RefreshLayout的层次结构：

图3

可以看到RefreshLayout是由三部分组成的(下拉刷新提示项、列表和上拉加载更多提示项)并且这三部分是垂直的线性布局，因此RefreshLayout直接就继承LinearLayout；上图是app运行的初始状态，手机屏幕默认只会显示列表部分，下拉刷新提示项和上拉加载更多提示项部分超出了屏幕的显示区域，因此在RefreshLayout的onMeasure回调方法中我会将下拉刷新提示项部分向上移动该部分的高度，代码如下：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    if (null != this.pullDownPromptLayout) {
        measureChildWithMargins(this.pullDownPromptLayout, widthMeasureSpec, 0, heightMeasureSpec, 0);
        MarginLayoutParams layoutParams = (MarginLayoutParams) this.pullDownPromptLayout.getLayoutParams();
        layoutParams.topMargin = -this.pullDownPromptLayout.getMeasuredHeight();
        RELEASE_TO_REFRESH_DOWN_HEIGHT = this.pullDownPromptLayout.getHeight();
    }
    if (null != this.pullUpPromptLayout) {
        measureChildWithMargins(this.pullUpPromptLayout, widthMeasureSpec, 0, heightMeasureSpec, 0);
        RELEASE_TO_REFRESH_UP_HEIGHT = this.pullUpPromptLayout.getMeasuredHeight();
    }
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

上面代码中pullDownPromptLayout代表下拉刷新提示项，pullUpPromptLayout代表上拉加载更多提示项，RELEASE_TO_REFRESH_DOWN_HEIGHT代表下拉刷新时可以释放刷新的最低高度，RELEASE_TO_REFRESH_UP_HEIGHT代表上拉加载更多时可以释放加载的最低高度，代码很简单不在赘叙了。

上面完成了RefreshLayout的布局，接下来就是要完成RefreshLayout的滑动，这就会涉及到事件传递和处理流程，大家可以参考Android中的事件传递与事件处理机制。

当手指滑动屏幕时，产生的滑动事件要么传递给RefreshLayout处理，要么传递给RefreshLayout中的列表处理，根据图2中可以得出在如下4种情况下滑动事件应该传递给RefreshLayout处理(即对滑动事件进行拦截)，反之传递给RefreshLayout中的列表处理：
1> 当app处于图2中第1幅图的状态、RefreshLayout中的列表不能向下滑动并且手指将要向下滑动
2> 当app处于图2中第4幅图的状态并且手指将要向上滑动
3> 当app处于图2中第6幅图的状态、RefreshLayout中的列表不能向上滑动并且手指将要向上滑动
4> 当app处于图2中第9幅图的状态并且手指将要向下滑动
滑动事件是从外层向内层传递的，即滑动事件会先传递给RefreshLayout，如果RefreshLayout不拦截，就会传递给RefreshLayout中的列表，RefreshLayout继承至LinearLayout而LinearLayout默认不会拦截滑动事件，因此要想将滑动事件传递给RefreshLayout就必须重写onInterceptTouchEvent方法对滑动事件进行拦截，代码如下：

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
    boolean intercepted = false;
    int action = ev.getAction();
    float y = ev.getY();
    switch (action) {
        case MotionEvent.ACTION_DOWN: {
            lastY = lastYIntercept = y;
            intercepted = false;
            break;
        }
        case MotionEvent.ACTION_MOVE: {
            float offsetY = y - lastYIntercept;
            if (null == onRefreshStatusListener) {
                intercepted = false;
                break;
            }
            if (0 == getScrollY()) {
                intercepted = (offsetY >= 0 && !childScrollView.canScrollVertically(-1) && null!= this.pullDownPromptLayout && supportPullDown)
                        || (offsetY < 0 && !childScrollView.canScrollVertically(1) && null != this.pullUpPromptLayout && supportPullUp);
            } else if (getScrollY() < 0) {
                intercepted = (offsetY < 0);
            } else if (getScrollY() > 0) {
                intercepted = (offsetY > 0);
            }
            break;
        }
        case MotionEvent.ACTION_UP: {
            intercepted = false;
            break;
        }
    }
    lastYIntercept = y;
    return intercepted;
}

上面代码中childScrollView代表RefreshLayout中的列表，在MotionEvent.ACTION_MOVE的case中，getScrollY()等于0代表RefreshLayout中的内容没有发生滑动(即当前app处于图2中第1、6幅图的状态)，getScrollY()小于0代表RefreshLayout中的内容向下发生了滑动(即当前app处于图2中第2、3、4幅图的状态)，getScrollY()大于0代表RefreshLayout中的内容向上发生了滑动(即当前app处于图2中第7、8、9幅图的状态)；offsetY大于等于0表示手指向下滑动，反之手指向上滑动；childScrollView.canScrollVertically(-1)为true代表childScrollView可以向下滑动，反之不行，childScrollView.canScrollVertically(1)为true代表childScrollView可以向上滑动，反之不行；再来看一下上面的代码，其实就是当满足上面提到的滑动事件传递给RefreshLayout处理的4种情况的某一条，就对滑动事件进行拦截交由RefreshLayout处理，否则就传递给RefreshLayout中的列表处理。

上面完成了对滑动事件的传递，下面就来看看滑动事件是如何处理的，RefreshLayout继承至LinearLayout而LinearLayout默认不会处理滑动事件，因此要处理滑动事件就必须重写onTouchEvent方法对滑动事件进行处理，代码如下：

// RefreshLayout中当前的刷新类型,要么是下拉刷新(0),要么是上拉刷新(1)
private int currentRefreshType = 0;
private float lastY;

@Override
public boolean onTouchEvent(MotionEvent event) {
    int action = event.getAction();
    float y = event.getY();
    switch (action) {
        case MotionEvent.ACTION_DOWN: {
            break;
        }
        case MotionEvent.ACTION_MOVE: {
            float offsetY = (y - lastY) / 2;
            if (null == onRefreshStatusListener) {
                break;
            }
            if (0 == getScrollY()) {
                if (offsetY >= 0) {
                    if (childScrollView.canScrollVertically(-1)) {
                        childScrollView.scrollBy(0, (int) -offsetY);
                    } else {
                        scrollBy(0, (int) -offsetY);
                        currentRefreshType = 0;
                    }
                } else {
                    if (childScrollView.canScrollVertically(1)) {
                        childScrollView.scrollBy(0, (int) -offsetY);
                    } else {
                        scrollBy(0, (int) -offsetY);
                        currentRefreshType = 1;
                    }
                }
            } else if (getScrollY() < 0) {
                if (offsetY >= 0) {
                    scrollBy(0, (int) -offsetY);
                    tryChangeRefreshStatus();
                } else {
                    if ((getScrollY() - offsetY) > 0) {
                        scrollTo(0, 0);
                        if (childScrollView.canScrollVertically(-1)) {
                            childScrollView.scrollBy(0, (int) (getScrollY() - offsetY));
                        }
                    } else {
                        scrollBy(0, (int) -offsetY);
                        tryChangeRefreshStatus();
                    }
                }
            } else if (getScrollY() > 0) {
                if (offsetY >= 0) {
                    if ((getScrollY() - offsetY) > 0) {
                        scrollBy(0, (int) -offsetY);
                        tryChangeRefreshStatus();
                    } else {
                        scrollTo(0, 0);
                        if (childScrollView.canScrollVertically(1)) {
                            childScrollView.scrollBy(0, (int) (getScrollY() - offsetY));
                        }
                    }
                } else {
                    scrollBy(0, (int) -offsetY);
                    tryChangeRefreshStatus();
                }
            }
            break;
        }
        case MotionEvent.ACTION_UP: {
            tryEnterRefreshStatus();
            break;
        }
    }
    lastY = y;
    return true;
}

处理滑动事件的过程也就是实现滑动的过程，当一个事件序列(关于事件序列大家可以参考Android中的事件传递与事件处理机制)满足了上面提到的4种情况的一种，整个事件序列就都会被传递给上面代码中的onTouchEvent方法处理，上面代码中用到的scrollTo和scrollBy方法大家可以参考Android中实现滑动效果。

上面代码中主要针对ACTION_MOVE和ACTION_UP类型的滑动事件进行处理，因为ACTION_DOWN类型的滑动事件没有拦截
1> 对于ACTION_UP类型的滑动事件，代表手指离开屏幕，此时当滑动的距离低于最低高度时就会关闭下拉刷新提示项或者上拉加载更多提示项，否则进入加载状态，tryEnterRefreshStatus方法源码：

private void tryEnterRefreshStatus() {
    int currentOffset = Math.abs(getScrollY());
    switch (currentRefreshType) {
        case 0: {
            if (currentOffset >= RELEASE_TO_REFRESH_DOWN_HEIGHT) {
                this.pullDownIRPL.changeRefreshStatus(IRefreshPromptLayout.RefreshStatus.REFRESHING);
                if (null != onRefreshStatusListener) {
                    onRefreshStatusListener.onPullDownRefresh();
                }
                scroller.startScroll(0, getScrollY(), 0, -getScrollY() - RELEASE_TO_REFRESH_DOWN_HEIGHT);
            } else {
                scroller.startScroll(0, getScrollY(), 0, -getScrollY());
            }
            invalidate();
            break;
        }
        case 1: {
            if (currentOffset >= RELEASE_TO_REFRESH_UP_HEIGHT) {
                this.pullUpIPRL.changeRefreshStatus(IRefreshPromptLayout.RefreshStatus.REFRESHING);
                if (null != onRefreshStatusListener) {
                    onRefreshStatusListener.onPullUpRefresh();
                }
                scroller.startScroll(0, getScrollY(), 0, -getScrollY() + RELEASE_TO_REFRESH_UP_HEIGHT);
            } else {
                scroller.startScroll(0, getScrollY(), 0, -getScrollY());
            }
            invalidate();
            break;
        }
    }
}

@Override
public void computeScroll() {
    super.computeScroll();
    if (scroller.computeScrollOffset()) {
        scrollTo(0, scroller.getCurrY());
        invalidate();
    }
}

上面代码中用到的scroller大家可以参考Android中实现滑动效果。

2> 对于ACTION_MOVE类型的滑动事件，代表手指在屏幕上移动，在ACTION_MOVE case中，首先通过getScrollY()、offsetY和childScrollView.canScrollVertically得出什么时候RefreshLayout的内容滑动，什么时候RefreshLayout中的列表(childScrollView)滑动，然后通过scrollBy或者scrollTo实现滑动，在滑动的时候，当滑动距离在最低距离上下波动时，下拉刷新提示项或者上拉加载更多提示项中的箭头和提示语句就会发生变化，该变化就是通过tryChangeRefreshStatus方法实现的：

// 代表下拉刷新提示项
private IRefreshPromptLayout pullDownIRPL= null;
private View pullDownPromptLayout = null;

// 代表上拉加载更多提示项
private IRefreshPromptLayout pullUpIPRL = null;
private View pullUpPromptLayout = null;

public void setPullDownPromptLayout(IRefreshPromptLayout iRefreshPromptLayout) {
    if (null == iRefreshPromptLayout) {
        return;
    }
    if (null != this.pullDownPromptLayout) {
        this.removeView(this.pullDownPromptLayout);
    }
    this.pullDownIRPL = iRefreshPromptLayout;
    this.pullDownPromptLayout = iRefreshPromptLayout.getRefreshPromptLayout();
    this.addView(this.pullDownPromptLayout, 0);
}

public void setPullUpPromptLayout(IRefreshPromptLayout iRefreshPromptLayout) {
    if (null == iRefreshPromptLayout) {
        return;
    }
    if (null != this.pullUpPromptLayout) {
        this.removeView(this.pullUpPromptLayout);
    }
    this.pullUpIPRL = iRefreshPromptLayout;
    this.pullUpPromptLayout = iRefreshPromptLayout.getRefreshPromptLayout();
    this.addView(this.pullUpPromptLayout);
}

private void tryChangeRefreshStatus () {
    int currentOffset = Math.abs(getScrollY());
    switch (currentRefreshType) {
        case 0: {
            if (currentOffset >= RELEASE_TO_REFRESH_DOWN_HEIGHT) {
                this.pullDownIRPL.changeRefreshStatus(IRefreshPromptLayout.RefreshStatus.RELEASE_TO_REFRESH);
            } else {
                this.pullDownIRPL.changeRefreshStatus(IRefreshPromptLayout.RefreshStatus.PULL_TO_REFRESH);
            }
            break;
        }
        case 1: {
            if (currentOffset >= RELEASE_TO_REFRESH_UP_HEIGHT) {
                this.pullUpIPRL.changeRefreshStatus(IRefreshPromptLayout.RefreshStatus.RELEASE_TO_REFRESH);
            } else {
                this.pullUpIPRL.changeRefreshStatus(IRefreshPromptLayout.RefreshStatus.PULL_TO_REFRESH);
            }
            break;
        }
    }
}

上面代码中的IRefreshPromptLayout是一个提供下拉刷新提示项或者上拉加载更多提示项的接口，如下所示：

public interface IRefreshPromptLayout {
    enum RefreshStatus {
        PULL_TO_REFRESH(0), // 表示下拉或者上拉可以刷新的状态
        RELEASE_TO_REFRESH(1), // 表示释放立即刷新的状态
        REFRESHING(2);  // 代表正在刷新状态

        private int value;

        RefreshStatus(int value) {
            this.value = value;
        }

        public int getValue() {
            return value;
        }

        public static RefreshStatus valueOf(int value) {
            RefreshStatus ret = PULL_TO_REFRESH;

            for (RefreshStatus refreshStatus : RefreshStatus.values()) {
                if (refreshStatus.getValue() == value) {
                    ret = refreshStatus;
                    break;
                }
            }

            return ret;
        }
    }

    void changeRefreshStatus(RefreshStatus refreshStatus);
    View getRefreshPromptLayout();
}

最后编辑于：2017.12.10 05:05:30

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,921评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,635评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,393评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,836评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,833评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,685评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,043评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,694评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,671评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,670评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,779评论 1赞 332
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,424评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,027评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,984评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,214评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,108评论 2赞 351
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,517评论 2赞 343

自定义View实现上拉/下拉刷新

1 概述

2 RefreshLayout的使用

3 RefreshLayout的实现

推荐阅读更多精彩内容