背景

下拉刷新是App交互中非常常见的场景，而与其对应的上拉加载，在很多场景中也已经是用户意识中理所当然的一种交互了。

在很久之前的项目开发中，就已经有上拉加载的这个需求。但是那时苦于没有找到一个合适的上拉加载的库，而项目迭代又紧，那时自己实现恐时间上来不及或者引入其他bug，就暂时用了秋百万的cube-sdk中的点击加载。
在今年该项目的又一次迭代开发中，由于使用到了RecyclerView，而对应的RecyclerView.Adapter又无法使用cube-sdk中的adapter，因此用不了其点击加载，考虑到自己这两年所积累的相关知识及对上拉加载的思考应已足够，就花了些时间，实现了一个相对简单的上拉加载布局。

思考

我对上拉加载的思考受影响于两年前读过的秋百万的一篇文章《我眼中的下拉刷新》。但是上拉加载与下拉刷新的差异，不止是拉的方向不同，它们所拉出来的Header或Footer在加载完成后的消失方式也会不同，这就导致了在实现层面上会有些区别。

先说下拉刷新，通常是先让一个HeaderView位于ContentView外部而不显示出来，然后在下拉的时候让它与ContentView（或只有HeaderView）跟着移动下来，然后到一定距离触发刷新，HeaderView回滚到顶部停留，等刷新完成再慢慢滑动出去。

而上拉加载，通常的场景是用于AbsListView或RecyclerView。它与下拉刷新的最大不同是，所加载出来的内容会插入到当前所显示的AbsListView或ReyclcerView中，并显示在原来最后显示的内容与FooterView之间。
以RecyclerView举例，当我们在上拉加载更多的布局里放一个RecyclerView与一个FooterView，并把FooterView设置在布局底部范围之后，然后让它随着RecyclerView一起上拉，并显示出来，这点并没有问题。这时的界面如下图：

这时我们思考一个问题：当数据加载完成，更新到RecyclerView中时，界面应该如何处理？
通常而言，这时候应该是新加载的数据从FooterView的位置开始显示，而FooterView消失。但我们让FooterView消失（移出显示范围之外），而让RecyclerView移回来，所加载的新内容就会在屏幕外面，需要用户再去手动滑动上来才能看到。这种体验就很不好了。
因此我个人觉得，这个FooterView不应该由我们的上拉加载的布局去控制，而是交由具体场景去实现，在上拉加载的布局当中，应只做ContentView的位移，以及相关的界面及功能接口的回调。而除此外我们需要做的，是提供一些接口，来实现上拉UI需求上的灵活性及可定制化。

基本接口

为了让UI上有更大的灵活性，我们需要对上拉加载的UI变化进行一些解耦。参考秋百万的下拉刷新的库，又考虑到目前实现比较简单的上拉加载，所以我先定义了以下两个接口：
一是上拉加载的UI回调接口，它应该至少有三个状态变化的回调：可以上拉，已经触发加载回调，上拉完成。除此之外，为配合实现一些更好的提示或动画，它至少需要提供两个值：能够触发加载的位移量，以及当前的位移量。当然，多一些其他参数，比如当前的位移方向、速度等的话，可以实现更多的效果，不过这里只是先完成基本功能，所以实现上就先简单点。根据所需要的这些回调，LoadMoreUIHandler接口定义如下：

/** Copyright (c) 2017. Xi'an iRain IOT Technology service CO., Ltd (ShenZhen). All Rights Reserved.*/
package com.githang.hiloadmore;/*** @author Geek_Soledad (msdx.android@qq.com)* @since 2017-05-03 0.1*/
public interface LoadMoreUIHandler {void onPrepare();void onBegin();void onComplete(boolean hasMore);void onPositionChange(int offsetY, int offsetToLoadMore);
}

第二个接口是触发加载的回调接口，只有一个方法，如下：

/** Copyright (c) 2017. Xi'an iRain IOT Technology service CO., Ltd (ShenZhen). All Rights Reserved.*/
package com.githang.hiloadmore;/*** @author Geek_Soledad (msdx.android@qq.com)* @since 2017-05-02 0.1*/
public interface LoadMoreHandler {void onLoadMore();
}

具体实现

我们首先来实现上拉。注意，由于API 14已能适配目前市场上所有Android设备，所以这里像判断是否可以上下拉动或对View进行位移操作，会直接使用到一些API 14以上才有的接口。

首先布局直接继承自FrameLayout。其次，上拉过程需要知道当前的状态，能触发拉动的位移量，当前位移量，是否可以上拉等，所以定义变量，构造方法及一些基本的getter和setter方法如下：

public class LoadMoreLayout extends FrameLayout {private static final byte STATUS_INIT = 0;private static final byte STATUS_PREPARE = 1;private static final byte STATUS_LOADING = 2;private static final byte STATUS_COMPLETE = 3;private byte mStatus = STATUS_INIT; //上拉状态View mContent;private int mCurrentOffsetY; //当前位移量private int mOffsetYToLoadMore = 200; // 触发加载至少需要的位移量private float mResistance = (float) Math.PI; // View实际的位移量=手指拖动的量/它private float mDownY; //手指按下时的Y坐标private int mDragSlop; //判断触发拖动操作的阙值private boolean mHasMore; // 是否可以加载更多private LoadMoreHandler mLoadMoreHandler;private LoadMoreUIHandler mLoadMoreUIHandler;public LoadMoreLayout(Context context, AttributeSet attrs) {super(context, attrs);mDragSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();}public void setHasMore(boolean hasMore) {mHasMore = hasMore;}protected boolean hasMore() {return mHasMore;}public void setOffsetYToLoadMore(int offsetYToLoadMore) {mOffsetYToLoadMore = offsetYToLoadMore;}public void setResistance(float resistance) {mResistance = resistance;}public void setLoadMoreHandler(LoadMoreHandler loadMoreHandler) {mLoadMoreHandler = loadMoreHandler;}public void setLoadMoreUIHandler(LoadMoreUIHandler loadMoreUIHandler) {mLoadMoreUIHandler = loadMoreUIHandler;}//...
}

接下来，我们需要找到我们的ContentView，这里提供两种方式：一是获取布局里的第一个子View，二是提供一个设置ContentView的方法：

    public void setContentView(View view) {mContent = view;}@Overrideprotected void onFinishInflate() {super.onFinishInflate();final int childCount = getChildCount();if (childCount < 1) {throw new IllegalStateException("LoadMoreLayout needs at least one child");}if (mContent == null) {mContent = getChildAt(0);mContent.bringToFront();}}

接下来重写onLayout方法，确保在整个过程当中不会因layout操作导致内容位移位置不正确。

    @Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {int offsetY = mCurrentOffsetY;int paddingLeft = getPaddingLeft();int paddingTop = getPaddingTop();if (mContent != null) {MarginLayoutParams lp = (MarginLayoutParams) mContent.getLayoutParams();final int left = paddingLeft + lp.leftMargin;final int top = paddingTop + lp.topMargin + offsetY;final int right = left + mContent.getMeasuredWidth();final int bottom = top + mContent.getMeasuredHeight();mContent.layout(left, top, right, bottom);}}

接下来就是对手指的事件处理了，这也是完成上拉加载的关键之一。

首先是事件拦截，我们要先判断是否可以进行上拉或由LoadMoreLayout下拉，如果可以，则拦截事件，不让事件再往下传递，所以这里重写onInterceptTouchEvent(MotionEvent ev)方法：

    @Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) {if (!isEnabled() || mContent == null || !mHasMore) {return super.onInterceptTouchEvent(ev);}boolean intercept = false;switch (ev.getAction()) {case MotionEvent.ACTION_DOWN:mDownY = ev.getY();// TODO 停止往回滑动break;case MotionEvent.ACTION_MOVE:int offsetY = (int) (ev.getY() - mDownY);//当前拖动距离if (Math.abs(offsetY) < mDragSlop) {//小于可判定为拖动的阙值则不处理break;}boolean moveUp = offsetY < 0;boolean canMoveDown = mCurrentOffsetY < 0;if (moveUp && mContent.canScrollVertically(1)) {//如果子View可以继续往下滑动，则不拦截break;}if (moveUp || canMoveDown) {intercept = true;}break;}return intercept || super.onInterceptTouchEvent(ev);}

然后重写onTouchEvent(MotionEvent ev)方法，进行上拉加载的逻辑，以及移动ContentView的位置。

    @Overridepublic boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_MOVE:float offsetY = event.getY() - mDownY;if (mStatus != STATUS_LOADING && mStatus != STATUS_PREPARE) {mStatus = STATUS_PREPARE;mLoadMoreUIHandler.onPrepare();}movePos((int) (offsetY / mResistance));if (mStatus == STATUS_PREPARE) {mLoadMoreUIHandler.onPositionChange(mCurrentOffsetY, mOffsetYToLoadMore);}return true;case MotionEvent.ACTION_UP:case MotionEvent.ACTION_CANCEL:onRelease();return true;}return super.onTouchEvent(event);}

movePos(int)实现对ContentView的位移，如下：

    private void movePos(int offsetY) {if (offsetY > 0 && mCurrentOffsetY == 0) {return;}if (offsetY > 0) {offsetY = 0;}mContent.setTranslationY(offsetY);mCurrentOffsetY = offsetY;}

onRelease()是手放开后判断是否触发加载，以及让ContentView归位的操作：

    private void onRelease() {performLoadMore();// TODO 让ContentView归位}private void performLoadMore() {if (mStatus != STATUS_PREPARE) {return;}if (Math.abs(mCurrentOffsetY) >= mOffsetYToLoadMore) {mStatus = STATUS_LOADING;mLoadMoreHandler.onLoadMore();mLoadMoreUIHandler.onBegin();} else {mLoadMoreUIHandler.onPrepare();}}

以上完成了上拉时对ContentView的位移，以及回调加载方法。但这只是完成了从最初的状态到开始的状态，我们还需要知道加载完成，这样才能让状态重置，以及知道是否还可以继续加载。所以还需要有如下方法：

    public void loadMoreComplete(boolean hasMore) {mHasMore = hasMore;mLoadMoreUIHandler.onComplete(hasMore);mStatus = STATUS_COMPLETE;}

除此之外，我们还增加一个方法，用于外界触发它开始加载，可用于自动加载的实现。

    public void triggerToLoadMore() {if (!mHasMore || mStatus == STATUS_LOADING) {return;}mStatus = STATUS_LOADING;mLoadMoreHandler.onLoadMore();mLoadMoreUIHandler.onBegin();}

到这里，我们已经完成了从初始状态到上拉到加载到完成的整个过程。但是如果你够细心会发现，目前为止并没有提到如何让ContentView回去，并且上面的代码中有两处TODO的标记。因此如果一直上拉，最终是会把ContentView给拉出外面的。所以，我们接下来还要实现让ContentView回来的代码。

我们知道，让一个View产生位移有多种方式，比如设置它的margin，设置父布局的padding，调用它的layout方法，或者是如上面我们的实现中使用setTranslationY(float) 方法。而让View滑动回去，由于此过程当中并不需要跟着手指来移动，所以也会有几种选择。
首先，既然前面我们是使用setTranslationY(float)来设置它的位置，那么最终肯定也是需要调用这个方法来恢复原位的。而在中间的过程当中，可供选择的处理方式至少有：

先调用该方法直接设置回去，然后播放一个位移动画。简单粗暴。
使用Scroller计算每次的位移量，然后调用这个ContentView的setTranslationY(float)方法设置它的位置让它慢慢回去。

由于第二种方式它所处的位置与我们所记录的位移量是对应上的，并且在回滚过程当中当我们的手指按下去，是可以让它停住的，相对而言更为真实，所以这里选用第二种方式。
参考了秋百万的下拉刷新的库，这里定义了一个内部类，代码如下：

    class ScrollChecker implements Runnable {private static final int MOVE_DELAY = 12;private final Scroller mScroller;private int mStart;private boolean mIsRunning;ScrollChecker() {mScroller = new Scroller(getContext());}@Overridepublic void run() {boolean isFinish = !mScroller.computeScrollOffset() || mScroller.isFinished();int curY = mScroller.getCurrY();if (!isFinish) {movePos(curY + mStart);postDelayed(this, MOVE_DELAY);} else {reset();}}private void reset() {mIsRunning = false;mStart = 0;}void tryToScrollTo(int to, int duration) {if (mCurrentOffsetY == to) {return;}removeCallbacks(this);if (!mScroller.isFinished()) {mScroller.forceFinished(true);}mStart = mCurrentOffsetY;mScroller.startScroll(0, 0, 0, to - mStart, duration);post(this);mIsRunning = true;}void abortIfRunning() {if (mIsRunning) {if (!mScroller.isFinished()) {mScroller.forceFinished(true);}reset();}}}

它的代码很简单，首先有一个Scroller，用于计算位移量。然后当触发回滚时，我们每12毫秒就执行我们的这个Runnable的回调，获取当前Scroller的结果，设置到位移中去。并且它还提供了一个方法abortIfRunning()，用于在回滚过程中当手指继续操作我们的LoadMoreLayout时让ContentView暂停下来。
最后，我们修改一下前面的代码，实现ContentView的归位。

    @Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) {if (!isEnabled() || mContent == null || !mHasMore) {return super.onInterceptTouchEvent(ev);}boolean intercept = false;switch (ev.getAction()) {case MotionEvent.ACTION_DOWN:mDownY = ev.getY();mScrollChecker.abortIfRunning();//当手指继续按下时，取消回滚break;//...这里代码和前面一样}private void onRelease() {performLoadMore();mScrollChecker.tryToScrollTo(0, mDuration);}

最终成果

完整代码已经上传到Github，项目地址为：https://github.com/msdx/hi-loadmore
项目运行效果如下：

后续扩展

我在前面提到，上拉加载的Footer可能不适合在LoadMoreLayout里实现，所以在我的实现当中也是不包含这一方面的代码的。一般可以实现LoadMoreUILayout接口，来自定义自己的FooterView。而对于像ListView或RecyclerView，个人倾向于使用ListView的FooterView或在RecyclerView的Adapter中添加FooterView来实现。后续会更新Github上的项目，补充对LoadMoreLayout的扩展以实现RecyclerView的上拉加载。但是否会再写一篇，视补充的内容多少而定，若可写内容较少或简单，则只更新项目。有相关疑问或建议请移步github该项目上提issue。

参考资料

《我眼中的下拉刷新》
liaohuqiu/android-Ultra-Pull-To-Refresh
nukc/LoadMoreLayout

一步步打造自己的通用上拉加载布局相关推荐

BaseRecyclerViewAdapterHelper源码解读(四) 上拉加载更多
上拉加载上拉加载无需监听滑动事件,可自定义加载布局,显示异常提示,自定义异常提示. 此篇文章为BaseRecyclerViewAdapterHelper源码解读第四篇,开源库地址,如果没有看过之前3 ...
Android所有View通用下拉刷新上拉加载控件
转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/38868463 前面写过一篇关于下拉刷新控件的博客下拉刷新控件终结者:Pull ...
Android下拉刷新上拉加载控件，对所有View通用！
前面写过一篇关于下拉刷新控件的博客下拉刷新控件终结者:PullToRefreshLayout,后来看到好多人还有上拉加载更多的需求,于是就在前面下拉刷新控件的基础上进行了改进,加了上拉加载的功能.不仅 ...
打造Android万能下拉刷新上拉加载控件
转载请注明出处:http://blog.csdn.net/binbinqq86/article/details/70159782 关于列表刷新加载的自定义控件,网上数不胜数,但别人的用起来始终不是那么 ...
【FastDev4Android框架开发】RecyclerView完全解析之下拉刷新与上拉加载SwipeRefreshLayout(三十一)...
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/49992269 本文出自:[江清清的博客] (一).前言: [好消息] ...
Android ListView 实现下拉刷新上拉加载
转载请注明出处:http://blog.csdn.net/allen315410/article/details/39965327 1.简介无疑,在Android开发中,ListView是使用非常频 ...
android 列表上拉加载更多,Android 下拉刷新,上拉加载更多控件–支持ListView,GridView和ScrollView...
麦洛遇到这样一个需求,实现类似于IOS下拉刷新,上拉加载更多的控件.麦洛google,baidu了一番,网上有不少实现,比较常见的是国外牛人的实现,不过国外的实现基本上都是扩展于ListView,所以 ...
仿【咪咕动漫】列表下拉刷新上拉加载
一.概述本篇续厦门之旅的第二篇.这期间找工作真的心态几多变化,刚开始兴致高昂,信心满满,面试了几家不错的公司,结果都是因为工资问题不了了之.后面的连面试机会都没有了,每天在狭小的租房里面吃了睡, ...
Flutter listview下拉刷新上拉加载更多功能实现
下拉刷新在Flutter中系统已经为我们提供了google material design的刷新功能 , 样式与原生Android一样. 我们可以使用RefreshIndicator组件来实现Flu ...
安卓实现下拉刷新上拉加载
前言 Android智能下拉刷新框架-SmartRefreshLayout 是github 上的一个开源框架,地址https://github.com/scwang90/SmartRefreshLay ...

一步步打造自己的通用上拉加载布局

背景

思考