自定义RecycleView下拉刷新

1.概述

Android中的下拉刷新是我们很常见的的操作,一般列表页的下拉刷新都是SwipeRefreshLayout嵌套RecycleView完成,其中的原理就是运用了NestedScrolling嵌套滚动机制,具体可参考鸿洋老师的这篇文章https://blog.csdn.net/lmj623565791/article/details/52204039.

public class SwipeRefreshLayout extends ViewGroup implements NestedScrollingParent,
        NestedScrollingChild {
public class RecyclerView extends ViewGroup implements ScrollingView, NestedScrollingChild2 {

从上可以看到SwipeRefreshLayout 实现了NestedScrollingParent,RecyclerView 实现了NestedScrollingChild2 ,我们用的最多的下拉刷新就是使用了这个机制.

2.效果展示

refresh.gif

3.具体实现

  1. 布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    <com.chinamall21.mobile.study.view.ReFreshParent
        android:id="@+id/refresh"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/rv"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        </android.support.v7.widget.RecyclerView>

    </com.chinamall21.mobile.study.view.ReFreshParent>
</RelativeLayout>

刷新的头部局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="120dp"
              android:background="@color/colorPrimary"
              android:orientation="horizontal">

    <FrameLayout
        android:layout_gravity="center_vertical"
        android:layout_width="130dp"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/iv_arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="70dp"
            android:src="@mipmap/icon_arrow"/>

        <ProgressBar
            android:id="@+id/pb"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="70dp"
            android:indeterminateDrawable="@drawable/progress_drawable"
            android:visibility="invisible"/>
    </FrameLayout>

    <LinearLayout
        android:id="@+id/ll_text"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_gravity="center_vertical"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_tip"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="下拉刷新"
            android:textColor="#fff"
            android:textSize="18sp"/>

        <TextView
            android:id="@+id/tv_time"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:textSize="13sp"
            android:text="第一次刷新"
            android:textColor="#fff"/>
    </LinearLayout>
</LinearLayout>
  1. ReFreshParent
public class ReFreshParent extends ViewGroup implements NestedScrollingParent {
    public ReFreshParent(Context context, AttributeSet attrs) {
        super(context, attrs);
        mScroller = new Scroller(context);
        View view = LayoutInflater.from(context).inflate(R.layout.rv_header, this, false);
        mProgress = view.findViewById(R.id.pb);
        mTvTip = view.findViewById(R.id.tv_tip);
        mArrow = view.findViewById(R.id.iv_arrow);
        addView(view);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        mHeader.layout(0, -mHeaderHeight, getWidth(), 0);
        mContent.layout(0, 0, getWidth(), getBottom());
    }

在构造中加载出头部局,然后添加该布局,onLayout方法中将头部局摆放到列表上

  1. 滑动操作
    嵌套滑动过程中滑动事件是由子孩子传给父布局的,这里面就是由RecycleView传过来的滑动事件,在父布局中我们只重写了这二个实现方法:
  /**
     * 父View是否允许嵌套滑动
     *
     * @param child            包含嵌套滑动父类的子View
     * @param target           实现嵌套滑动的子View
     * @param nestedScrollAxes 嵌套滑动方向,水平竖直或都支持
     */
    @Override
    public boolean onStartNestedScroll(View child, View target, int nestedScrollAxes) {
          //当前状态不是正在刷新中当前布局就可以滑动
        return mStatus != STATUS.REFRESHING;
    }

  /**
     * 嵌套滑动子View滑动之前的准备工作
     *
     * @param target   实现嵌套滑动的子View
     * @param dx       水平方向上嵌套滑动的子View滑动的总距离
     * @param dy       竖直方向上嵌套滑动的子View滑动的总距离
     * @param consumed consumed[0]水平方向与consumed[1]竖直方向上父View消耗(滑动)的距离
     */
    @Override
    public void onNestedPreScroll(View target, int dx, int dy, int[] consumed) {
         //上滑头部局逐渐隐藏
        boolean hiddenRefresh = dy > 0 && getScrollY() <= 0;
        //下滑头部局逐渐出现
        boolean showRefresh = dy < 0 && getScrollY() >= -mHeaderHeight && !ViewCompat.canScrollVertically(target, -1);

        if (getScrollY() >= -mHeaderHeight / 2) {
            mStatus = STATUS.PULLREFRESH;
        } else {
            mStatus = STATUS.RELEASEREFRESH;
        }
        refreshByStatus(mStatus);

        if (hiddenRefresh || showRefresh) {
            scrollBy(0, dy);
            consumed[1] = dy;
        }
    }

  • onStartNestedScroll方法中,如果当前状态不是正在刷新中就允许父布局可以可以接收滑动事件.
  • onNestedPreScroll方法中,上滑头部局逐渐隐藏或下滑头部局逐渐出现这二种状态下就调用scrollBy方法滑动父布局来隐藏或显示头部局.
  public boolean onTouch(View v, MotionEvent event) {
       if (event.getAction() == MotionEvent.ACTION_UP) {
           if (getScrollY() <= -mHeaderHeight / 2) {
           mStatus = STATUS.REFRESHING;
           refreshByStatus(mStatus);
           } else {
             scrollTo(0, 0);
           }
       }
           return false;
   }
  • 在手抬起的时候根据头部局的位置来判断是否刷新
  • 根据状态来动态改变头部局的展示

4. 父布局完整代码:

public class ReFreshParent extends LinearLayout implements NestedScrollingParent {
    private boolean isMeasured;
    //刷新的头部局
    private View mHeader;
    //RecycleView列表页
    private RecyclerView mContent;
    //头部局的高度
    private int mHeaderHeight;
    private Scroller mScroller;
    //进度条
    private ProgressBar mProgress;
    //刷新提示
    private TextView mTvTip;
    //指示箭头
    private ImageView mArrow;
    //上次刷新的时间
    private long mLastTime;
    private TextView mTvTime;
    private ValueAnimator mUpAnim;
    private ValueAnimator mDownAnim;

    private enum STATUS {
        //刷新中,下拉刷新,释放刷新
        REFRESHING, PULLREFRESH, RELEASEREFRESH
    }

    //当前刷新状态
    private STATUS mStatus = STATUS.PULLREFRESH;
    private STATUS mLastStatus;


    public ReFreshParent(Context context) {
        this(context, null);
    }

    public ReFreshParent(Context context, AttributeSet attrs) {
        super(context, attrs);
        mScroller = new Scroller(context);
        View view = LayoutInflater.from(context).inflate(R.layout.rv_header, this, false);
        mProgress = view.findViewById(R.id.pb);
        mTvTip = view.findViewById(R.id.tv_tip);
        mArrow = view.findViewById(R.id.iv_arrow);
        mTvTime = view.findViewById(R.id.tv_time);

        addView(view);

    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        mHeader.layout(0, -mHeaderHeight, getWidth(), 0);
        mContent.layout(0, 0, getWidth(), getBottom());
        LogUtils.LogE("getBottom =" + getBottom());
    }

    @Override
    public boolean onStartNestedScroll(@NonNull View child, @NonNull View target, int axes) {
        //当前状态不是正在刷新中当前布局就可以滑动
        return mStatus != STATUS.REFRESHING;

    }

    @Override
    public void onNestedPreScroll(@NonNull View target, int dx, int dy, @NonNull int[] consumed) {
        //上滑头部局逐渐隐藏
        boolean hiddenRefresh = dy > 0 && getScrollY() <= 0;
        //下滑头部局逐渐出现
        boolean showRefresh = dy < 0 && getScrollY() >= -mHeaderHeight && !ViewCompat.canScrollVertically(target, -1);

        if (getScrollY() >= -mHeaderHeight / 2) {
            mStatus = STATUS.PULLREFRESH;
        } else {
            mStatus = STATUS.RELEASEREFRESH;
        }
        refreshByStatus(mStatus);

        if (hiddenRefresh || showRefresh) {
            scrollBy(0, dy);
            consumed[1] = dy;
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (!isMeasured) {
            mHeader = getChildAt(0);
            mContent = (RecyclerView) getChildAt(1);
            measureChildren(widthMeasureSpec, heightMeasureSpec);
            //获取头部局的高度
            mHeaderHeight = mHeader.getMeasuredHeight();
            isMeasured = true;
            //recycleView手抬起时的监听
            mContent.setOnTouchListener(new OnTouchListener() {
                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    if (event.getAction() == MotionEvent.ACTION_UP) {

                        if (getScrollY() <= -mHeaderHeight / 2) {
                            mStatus = STATUS.REFRESHING;
                            refreshByStatus(mStatus);
                        } else {
                            scrollTo(0, 0);
                        }
                    }
                    return false;
                }
            });

            mDownAnim = ValueAnimator.ofFloat(180, 360);
            mDownAnim.setDuration(500);
            mDownAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {

                    mArrow.setRotation((Float) animation.getAnimatedValue());
                }
            });

            mUpAnim = ValueAnimator.ofFloat(0, 180);
            mUpAnim.setDuration(500);
            mUpAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    mArrow.setRotation((Float) animation.getAnimatedValue());
                }
            });
        }
    }

    /**
     * 根据状态去改变
     */
    private void refreshByStatus(STATUS status) {
        if (mLastStatus != status) {
            switch (status) {
                case PULLREFRESH:
                    if (mLastStatus != null) {            
                        mTvTip.setText("下拉刷新");
                        mDownAnim.start();
                    }

                    break;
                case REFRESHING:      
                    mTvTip.setText("正在刷新");
                    mProgress.setVisibility(VISIBLE);
                    mArrow.setVisibility(INVISIBLE);
                    mLastTime = System.currentTimeMillis();
                    new Handler().postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            mProgress.setVisibility(INVISIBLE);
                            mArrow.setVisibility(VISIBLE);
                            scrollTo(0, 0);
                            mStatus = STATUS.PULLREFRESH;
                            mLastStatus = null;
                            mTvTime.setText("上次刷新时间:" + formartTime(mLastTime));
                            //刷新完毕
                            if (mRefreshCompleteListener != null)
                                mRefreshCompleteListener.refreshed();
                        }
                    }, 1500);
                    break;

                case RELEASEREFRESH:    
                    mTvTip.setText("释放刷新");
                    mUpAnim.start();
                    break;
            }
            mLastStatus = status;
        }

    }

    private String formartTime(long time) {
        return new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date(time));
    }

    @Override
    public void scrollTo(int x, int y) {
        if (y <= -mHeaderHeight) {
            y = -mHeaderHeight;
        } else if (y >= 0) {
            y = 0;
        }
        super.scrollTo(x, y);
    }

    @Override
    public void computeScroll() {
        if (mScroller.computeScrollOffset()) {
            scrollTo(0, mScroller.getCurrY());
            invalidate();
        }
    }

    public interface RefreshCompleteListener {
        void refreshed();
    }

    private RefreshCompleteListener mRefreshCompleteListener;

    public void setRefreshCompleteListener(RefreshCompleteListener refreshCompleteListener) {
        mRefreshCompleteListener = refreshCompleteListener;
    }
}

项目地址:https://github.com/digtal/recycleview-study

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容