智能下拉刷新框架-SmartRefreshLayout

框架?下拉刷新控件还能框架化?智能?啥玩意来着?二话不多少先上Demo效果图,咱们再来探个究竟。

Github 传送门(https://github.com/scwang90/SmartRefreshLayout)

Demo

下载 APK-Demo(https://github.com/scwang90/SmartRefreshLayout/raw/master/art/app-debug.apk)

如果手机上看不到图片,可以尝试

  • 点击浏览器查看
  • 点击Github传送门
  • 使用电脑浏览

项目演示

风格演示

框架

如果你看完了效果图,或许框架的意思应该有所了解了~~SmartRefreshLayout对下拉刷新功能进行系统的拆分、组合,主要由四个部分组成:

  • RefreshLayout 下拉的基本功能,包括布局测量、滑动事件处理、参数设定等等
  • RefreshContent 对不同内容的统一封装,包括判断是否可滚动、回弹判断、智能识别
  • RefreshHeader 下拉头部的实现和显示
  • RefreshFooter 上拉底部的实现和显示

下面是UML关系类图

通过SmartRefreshLayout框架,你可以在一个稳定强大的下拉布局中实现自己项目需求的 Header ,不用去关心滑动事件处理,不用关心子控件的回弹和滚动边界,只需关注自己真正的项目需求Header的样子和动画。

特点

这时你会问:网上其他的开源下拉控件一样的可以自定义 Header 和 Footer ,SmartRefreshLayout 和它们比起来有什么优势?

变换方式

  • Translate 平行移动 特点: 最常见,HeaderView高度不会改变,
  • Scale 拉伸形变 特点:在下拉和上弹(HeaderView高度改变)时候,会自动触发OnDraw事件
  • FixedFront 固定在前面 特点:不会上下移动,HeaderView高度不会改变
  • FixedBehind 固定在后面 特点:不会上下移动,HeaderView高度不会改变(类似微信浏览器效果)
  • Screen 全屏幕 特点:固定在前面,尺寸充满整个布局

SmartRefreshLayout 的Header和Footer都有多种变换方式,适应不同风格的 Header 和 Footer,下面是不同变换方式Header的Demo

FixedBehind 固定在后面Scale 拉伸形变

Screen 全屏幕Translate 平行移动

独立事件

Header和Footer 可以独立的处理手指滑动事件来为动画提供操作指令,也可以使用RefreshLayout的核心接口来完成一些不寻常的操作指令。 下面的打砖块 Header中 ,Header可以独立的使用滑动事件来为游戏挡板提供指令,并同时可以调用核心接口来通知RefreshLayout上下滚动列表

智能

智能是什么玩意?有什么用?智能主要体现 SmartRefreshLayout 对未知布局的自动识别上,这样可以让我们更高效的实现我们所需的功能,也可以实现一些非寻常的功能。下面通过自定义Header嵌套Layout作为内容 来解释 SmartRefreshLayout 的智能之处。

自定义Header

我们来看这一下这个伪代码例子:

<SmartRefreshLayout>
    <ClassicsHeader/>
    <TextView/>
    <ClassicsFooter/>
</SmartRefreshLayout>

在Android Studio 中的预览效果图

对比代码和我们预想的一样,那我们来对代码做一些改动,ClassicsHeader换成一个简单的TextView,看看会发生什么?

<SmartRefreshLayout>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:gravity="center"
        android:background="#444"
        android:textColor="#fff"
        android:text="看看我会不会变成Header"/>
    <TextView/>
    <ClassicsFooter/>
</SmartRefreshLayout>

在Android Studio 中的预览效果图 和 运行效果图

这时发现我们我们替换的 TextView 自动就变成了Header,只是它还不会动。要动起来?那么太简单啦,网上随便一搜索就一大堆的 gif 。如这里:拖拖拖 ~~垃机C4D,类似的我们还可以找到很多,又如:环游东京30天:GIF版旅行指南

那我们就选择 环游东京30天:GIF版旅行指南 中的这张:

接着我们来改代码:

compile 'pl.droidsonroids.gif:android-gif-drawable:1.2.3'//一个开源gif控件
<SmartRefreshLayout>
    <pl.droidsonroids.gif.GifImageView
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/gif_header_repast"/>    
    <ListView/>
    <ClassicsFooter/>
</SmartRefreshLayout>

在 Android Studio 中的预览效果图 和 运行效果图

哈哈!一行Java代码都不用写,就完成了一个自定义的Header

嵌套Layout作为内容

如果boos要求在列表的前面固定一个广告条怎么办?这好办呀,一般我们会开开心心的下下这样的代码:

<LinearLayout
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:gravity="center"
        android:text="我就是boos要求加上的广告条啦"/>
    <SmartRefreshLayout>
        <ListView/>
    </SmartRefreshLayout>
</LinearLayout>

但是在运行下拉刷新的时候,我们发现 Header是在广告条之下的,看着会别扭~,其实我们可以试试另一种方式,把广告条写到 RefreshLayout内部,看看会发生什么?

<SmartRefreshLayout>
<LinearLayout
   android:orientation="vertical">
   <TextView
       android:layout_width="match_parent"
       android:layout_height="100dp"
       android:gravity="center"
       android:text="我就是boos要求加上的广告条啦"/>
   <ListView/>
</LinearLayout>
</SmartRefreshLayout>

由于伪代码过于简单,而且运行效果过于丑陋,这里还是贴出在实际项目中的实际情况吧~

我们注意看右边的图,仔细观察手指触摸的位置和下拉效果。可以看到在列表已经滚动到中部时,轻微下拉列表是不会触发刷新的,但是如果是触摸固定的布局,则可以触发下拉。从这里可以看出 SmartRefreshLayout 对滚动边界的判断是动态的,智能的!当然如果 SmartRefreshLayout 的智能还是不能满足你,可以通过 setListener 自己实现滚动边界的判断,更为准确!

功能

简单的介绍了两大特点框架和智能,接下来也说说SmartRefreshLayout还具有的其他常用功能吧~

  • 支持所有的 View(AbsListView、RecyclerView、WebView….View) 和多层嵌套的 Layout
  • 支持自定义并且已经集成了很多炫酷的 Header 和 Footer
  • 支持和ListView的同步滚动 和 RecyclerView、AppBarLayout、CoordinatorLayout 的嵌套滚动 NestedScrolling.
  • 支持在Android Studio Xml 编辑器中预览 效果
  • 支持分别在 Default(默认)、Xml、JavaCode 等三个地方设置 Header 和 Footer.
  • 支持自动刷新、自动上拉加载(自动检测列表滚动到底部,而不用手动上拉).
  • 支持通用的刷新监听器 OnRefreshListener 和更详细的滚动监听 OnMultiPurposeListener.
  • 支持自定义回弹动画的插值器,实现各种炫酷的动画效果.
  • 支持设置主题来适配任何场景的App,不会出现炫酷但很尴尬的情况.
  • 支持设置多种滑动方式来适配各种效果的Header和Footer:位置平移、尺寸拉伸、背后固定、顶层固定、全屏
  • 支持内容尺寸自适应 Content-wrap_content
  • 支持继承重写和扩展功能,内部实现没有 private 方法和字段,继承之后都可以重写覆盖
  • 支持越界回弹(Listview、RecyclerView、ScrollView、WebView…View)

使用

简单用例

1.在 buld.gradle 中添加依赖

compile 'com.scwang.smartrefresh:SmartRefreshLayout:1.0.1'
compile 'com.scwang.smartrefresh:SmartRefreshHeader:1.0.1'//如果使用了特殊的Header

2.在XML布局文件中添加 SmartRefreshLayout

<?xml version="1.0" encoding="utf-8"?>
<com.scwang.smartrefresh.layout.SmartRefreshLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/refreshLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:overScrollMode="never"
        android:background="#fff" />
</com.scwang.smartrefresh.layout.SmartRefreshLayout>

3.在 Activity 或者 Fragment 中添加代码

RefreshLayout refreshLayout = (RefreshLayout)findViewById(R.id.refreshLayout);refreshLayout.setOnRefreshListener(new OnRefreshListener() {
    @Override
    public void onRefresh(RefreshLayout refreshlayout) {
        refreshlayout.finishRefresh(2000);
    }
});
refreshLayout.setOnLoadmoreListener(new OnLoadmoreListener() {
    @Override
    public void onLoadmore(SmartRefreshLayout refreshlayout) {
        refreshlayout.finishLoadmore(2000);
    }
});

使用指定的 Header 和 Footer

1.方法一 全局设置

//设置全局的Header构建器
SmartRefreshLayout.setDefaultRefreshHeaderCreater(new DefaultRefreshHeaderCreater() {
        @Override
        public RefreshHeader createRefreshHeader(Context context, RefreshLayout layout) {
            return new ClassicsHeader(context);//指定为经典Header,默认是 贝塞尔雷达Header
        }
    });
//设置全局的Footer构建器
SmartRefreshLayout.setDefaultRefreshFooterCreater(new DefaultRefreshFooterCreater() {
        @Override
        public RefreshFooter createRefreshFooter(Context context, RefreshLayout layout) {
            return new ClassicsFooter(context);//指定为经典Footer,默认是 BallPulseFooter
        }
    });

注意:方法一 设置的Header和Footer的优先级是最低的,如果同时还使用了方法二、三,将会被其他方法取代

2.方法二 XML布局文件指定

    <com.scwang.smartrefresh.layout.SmartRefreshLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/smartLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#444444"
        app:srlPrimaryColor="#444444"
        app:srlAccentColor="@android:color/white"
        app:srlEnablePreviewInEditMode="true">        
    <!--srlAccentColor srlPrimaryColor 将会改变 Header 和 Footer 的主题颜色-->
        <!--srlEnablePreviewInEditMode 可以开启和关闭预览功能-->
        <com.scwang.smartrefresh.layout.header.ClassicsHeader
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srlClassicsSpinnerStyle="FixedBehind"/>        
    <!--FixedBehind可以让Header固定在内容的背后,下拉的时候效果同微信浏览器的效果-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="@dimen/padding_common"
            android:background="@android:color/white"
            android:text="@string/description_define_in_xml"/>
        <com.scwang.smartrefresh.layout.footer.ClassicsFooter
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srlClassicsSpinnerStyle="FixedBehind"/>        
    <!--FixedBehind可以让Footer固定在内容的背后,下拉的时候效果同微信浏览器的效果-->
    </com.scwang.smartrefresh.layout.SmartRefreshLayout>

注意:方法二 XML设置的Header和Footer的优先级是中等的,会被方法三覆盖。而且使用本方法的时候,Android Studio 会有预览效果,如下图:

不过不用担心,只是预览效果,运行的时候只有下拉才会出现~

3.方法三 Java代码设置

final RefreshLayout refreshLayout = (RefreshLayout) findViewById(R.id.smartLayout);//设置 Header 为 Material风格refreshLayout.setRefreshHeader(new MaterialHeader(this).setShowBezierWave(true));//设置 Footer 为 球脉冲refreshLayout.setRefreshFooter(new BallPulseFooter(this).setSpinnerStyle(SpinnerStyle.Scale));

属性 Attributes

名称

格式

描述

srlPrimaryColor

color

主题颜色

srlAccentColor

color

强调颜色

srlReboundDuration

integer

释放后回弹动画时长

srlHeaderHeight

dimension

Header的标准高度

srlFooterHeight

dimension

Footer的标准高度

srlDragRate

float

显示拖动高度/真实拖动高度(默认0.5,阻尼效果)

srlHeaderMaxDragRate

float

Header最大拖动高度/Header标准高度(默认2,要求>=1)

srlFooterMaxDragRate

float

Footer最大拖动高度/Footer标准高度(默认2,要求>=1)

srlEnableRefresh

boolean

是否开启下拉刷新功能(默认true)

srlEnableLoadmore

boolean

是否开启加上拉加载功能(默认true)

srlEnableHeaderTranslationContent

boolean

拖动Header的时候是否同时拖动内容(默认true)

srlEnableFooterTranslationContent

boolean

拖动Footer的时候是否同时拖动内容(默认true)

srlEnablePreviewInEditMode

boolean

是否在编辑模式时显示预览效果(默认true)

srlDisableContentWhenRefresh

boolean

是否在刷新的时候禁止内容的一切手势操作(默认false)

srlDisableContentWhenLoading

boolean

是否在加载的时候禁止内容的一切手势操作(默认false)

方法 Method

名称

格式

描述

setPrimaryColors

colors

主题\强调颜色

setPrimaryColorsId

colors

主题\强调颜色资源Id

setReboundDuration

integer

释放后回弹动画时长

setHeaderHeight

dimension

Header的标准高度(px/dp 两个版本)

setFooterHeight

dimension

Footer的标准高度(px/dp 两个版本)

setDragRate

float

显示拖动高度/真实拖动高度(默认0.5,阻尼效果)

setHeaderMaxDragRate

float

Header最大拖动高度/Header标准高度(默认2,要求>=1)

setFooterMaxDragRate

float

Footer最大拖动高度/Footer标准高度(默认2,要求>=1)

setEnableRefresh

boolean

是否开启下拉刷新功能(默认true)

setEnableLoadmore

boolean

是否开启加上拉加载功能(默认true)

setEnableHeaderTranslationContent

boolean

拖动Header的时候是否同时拖动内容(默认true)

setEnableFooterTranslationContent

boolean

拖动Footer的时候是否同时拖动内容(默认true)

setEnableAutoLoadmore

boolean

是否监听列表滚动到底部时触发加载事件

setDisableContentWhenRefresh

boolean

是否在刷新的时候禁止内容的一切手势操作(默认false)

setDisableContentWhenLoading

boolean

是否在加载的时候禁止内容的一切手势操作(默认false)

setReboundInterpolator

Interpolator

设置回弹动画的插值器

setRefreshHeader

RefreshHeader

设置指定的Header

setRefreshFooter

RefreshFooter

设置指定的Footer

setOnRefreshListener

OnRefreshListener

设置刷新监听器

setOnLoadmoreListener

OnLoadmoreListener

设置加载监听器

setOnRefreshLoadmoreListener

OnRefreshLoadmoreListener

同时设置上面两个监听器

setOnMultiPurposeListener

OnMultiPurposeListener

设置多功能监听器

setLoadmoreFinished

boolean

设置全部数据加载完成,之后不会触发加载事件

finishRefresh

(int delayed)

完成刷新,结束刷新动画

finishLoadmore

(int delayed)

完成加载,结束加载动画

getRefreshHeader

RefreshHeader

获取Header

getRefreshFooter

RefreshFooter

获取Footer

getState

RefreshState

获取当前状态

isRefreshing

boolean

是否正在刷新

isLoading

boolean

是否正在加载

autoRefresh

(int delayed)

触发自动刷新

autoLoadmore

(int delayed)

触发自动加载

特别说明:由于微信不支持外链,欢迎大家点击阅读原文去查看作者的文章,另外这个库的地址:https://github.com/scwang90/SmartRefreshLayout ,欢迎大家去 star 。

原文发布于微信公众号 - 非著名程序员(non-famous-coder)

原文发表时间:2017-07-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Ray学习笔记

Jump Start Bootstrap 第2章

在这一章,我们将讨论Bootstrap一个最重要的功能:网格系统。我们将学会网格系统如何工作;我们如何在应用中使用网格系统;我们也将创建简单的网页布局去更好的理...

13440
来自专栏欧阳大哥的轮子

iOS的一种基于服务器下发的动态布局方案(一)

栅格布局MyGridLayout是MyLayout布局体系里面的第八种布局。这是一种将布局约束设置和视图分离的布局方式,就像HTML中的标签元素和css样式可以...

27730
来自专栏xx_Cc的学习总结专栏

六天完成一个简单iOS App - 第六天

31350
来自专栏我就是马云飞

随手一写就是一个侧滑关闭activity

实现原因 其实侧滑关闭activity在网上也有大量的文章去介绍他,我也有去看,要么是代码实在太多看不下去,要么就是跑了项目没有反应的。唯一的方法还是自己随手鲁...

27760
来自专栏IMWeb前端团队

mXSS简述

本文作者:IMWeb 杨文坚 原文出处:IMWeb社区 未经同意,禁止转载 因为没啥好讲,就说一下mXSS ABSTRACT 不论是服务器端或客...

22850
来自专栏上善若水

046android初级篇之android多分辨率兼容

android:anyDensity="true"时,应用程序安装在不同密度的终端上时,程序会分别加载xxhdpi、xhdpi、hdpi、mdpi、ldpi文件...

11620
来自专栏Lambda

Bootstrap笔记

Bootstrap简介什么是Bootstrap?框架:库 lib libraryjQuery作为一个框架来讲,提供一套比较便捷的操作DOM的方式把大家都需要的功...

26990
来自专栏从零开始学自动化测试

appium+python自动化56-微信小程序自动化

最近微信的小程序越来越多了,随之带来的问题是:小程序如何做自动化测试? 本篇以摩拜小程序为例,介绍如何定位小程序里面的元素

30410
来自专栏施炯的IoT开发专栏

《101 Windows Phone 7 Apps》读书笔记-Alphabet Flashcards

课程内容 Ø 幻灯片效果的切换     最近有人问我如何来写一个幻灯片的应用程序,在这个应用程序中,他们可以在不同的页面之间切换,就像在Pictures h...

21760
来自专栏林冠宏的技术文章

android 如何正确使用 泛型 和 多参数 “偷懒”

我要实现这样一个标题栏 ? 共 4 个选项,采用布局是一个 TextView 对应一个小三角 ImageView,各个选项没被点击时,字体颜色是 黑色,小三角不...

21190

扫码关注云+社区

领取腾讯云代金券