RecyclerView出現(xiàn)之前，大家基本都是使用的ListView，通過ListView自帶的api能輕松的實現(xiàn)頭布局和尾布局的添加，但RecyclerView并不具備這樣的API，所以coding今天決定簡單實現(xiàn)一個帶上拉加載、下拉刷新的布局。
如果你不想聽我瞎逼逼，可點擊該鏈接https://github.com/stray-coding/SwipeLayout.直接查看源碼即可!
第一步：自定義SwipeLayout作為容器
首先我們先剖析一個需要實現(xiàn)的布局，不出意外應(yīng)該是下面這個樣子：
根據(jù)上圖可知：上拉加載和下拉刷新，正常情況下用戶是看不到的，只有用戶在滑動手機屏幕的過程中，到達了RecyclerView的頂部/底部時才會顯示相應(yīng)的視圖。所以我們先自定義SwipeLayout類，繼承LinearLayout布局，然后添加headerView、recyclerView、footerView三個布局，并且其中子布局的RecyclerView的高度應(yīng)該與ViewGroup保持一致。
class SwipeLayout(ctx: Context, attr: AttributeSet) : LinearLayout(ctx, attr) {
/**
* 作為數(shù)據(jù)加載的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的屬性的（即：內(nèi)容會根據(jù)手指的移動而滑動)，所以我們就需要讓SwipeLayout動起來，這就涉及到對SwipeLayout內(nèi)部的Event事件進行處理。
我們先來捋一捋SwipeLayout什么時候需要滑動，是不是當(dāng)其內(nèi)部的RecyclerView的內(nèi)容到達頂部或者底部的時候，用戶如果繼續(xù)滑動，我們就時候就需要給用戶呈現(xiàn)上拉加載/下拉刷新的視圖。然后當(dāng)滑動繼續(xù)回歸到RecylerView視圖中，則又需要將事件交由RecyclerView處理。
經(jīng)過上面的分析，我們實際上只需要在SwipeLayout的dispatchTouchEvent方法中進行處理即可，在Move事件中判斷RecyclerView是否已經(jīng)到達了頂部或者底部，如果達到則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的值應(yīng)該在 -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的值應(yīng)該在 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())
}
}
}
第三步：讓下拉刷新/上拉加載能自動回彈到頂部/頂部
當(dāng)用戶松開手指時，我們會判斷用戶的滑動距離，是否足夠觸發(fā)我們的上拉加載/下拉刷新，若不足以，則需要回彈到正常的視圖界面，反之則應(yīng)該完整的顯示上拉加載/下拉刷新視圖。這里我們需要用到scrollTo的方法，但是scrollTo時瞬時完成的，這樣跟用戶的UI交互很不好，所以需要使用到Scroller來進行一個回調(diào)的動畫效果。
Scroller的使用方法大體分為三步：
- 初始化scroller對象
private val scroller = Scroller(context) - 設(shè)置滑動的起點，以及需要滑動的x,y軸的距離
scroller.startScroll(x軸起點坐標(biāo), y軸起點坐標(biāo), x軸滑動距離, y軸滑動距離) - 重寫父類的computeScroll()方法，內(nèi)部實現(xiàn)緩慢滑動邏輯
override fun computeScroll() {
if (scroller.computeScrollOffset()) {
scrollTo(0, scroller.currY)
postInvalidate()
}
}
判斷是否觸發(fā)數(shù)據(jù)加載條件，以及實現(xiàn)上拉加載/下拉刷新視圖顯示與回彈
override fun dispatchTouchEvent(ev: MotionEvent?): Boolean {
Log.d(TAG, "dispatchTouchEvent: y:${ev!!.y.toInt()}")
when (ev.action) {
MotionEvent.ACTION_UP -> {
/**
* 超過一半且未在加載數(shù)據(jù)，則視為進行下拉刷新和上拉加載操作
* */
if ((abs(scrollY) >= MAX_SCROLL_DISTANCE / 2) and !isLoadData) {
isLoadData = true
if (rvIsArriveTop) {
startRefresh()
} else if (rvIsArriveDown) {
startLoadMore()
}
} else {
smoothResetScroll()
}
}
}
return super.dispatchTouchEvent(ev)
}
第四步：定義接口，從而監(jiān)聽下拉刷新/上拉加載
定義回調(diào)接口，在合適的地方回調(diào)，從而告知開發(fā)者，目前正在進行下拉刷新/上拉加載操作，需要執(zhí)行具體的業(yè)務(wù)邏輯
interface ActionListener {
fun onRefresh()
fun onLoadMore()
}
最終效果：
詳細代碼地址：https://github.com/stray-coding/SwipeLayout.
- startLoadMore() 主動執(zhí)行上拉加載
- startRefresh() 主動執(zhí)行下拉刷新
- smoothResetScroll() 隱藏上拉加載 or 下拉刷新 的視圖
- contentRv 獲取到內(nèi)部的RecyclerView對象
- headerView 獲取/設(shè)置 headerView對象
- footerView 獲取/設(shè)置 footerView對象
- isHeaderViewEnable 是否啟用下拉刷新
- isFooterViewEnable 是否啟用上拉加載
好啦，上面就是如何自定義內(nèi)嵌上拉刷新/下拉加載和RecyclerView布局的全部流程，如果你覺得對你有幫助，不要忘記在github幫我點個star哦！
