简单实现内嵌上拉刷新、下拉加载的RecyclerView布局

RecyclerView出现之前，大家基本都是使用的ListView，通过ListView自带的api能轻松的实现头布局和尾布局的添加，但RecyclerView并不具备这样的API，所以作者今天决定简单实现一个带上拉加载、下拉刷新的布局。

如果你不想听我瞎逼逼，可点击该链接github.com/stray-codin….直接查看源码即可!

第一步：自定义SwipeLayout作为容器

首先我们先剖析一个需要实现的布局，不出意外应该是下面这个样子：

根据上图可知：上拉加载和下拉刷新，正常情况下用户是看不到的，只有用户在滑动手机屏幕的过程中，到达了RecyclerView的顶部/底部时才会显示相应的视图。所以我们先自定义SwipeLayout类，继承LinearLayout布局，然后添加headerView、recyclerView、footerView三个布局，并且其中子布局的RecyclerView的高度应该与ViewGroup保持一致。

class SwipeLayout(ctx: Context, attr: AttributeSet) : LinearLayout(ctx, attr) {
    /**
     * 作为数据加载的RecyclerView
     * */
    var contentRv = RecyclerView(ctx)		
    var headerView: View = View.inflate(context, getId(context, "layout", "swipe_header_view"), null)
    var footerView: View = View.inflate(context, getId(context, "layout", "swipe_footer_view"), null)
        gravity = Gravity.CENTER
        orientation = VERTICAL
        contentRv.overScrollMode = RecyclerView.OVER_SCROLL_NEVER
        /**
         * 延迟初始化View,是为了获取整个ViewGroup的高度，从而式RecyclerView的高度与ViewGroup保持一致
         * */
        post {
            layoutHeight = height
            layoutWidth = width
            Log.d(TAG, "width:$layoutWidth height:$layoutHeight")
            addView(headerView, LayoutParams(LayoutParams.MATCH_PARENT, HEADER_HEIGHT))
            addView(contentRv, LayoutParams(LayoutParams.MATCH_PARENT, layoutHeight))
            addView(footerView, LayoutParams(LayoutParams.MATCH_PARENT, FOOTER_HEIGHT))
        }
}

第二步：让SwipeLayout动起来

在添加完布局后，众所周知，LinearLayout是不具备ScrollView的属性的（即：内容会根据手指的移动而滑动)，所以我们就需要让SwipeLayout动起来，这就涉及到对SwipeLayout内部的Event事件进行处理。

我们先来捋一捋SwipeLayout什么时候需要滑动，是不是当其内部的RecyclerView的内容到达顶部或者底部的时候，用户如果继续滑动，我们就时候就需要给用户呈现上拉加载/下拉刷新的视图。然后当滑动继续回归到RecylerView视图中，则又需要将事件交由RecyclerView处理。

经过上面的分析，我们实际上只需要在SwipeLayout的dispatchTouchEvent方法中进行处理即可，在Move事件中判断RecyclerView是否已经到达了顶部或者底部，如果达到则SwipeLayout自己处理，做上拉下载/下拉刷新的视图操作，反之则留给RecyclerView自己处理。

    override fun dispatchTouchEvent(ev: MotionEvent?): Boolean {
        Log.d(TAG, "dispatchTouchEvent: y:${ev!!.y.toInt()}")
        when (ev.action) {
            MotionEvent.ACTION_DOWN -> {
                downY = ev.y
                lastY = ev.y
                Log.d(TAG, "downY:$downY")
            }
            MotionEvent.ACTION_MOVE -> {
                rvIsArriveTop = isArriveTop(contentRv)
                rvIsArriveDown = isArriveBottom(contentRv)
                if (!isLoadData) {
                    scrollLayout(ev.y)
                }
                lastY = ev.y
            }
        return super.dispatchTouchEvent(ev)
    }
    
    private fun scrollLayout(moveY: Float) {
        val nextScrollY = scrollY + lastY - moveY
        Log.d(TAG, "nextScrollY:${nextScrollY} currScrollX:$scrollX")
        if (rvIsArriveTop) {
            pullDownScroll(nextScrollY)
        } else if (rvIsArriveDown) {
            pullUpScroll(nextScrollY)
        }
    }
    
    /**
     * 下拉刷新
     * 正常的scrollY的值应该在 -MAX_SCROLL_DISTANCE ~ 0之间
     * 超过0则按0处理
     * 低于-MAX_SCROLL_DISTANCE 按 -MAX_SCROLL_DISTANCE处理
     * */
    private fun pullDownScroll(nextScrollY: Float) {
        if (!isHeaderViewEnable) return
        when {
            nextScrollY >= 0 -> {
                scrollTo(0, 0)
            }
            nextScrollY < -MAX_SCROLL_DISTANCE -> {
                scrollTo(0, -MAX_SCROLL_DISTANCE)
            }
            else -> {
                scrollTo(0, nextScrollY.toInt())
            }
        }
    }

    /**
     * 上拉加载
     * 正常的scrollY的值应该在 0 ~ MAX_SCROLL_DISTANCE之间
     * 低于0则按0处理
     * 超过MAX_SCROLL_DISTANCE 按MAX_SCROLL_DISTANCE处理
     * */
    private fun pullUpScroll(nextScrollY: Float) {
        if (!isFooterViewEnable) return
        when {
            nextScrollY < 0 -> {
                scrollTo(0, 0)
            }
            nextScrollY > MAX_SCROLL_DISTANCE -> {
                scrollTo(0, MAX_SCROLL_DISTANCE)
            }
            else -> {
                scrollTo(0, nextScrollY.toInt())
            }
        }
    }    

第三步：让下拉刷新/上拉加载能自动回弹到顶部/顶部

当用户松开手指时，我们会判断用户的滑动距离，是否足够触发我们的上拉加载/下拉刷新，若不足以，则需要回弹到正常的视图界面，反之则应该完整的显示上拉加载/下拉刷新视图。这里我们需要用到scrollTo的方法，但是scrollTo时瞬时完成的，这样跟用户的UI交互很不好，所以需要使用到Scroller来进行一个回调的动画效果。

Scroller的使用方法大体分为三步：

• 初始化scroller对象 private val scroller = Scroller(context)
• 设置滑动的起点，以及需要滑动的x,y轴的距离 scroller.startScroll(x轴起点坐标, y轴起点坐标, x轴滑动距离, y轴滑动距离)
• 重写父类的computeScroll()方法，内部实现缓慢滑动逻辑

    override fun computeScroll() {
        if (scroller.computeScrollOffset()) {
            scrollTo(0, scroller.currY)
            postInvalidate()
        }
    }

判断是否触发数据加载条件，以及实现上拉加载/下拉刷新视图显示与回弹

	override fun dispatchTouchEvent(ev: MotionEvent?): Boolean {
        Log.d(TAG, "dispatchTouchEvent: y:${ev!!.y.toInt()}")
        when (ev.action) {
            MotionEvent.ACTION_UP -> {
                /**
                 * 超过一半且未在加载数据，则视为进行下拉刷新和上拉加载操作
                 * */
                if ((abs(scrollY) >= MAX_SCROLL_DISTANCE / 2) and !isLoadData) {
                    isLoadData = true
                    if (rvIsArriveTop) {
                        startRefresh()
                    } else if (rvIsArriveDown) {
                        startLoadMore()
                    }
                } else {
                    smoothResetScroll()
                }
            }
        }
        return super.dispatchTouchEvent(ev)
    }

第四步：定义接口，从而监听下拉刷新/上拉加载

定义回调接口，在合适的地方回调，从而告知开发者，目前正在进行下拉刷新/上拉加载操作，需要执行具体的业务逻辑。

    interface ActionListener {
        fun onRefresh()
        fun onLoadMore()
    }

最终效果：

详细代码地址：github.com/stray-codin….

• startLoadMore() 主动执行上拉加载
• startRefresh() 主动执行下拉刷新
• smoothResetScroll() 隐藏上拉加载 or 下拉刷新 的视图
• contentRv 获取到内部的RecyclerView对象
• headerView 获取/设置 headerView对象
• footerView 获取/设置 footerView对象
• isHeaderViewEnable 是否启用下拉刷新
• isFooterViewEnable 是否启用上拉加载

好啦，上面就是如何自定义内嵌上拉刷新/下拉加载和RecyclerView布局的全部流程，如果你觉得对你有帮助，不要忘记在github帮我点个star哦！