V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ileelay
V2EX  ›  Android

商城 APP 下拉刷新库—VRefreshLayout

  •  
  •   ileelay · 2016-12-07 16:35:13 +08:00 · 8617 次点击
    这是一个创建于 2908 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    demo 截图

    VRefreshLayout

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

    为什么要做头部置顶显示

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

    功能预览

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

    滑动时截图

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

    京东样式

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

    ImageView 支持

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

    参数可配置

    简单使用

    • 在布局中,包裹一个将要刷新的 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 即将完全隐藏之后,这一点时间内 这些状态正好形成一个状态循环;

    参考

    原创 ,装载请标明出处,谢谢!

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2600 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 18ms · UTC 04:48 · PVG 12:48 · LAX 20:48 · JFK 23:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.