商城 APP 下拉刷新库—VRefreshLayout

[ileelay]

最近没有工作，在家写了一个下拉刷新库，主要是针对现在也有很多 APP 流行的Headr 置顶显示效果， github 链接在这里https://github.com/ileelay/VRefreshLayout，欢迎大家 star 和 fork ；

博客原文:https://github.com/ileelay/VRefreshLayout/blob/master/README.md

VRefreshLayout

一个竖直方向的下拉刷新控件，支持自定义 Header ，可配置参数，最重要的特点是刷新时头部置顶显示，且不影响列表滑动；

为什么要做头部置顶显示

现在越来越多的 App 下拉刷新时是置顶显示的，大家可以看手机京东,天猫商城,小米商城,汽车之家等 APP ，我们在下拉刷新时，头部的刷新视图是保持显示的，这样在滚动列表的时候，用户可以知道当前正在刷新状态，而传统的下拉刷新库，比如Android-PullToRefresh和android-Ultra-Pull-To-Refresh，是不支持的头部置顶显示的，用户往下翻看时，刷新状态就可能被隐藏； google 的 SwpieRefreshLayout 是置顶层显示的，但是它的内容区域的不会跟着动的，且可定制性太差。

功能预览

头部刷新时列表可以正常响应 sh 事件，且头部不会隐藏

自定义头部样式,例如模仿一个京东的下拉刷新动画

良好的兼容性，支持 ListView/RecyclerView/ScrollView/TextViw/Image 等绝大多数 view

可以配置下拉高度，阻尼度以及各部分动画时长等参数

简单使用

• 在布局中，包裹一个将要刷新的 View/ViewGroup

 <com.leelay.freshlayout.verticalre.VRefreshLayout
        android:id="@+id/refresh_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >

        <ListView
            android:id="@+id/listView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            />

    </com.leelay.freshlayout.verticalre.VRefreshLayout>
    

java 代码中，监听和控制刷新状态

 mRefreshLayout = (VRefreshLayout) findViewById(R.id.refresh_layout);
 mRefreshLayout.addOnRefreshListener(new VRefreshLayout.OnRefreshListener() {
                @Override
                public void onRefresh() {
                    mRefreshLayout.postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            mRefreshLayout.refreshComplete();
                        }
                    }, 2000);
                }
            });
 

这样就能在下拉时触发刷新时间， 2000ms 后刷新完成，隐藏刷新状态；

方法介绍

• setDragRate(float dragRate) 设置拖拽的阻尼比例，默认是 0.5 ，一般设置在 0-1 之间比较合适;

• setRatioOfHeaderHeightToRefresh(float ratio)  设置允许刷新的高度和 HeaderView 高度的比例，默认为 1.0;

• setRatioOfHeaderHeightToReach(float ratio) 设置能下拉的最大高度和 HeaderView 高度的比例，默认为 1.6;

• setToStartDuration(int toStartDuration) 设置回到初始状态动画执行时间，单位为 ms ，默认是 200ms;

• setToRetainDuration(int toRetainDuration) 设置手指离开屏幕后触发刷新时到刷新保持的位置需要的动画时长，单位为 ms,默认为 200ms;

• setAutoRefreshDuration(int autoRefreshDuration) 自动刷新需要的动画时长 ，默认为 800ms ；

• setCompleteStickDuration(int completeStickDuration) 刷新完成后状态保持的时长，默认为 200ms;

• setHeaderView(View view) 设置一个自定义的 HeaderView;

• setUpdateHandler(UpdateHandler updateHandler) 设置状态和进度更新处理，一般是 Header 实现；

• addOnRefreshListener(OnRefreshListener onRefreshListener) 添加一个刷新回调监听，支持 add 方式；

• refreshComplete() 调用次方法，可以接受刷新；

自定义 HeaderView

自定义 Header 只需要集成一个 ViewGroup/View ，实现 VRefreshLayout.UpdateHandler 接口即可； 最基本的代码

public class CustomHeaderView extends ViewGroup implements VRefreshLayout.UpdateHandler{
    public CustomHeaderView(Context context) {
        super(context);
    }

    public CustomHeaderView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        
    }

    @Override
    public void onProgressUpdate(VRefreshLayout layout, VRefreshLayout.Progress progress, int status) {

    }
}

UpdateHandler 只有一个方法 onProgressUpdate(VRefreshLayout layout, VRefreshLayout.Progress progress, int status)，重写它就能监听下拉进度和状态；

VRefreshLayout.PProgress

Progress 类一个简单的 Entity ，其中有三个属性，分别是

• totalY 可下拉的最大 Y 方向距离
• currentY 当前 Y 方向距离
• refreshY 触发刷新的距离这些
• refreshY 触发刷新的距离 这些距离的参考点是 contentView 的 Top 点;

status 状态

public final static int STATUS_INIT = 0;//原始状态
public final static int STATUS_DRAGGING = 1;//正在下拉
public final static int STATUS_RELEASE_PREPARE = 2;//松手将要刷新
public final static int STATUS_REFRESHING = 3;//正在刷新
public final static int STATUS_RELEASE_CANCEL = 4;//松手取消
public final static int STATUS_COMPLETE = 5;//刷新完成
    

状态解析：

• STATUS_INIT 原始状态，发生在 MOVE 事件之前和刷新完成 headerView 完全隐藏之后
• STATUS_DRAGGING 手指拖拽状态，只有在触发下拉后且手指没有完全离开屏幕，发生在这一时间段内；
• STATUS_RELEASE_PREPARE 拖拽的距离超过可触发刷新的距离，在手指放开到正在刷新之前的这一段时间内；
• STATUS_REFRESHING 正在刷新，调用 refreshComplete()结束该状态；
• STATUS_COMPLETE 调用 refreshComplete()方法开始，到 headerView 即将完全隐藏之后，这一点时间内 这些状态正好形成一个状态循环；

参考

• android-Ultra-Pull-To-Refresh -liaohuqiu
• SwipeRefreshLayout -google

原创 ，装载请标明出处，谢谢！