为了账号安全,请及时绑定邮箱和手机立即绑定

Android智能下拉刷新框架-SmartRefreshLayout

标签:
Android

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

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


Demo

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


框架

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

  • RefreshLayout 下拉的基本功能,包括布局测量、滑动事件处理、参数设定等等

  • RefreshContent 对不同内容的统一封装,包括判断是否可滚动、回弹判断、智能识别

  • RefreshHeader 下拉头部的实现和显示

  • RefreshFooter 上拉底部的实现和显示

通过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>

对比代码和我们预想的一样,那我们来对代码做一些改动,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>

这时发现我们我们替换的 TextView 自动就变成了Header,只是它还不会动。要动起来?那么太简单啦,网上随便一搜索就一大堆的 gif 。如这里:拖拖拖 ~~垃机C4D,类似的我们还可以找到很多,又如:环游东京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:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@mipmap/gif_header_repast"/>
        <ListView/>
        <ClassicsFooter/>
    </SmartRefreshLayout>

哈哈!一行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.2-alpha-5'compile 'com.scwang.smartrefresh:SmartRefreshHeader:1.0.2-alpha-5'//如果使用了特殊的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(RefreshLayout refreshlayout) {
        refreshlayout.finishLoadmore(2000);
    }
});

使用指定的 Header 和 Footer

1.方法一 全局设置

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

注意:方法一 设置的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"/>
        <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"/>
    </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

名称格式描述
srlPrimaryColorcolor主题颜色
srlAccentColorcolor强调颜色
srlReboundDurationinteger释放后回弹动画时长
srlHeaderHeightdimensionHeader的标准高度
srlFooterHeightdimensionFooter的标准高度
srlDragRatefloat显示拖动高度/真实拖动高度(默认0.5,阻尼效果)
srlHeaderMaxDragRatefloatHeader最大拖动高度/Header标准高度(默认2,要求>=1)
srlFooterMaxDragRatefloatFooter最大拖动高度/Footer标准高度(默认2,要求>=1)
srlEnableRefreshboolean是否开启下拉刷新功能(默认true)
srlEnableLoadmoreboolean是否开启加上拉加载功能(默认true)
srlEnableHeaderTranslationContentboolean拖动Header的时候是否同时拖动内容(默认true)
srlEnableFooterTranslationContentboolean拖动Footer的时候是否同时拖动内容(默认true)
srlEnablePreviewInEditModeboolean是否在编辑模式时显示预览效果(默认true)
srlDisableContentWhenRefreshboolean是否在刷新的时候禁止内容的一切手势操作(默认false)
srlDisableContentWhenLoadingboolean是否在加载的时候禁止内容的一切手势操作(默认false)

方法 Method

名称格式描述
setPrimaryColorscolors主题强调颜色
setPrimaryColorsIdcolors主题强调颜色资源Id
setReboundDurationinteger释放后回弹动画时长
setHeaderHeightdimensionHeader的标准高度(px/dp 两个版本)
setFooterHeightdimensionFooter的标准高度(px/dp 两个版本)
setDragRatefloat显示拖动高度/真实拖动高度(默认0.5,阻尼效果)
setHeaderMaxDragRatefloatHeader最大拖动高度/Header标准高度(默认2,要求>=1)
setFooterMaxDragRatefloatFooter最大拖动高度/Footer标准高度(默认2,要求>=1)
setEnableRefreshboolean是否开启下拉刷新功能(默认true)
setEnableLoadmoreboolean是否开启加上拉加载功能(默认true)
setEnableHeaderTranslationContentboolean拖动Header的时候是否同时拖动内容(默认true)
setEnableFooterTranslationContentboolean拖动Footer的时候是否同时拖动内容(默认true)
setEnableAutoLoadmoreboolean是否监听列表滚动到底部时触发加载事件
setDisableContentWhenRefreshboolean是否在刷新的时候禁止内容的一切手势操作(默认false)
setDisableContentWhenLoadingboolean是否在加载的时候禁止内容的一切手势操作(默认false)
setReboundInterpolatorInterpolator设置回弹动画的插值器
setRefreshHeaderRefreshHeader设置指定的Header
setRefreshFooterRefreshFooter设置指定的Footer
setOnRefreshListenerOnRefreshListener设置刷新监听器
setOnLoadmoreListenerOnLoadmoreListener设置加载监听器
setOnRefreshLoadmoreListenerOnRefreshLoadmoreListener同时设置上面两个监听器
setOnMultiPurposeListenerOnMultiPurposeListener设置多功能监听器
setLoadmoreFinishedboolean设置全部数据加载完成,之后不会触发加载事件
finishRefresh(int delayed)完成刷新,结束刷新动画
finishLoadmore(int delayed)完成加载,结束加载动画
getRefreshHeaderRefreshHeader获取Header
getRefreshFooterRefreshFooter获取Footer
getStateRefreshState获取当前状态
isRefreshingboolean是否正在刷新
isLoadingboolean是否正在加载
autoRefresh(int delayed)触发自动刷新
autoLoadmore(int delayed)触发自动加载

收藏

 原文链接:http://www.apkbus.com/blog-822717-68353.html

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消