1. 前言
我們先看看頭條、搜狐新聞的下拉更新效果（視頻轉(zhuǎn)gif時(shí)，有些frame失真，上滑加載的效果沒貼，太占地了??）：
看過頭條、搜狐新聞的下拉更新效果后，我們看看自個(gè)寫的的TRecyclerView的下拉更新、上滑加載的效果圖，下面也給出TRecyclerView的下載地址：
附：TRecyclerView項(xiàng)目地址：TRecyclerView。
實(shí)現(xiàn)上面的效果，我們肯定得有一個(gè)托盤，假設(shè)是TRecyclerView，然后拖盤上面放了一個(gè)RecyclerView，下拉托盤超過一定距離后，LoadingView顯示出來(lái)了，數(shù)據(jù)更新完后有一個(gè)更新多少條的提示，假設(shè)是TipView。
TRecyclerView包括LoadingView、RecyclerView、TipView，下面來(lái)講講這三個(gè)View的層次。下拉TRecyclerView，會(huì)露出LoadingView，可知LoadingView所處的層次是最下面。
在試頭條、搜狐新聞下拉更新時(shí)，當(dāng)列表正處在更新狀態(tài)，這個(gè)時(shí)候，我們上推RecyclerView到頂，這個(gè)時(shí)候更新多少條的提示TipView會(huì)蓋在RecyclerView上面，可知TIpView所處的層次是最上面。
通過上面分析TRecyclerView中各個(gè)View的層次從上到下依次是：
TipView（頂部） 、 RecyclerView（中間） 、 LoadingView（底部）。
知道View的層次后，我們看看TRecyclerView下拉更新是怎么實(shí)現(xiàn)的。
2. 下拉更新
我們結(jié)合TRecyclerView的header結(jié)構(gòu)圖，來(lái)分析下拉更新數(shù)據(jù)時(shí)，RecyclerView的三個(gè)動(dòng)作行為：
1) 下拉高度超過mHeaderHeight，松手之后，RecyclerView回到mHeaderHeight位置，同時(shí)請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)；
2）網(wǎng)絡(luò)數(shù)據(jù)回來(lái)之后，RecyclerView回到mTipHeight位置，同時(shí)展示tips更新提示動(dòng)畫;
3) tips更新提示動(dòng)畫結(jié)束后，RecyclerView回到頂部位置。
由此可知：RecyclerView整個(gè)下拉更新的動(dòng)畫從時(shí)序上可以分為下面三個(gè)部分：
animToHeader （更新數(shù)據(jù)） -> animToTip （展示tips動(dòng)畫） -> animToStart （回頂）
因此，我們要在TRecyclerView的onInterceptTouchEvent、onTouchEvent方法做一些事情：
1）onInterceptTouchEvent：判斷是否攔截MotionEvent事件，事件交給TRecyclerView或者RecyclerView處理。
2）onTouchEvent：處理RecyclerView的下拉動(dòng)畫，RecyclerView下拉是否觸發(fā)更新的邏輯。
下面還是看看TRecyclerView的onInterceptTouchEvent方法和onTouchEvent方法。
onInterceptTouchEvent(MotionEvent ev) 方法：
public boolean onInterceptTouchEvent(MotionEvent ev) {
int action = ev.getAction();
//if the recycleView can scroll,
//then the TRecyclerView doesn't intercept the event.
if (isUnIntercept() || mRefresh) {
return false;
}
switch (action) {
case MotionEvent.ACTION_DOWN:
mIsDrag = false;
mInitY = ev.getY();
break;
case MotionEvent.ACTION_MOVE:
float y = ev.getY();
//if the distance of moving is over the touchSlop,
//then The TRecyclerView is dragged.
if (y - mInitY >= mTouchSlop && !mIsDrag) {
mIsDrag = true;
}
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
mIsDrag = false;
break;
default:
break;
}
return mIsDrag;
}
看onInterceptTouchEvent的代碼，其實(shí)是處理了兩個(gè)邏輯：
1）某些情況下不攔截event，把事件交給RecyclerView處理，只要RecyclerView 能夠滑動(dòng)，就不攔截event；
2）如果RecyclerView已經(jīng)處在頂部，不能再向下滾動(dòng)時(shí)，這個(gè)時(shí)候，事件交由TRecyclerView處理。
onTouchEvent(MotionEvent event) 方法：
public boolean onTouchEvent(MotionEvent event) {
if (isUnIntercept()) {
return false;
}
float dist = 0f;
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mIsDrag = false;
break;
case MotionEvent.ACTION_MOVE:
if (mIsDrag) {
float y = event.getY();
dist = (y - mInitY) * TRecycleViewConst.PULL_DRAG_RATE;
if(mCurrentTargetOffsetTop >= mOriginalOffsetTop) {
//如果下次移動(dòng)的距離加上當(dāng)前的距離頂部的距離
//小于header的初始位置，則RecyclerView回頂,
// 同時(shí)檢查SuperSwipe是否移動(dòng)頂部，RecycleView滑到頂部，
//則造一個(gè)down事件，交給RecycleView處理，讓其可以繼續(xù)上滑。
if(dist < mOriginalOffsetTop ){
quickToStart();
buildDownEvent(event);
}else {
setTargetOffsetTopAndBottom(dist);
}
}else{
buildDownEvent(event);
}
//the distance of pull can trigger off refresh
if (mPullRefresh != null) {
mPullRefresh.pullRefreshEnable(dist >= mHeaderHeight);
}
}
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
dist = (event.getY() - mInitY) *
TRecycleViewConst.PULL_DRAG_RATE;
if (mIsDrag) {
//if the distance of moving is over the header height ,
// then show the anim which moves to header position,
//else show the anim which moves to start position.
if (dist >= mHeaderHeight) {
animToHeader();
} else {
animToStart();
}
}
mIsDrag = false;
break;
}
return true;
}
我們庖丁解牛，看看onTouchEvent的ACTION_UP和ACTION_MOVE的邏輯。
onTouchEvent - ACTION_UP
......
case MotionEvent.ACTION_CANCEL:
dist = (event.getY() - mInitY) * TRecycleViewConst.PULL_DRAG_RATE;
if (mIsDrag) {
//if the distance of moving is over the header height ,
// then show the anim which moves to header position,
//else show the anim which moves to start position.
if (dist >= mHeaderHeight) {
animToHeader();
} else {
animToStart();
}
}
......
說明：
1）當(dāng)TRecyclerView攔截了event事件后，如果下拉距離超過mHeaderHeight，松手則觸發(fā)刷新邏輯，反之，觸發(fā)RecyclerView的回頂動(dòng)畫。
2）觸發(fā)刷新的邏輯是在animToHeader動(dòng)畫結(jié)束之后做的，onAnimationEnd回調(diào)里面調(diào)用了 mPullRefresh.pullRefresh()，業(yè)務(wù)邏輯可以通過該接口處理數(shù)據(jù)請(qǐng)求的邏輯。
animToHeader
//the anim which moves to header position,
//when the anim is end, start to refresh data
private void animToHeader() {
ObjectAnimator animator = ObjectAnimator.ofFloat(mRecyclerView, "translationY", mHeaderHeight);
animator.addListener(mToHeaderListener);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mCurrentTargetOffsetTop = (float) animation.getAnimatedValue();
Log.d(TAG, "animToHeader():" + "mCurrentTargetOffsetTop:" + mCurrentTargetOffsetTop);
}
});
animator.setDuration(AnimDurConst.ANIM_TO_HEADER_DUR);
animator.start();
}
private Animator.AnimatorListener mToHeaderListener
= new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
//when the anim of move to header is end, start to refresh data
if (mPullRefresh != null) {
mRefresh = true;
mPullRefresh.pullRefresh();
}
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
};
onTouchEvent - ACTION_MOVE
......
case MotionEvent.ACTION_MOVE:
if (mIsDrag) {
float y = event.getY();
dist = (y - mInitY) * TRecycleViewConst.PULL_DRAG_RATE;
if(mCurrentTargetOffsetTop >= mOriginalOffsetTop) {
if(dist < mOriginalOffsetTop ){
quickToStart();
buildDownEvent(event);
}else {
setTargetOffsetTopAndBottom(dist);
}
}else{
buildDownEvent(event);
}
......
}
break;
......
說明：
1）TRecyclerView滿足當(dāng)前位置 mCurrentTargetOffsetTop大于mOriginalOffsetTop（默認(rèn)是0）、下拉距離dist大于mOriginalOffsetTop這兩個(gè)條件，則通過setTranslationY來(lái)垂直向下移動(dòng)RecyclerView。
//move the target by setTranslationY
private void setTargetOffsetTopAndBottom(float offset) {
mRecyclerView.setTranslationY(offset);
mCurrentTargetOffsetTop = offset;
}
2）TRecyclerView如果當(dāng)前位置mCurrentTargetOffsetTop大于mOriginalOffsetTop，但是下拉距離dist小于mOriginalOffsetTop或者mCurrentTargetOffsetTop小于mOriginalOffsetTop，則造一個(gè)down事件，交給RecycleView處理，讓其可以繼續(xù)上滑。
下拉刷新講的差不多了，我們來(lái)看看上滑加載的實(shí)現(xiàn)。
3. TRecyclerView構(gòu)成
下面會(huì)結(jié)合這TRecyclerView的結(jié)構(gòu)、TRecyclerAdapter的實(shí)現(xiàn)來(lái)講講TRecyclerView上滑加載數(shù)據(jù)的原理。
TRecyclerView 的結(jié)構(gòu):
TRecycleView是一個(gè)FrameLayout主要包括兩部分，Header View和RecycleView，而RecycleView的View類型大體分為兩部分：Normal View和Footer View。
TRecyclerView中有一個(gè)TRecyclerAdapter，是用來(lái)加載RecyclerView的Item View，是TRecyclerView中真正加載數(shù)據(jù)的Adapter，其中包括兩大類的數(shù)據(jù)類型，即正常的Normal View和Header View，Normal View是通過RecyclerView.Adapter來(lái)加載，就是我們需要寫的Adapter。
TRecyclerView的初始化
下面結(jié)合TRecyclerView的結(jié)構(gòu)圖，我們看看具體的代碼實(shí)現(xiàn)，首先是TRecycleView的構(gòu)造方法：
public TRecyclerView(Context context) {
super(context);
init(context);
}
private void init(Context ctx) {
mCtx = ctx;
mTouchSlop = ViewConfiguration.get(mCtx).getScaledTouchSlop();
initView();
}
private void initView() {
mHeaderHolder = new HeaderHolder(mCtx);
mHeaderHolder.setAnimListener(mAnimListener);
addProgressView();
addTargetView();
addTipView();
linearLayoutManager = new LinearLayoutManager(mCtx);
mRecyclerView.setLayoutManager(linearLayoutManager);
mRecyclerView.setVerticalScrollBarEnabled(true);
initListener();
}
//add progress view
private void addProgressView() {
mHeaderHeight = (int) mCtx.getResources().getDimension(R.dimen.header_height);
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, mHeaderHeight);
params.gravity = Gravity.TOP;
addView(mHeaderHolder.getProgressView(), params);
}
private void addTargetView() {
// mRecyclerView = new RecyclerView(mCtx);
mRecyclerView = (RecyclerView) LayoutInflater.from(mCtx).inflate(
R.layout.recycler_view, this, false);
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
addView(mRecyclerView, params);
}
// add tip view
private void addTipView() {
mTipHeight = (int) mCtx.getResources().getDimension(R.dimen.header_tip_height);
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, mTipHeight);
params.gravity = Gravity.TOP;
addView(mHeaderHolder.getTipView(), params);
}
TRecyclerAdapter的實(shí)現(xiàn)
我們知道TRecyclerView中真正加載數(shù)據(jù)的Adapter是TRecyclerAdapter，我們看看TRecyclerView設(shè)置RecyclerView.Adapter的API，代碼如下：
public void setAdapter(RecyclerView.Adapter adapter){
adapter.registerAdapterDataObserver(mDataObserver);
mTAdapter = new TRecyclerAdapter(mCtx, adapter);
mRecyclerView.setAdapter(mTAdapter);
}
我們給RecyclerView.Adapter注冊(cè)了一個(gè)觀察者，調(diào)用RecyclerView.Adapter的數(shù)據(jù)更新方法時(shí)，會(huì)通知TRecyclerAdapter去更新數(shù)據(jù)數(shù)據(jù)，代碼如下：
private RecyclerView.AdapterDataObserver mDataObserver
= new RecyclerView.AdapterDataObserver() {
@Override
public void onChanged() {
mTAdapter.notifyDataSetChanged();
}
@Override
public void onItemRangeChanged(int positionStart, int itemCount) {
mTAdapter.notifyItemRangeChanged(positionStart, itemCount);
}
@Override
public void onItemRangeChanged(int positionStart, int itemCount, Object payload) {
mTAdapter.notifyItemRangeChanged(positionStart , itemCount, payload);
}
@Override
public void onItemRangeInserted(int positionStart, int itemCount) {
mTAdapter.notifyItemRangeInserted(positionStart , itemCount);
}
@Override
public void onItemRangeRemoved(int positionStart, int itemCount) {
mTAdapter.notifyItemRangeRemoved(positionStart , itemCount);
}
@Override
public void onItemRangeMoved(int fromPosition, int toPosition, int itemCount) {
mTAdapter.notifyItemMoved(fromPosition, toPosition );
}
};
再看看TRecyclerAdapter的onCreateViewHolder和onBindViewHolder方法的實(shí)現(xiàn)。
onCreateViewHolder方法：
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
return buildHolder(parent, viewType);
}
private RecyclerView.ViewHolder buildHolder(ViewGroup parent, int viewType) {
RecyclerView.ViewHolder holder = null;
switch (viewType) {
case ITEM_TYPE_FOOTER:
//Footer View的類型
holder = new BaseViewHolder(mFooterHolder.getFooterView());
break;
default:
//Normal View 的類型
holder = mAdapter.onCreateViewHolder(parent, viewType);
break;
}
return holder;
}
@Override
public int getItemViewType(int position) {
if (isFooter(position)) {
//底部View
return ITEM_TYPE_FOOTER;
} else {
return mAdapter.getItemViewType(position);
}
}
onBindViewHolder方法：
//如果是Footer View類型，則直接返回，否則調(diào)用mAdapter的onBindViewHolder方法
@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
if (isFooter(position)) {
return;
}
initData(holder, position);
}
private void initData(RecyclerView.ViewHolder holder, final int position) {
final int type = getItemViewType(position);
if (type != ITEM_TYPE_FOOTER) {
mAdapter.onBindViewHolder(holder, position);
}
}
通過上面的代碼，我們知道是在create view holder時(shí)，通過判斷viewType來(lái)判斷：
1）如果viewType是ITEM_TYPE_FOOTER，則認(rèn)為ViewHolder是Footer類型，否則是Normal ViewHolder；
2）mAdapter是暴露給外部的RecyclerView.Adapter，但是真正加載數(shù)據(jù)的Adapter是TRecyclerAdapter。
4. TRecyclerView上滑加載數(shù)據(jù)
看上面的結(jié)構(gòu)圖，我們知道Footer View并不是直接作為TRecyclerView的一個(gè)View，而是RecyclerView的一個(gè)Item View。
因此，當(dāng)RecyclerView上滑到最后一個(gè)Item View，即Footer View可見時(shí)，我們可以通過 mPushRefresh.loadMore()來(lái)處理上滑加載數(shù)據(jù)的邏輯，代碼的實(shí)現(xiàn)如下：
private void initListener(){
mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
//如果RecyclerView的Scroll State是IDLE，我們判斷下RecyclerView
//是否已經(jīng)滑動(dòng)到底部，如果是則執(zhí)行l(wèi)oadMore方法回調(diào)
if (newState == RecyclerView.SCROLL_STATE_IDLE) {
if (targetInBottom()) {
if(mPushRefresh != null){
mLoadMore = true;
mPushRefresh.loadMore();
}
}
}
}
});
}
//滑動(dòng)到底部，且最后一個(gè)元素可見，則認(rèn)為到達(dá)底部
private boolean targetInBottom() {
if (targetInTop()) {
return false;
}
RecyclerView.LayoutManager layoutManager =
mRecyclerView.getLayoutManager();
int count = mRecyclerView.getAdapter().getItemCount();
if (layoutManager instanceof LinearLayoutManager && count > 0) {
LinearLayoutManager linearLayoutManager
= (LinearLayoutManager) layoutManager;
if (linearLayoutManager.findLastVisibleItemPosition() == count - 1) {
return true;
}
}
return false;
}
說明：
上滑加載更多的原理很簡(jiǎn)單，其實(shí)我們就是判斷RecyclerView的Footer View
是否可見，可見則觸發(fā)加載更多的回調(diào)。
5. 總結(jié)
在寫TRecyclerView遇到TRecyclerView中的RecyclerView沒有滾動(dòng)條，這是因?yàn)槲覀兪侵苯觧ew RecyclerView，RecyclerView的一些初始化方法沒有執(zhí)行到，如受保護(hù)的initializeScrollbars 方法，在外部無(wú)法調(diào)用到的。
解法方法：RecyclerView通過inflate的方式去加載一個(gè)xml文件。
工程用到的其它文件NewsRecyclerAdapter、LoadingView等等，大家可以去github地址下載，下面附有項(xiàng)目地址。
TRecyclerView項(xiàng)目地址：TRecyclerView。
