簡單實作內嵌上拉重繪、下拉加載和RecyclerView布局

RecyclerView出現之前，大家基本都是使用的ListView，通過ListView自帶的api能輕松的實作頭布局和尾布局的添加，但RecyclerView并不具備這樣的API，所以coding今天決定簡單實作一個帶上拉加載、下拉重繪的布局，
如果你不想聽我瞎逼逼，可點擊該鏈接https://github.com/stray-coding/SwipeLayout.直接查看原始碼即可!

第一步：自定義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 onl oadMore()
    }

最終效果：

詳細代碼地址：https://github.com/stray-coding/SwipeLayout.

• startLoadMore() 主動執行上拉加載
• startRefresh() 主動執行下拉重繪
• smoothResetScroll() 隱藏上拉加載 or 下拉重繪 的視圖
• contentRv 獲取到內部的RecyclerView物件
• headerView 獲取/設定 headerView物件
• footerView 獲取/設定 footerView物件
• isHeaderViewEnable 是否啟用下拉重繪
• isFooterViewEnable 是否啟用上拉加載

好啦，上面就是如何自定義內嵌上拉重繪/下拉加載和RecyclerView布局的全部流程，如果你覺得對你有幫助，不要忘記在github幫我點個star哦！