SmartRefreshLayout下拉刷新上拉加载详解

SmartRefreshLayout是一个很好用的下拉刷新上拉加载的第三方库，使用起来超级简单。

它有一下几种样式：
下拉

<样式一>
这里写图片描述
<样式二>

上拉
<样式三>
这里写图片描述
<样式四>

首先是添加依赖：

compile 'com.scwang.smartrefresh:SmartRefreshLayout:1.0.1'
compile 'com.scwang.smartrefresh:SmartRefreshHeader:1.0.1'
    
    
     
     1
     
     2

然后在xml布局里添加

<?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">

    <com.scwang.smartrefresh.layout.header.ClassicsHeader
        srlClassicsSpinnerStyle="FixedBehind"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <!--FixedBehind可以让Header固定在内容的背后，下拉的时候效果同微信浏览器的效果-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white"
        android:padding="5dp"
        android:text="哇咔咔" />

    <com.scwang.smartrefresh.layout.footer.ClassicsFooter
        srlClassicsSpinnerStyle="FixedBehind"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</com.scwang.smartrefresh.layout.SmartRefreshLayout>

    
    
     
     1
     
     2
     
     3
     
     4
     
     5
     
     6
     
     7
     
     8
     
     9
     
     10
     
     11
     
     12
     
     13
     
     14
     
     15
     
     16
     
     17
     
     18
     
     19
     
     20
     
     21
     
     22
     
     23
     
     24
     
     25
     
     26

在这个布局里，如果不写下面这段布局代码，那么下拉刷新只能是默认样式，也就是上图的<样式一>,加了之后才有样式二的效果。

<com.scwang.smartrefresh.layout.header.ClassicsHeader
        srlClassicsSpinnerStyle="FixedBehind"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    
    
     
     1
     
     2
     
     3
     
     4

上拉加载也是同样的道理，加了以下代码才有上图<样式四>的效果，否则就是样式三

<com.scwang.smartrefresh.layout.footer.ClassicsFooter
        srlClassicsSpinnerStyle="FixedBehind"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    
    
     
     1
     
     2
     
     3
     
     4

这里根据自己的需求选择，但有一点值得注意：如果将以上代码全部写全，布局里就有三个自定义的控件，若此时再往里加一个自定义的控件就有可能会报异常，我在项目中还加了一个可以侧滑的自定义listview后就报了异常，最后只好把下拉刷新设置成默认的样式。

下面是java代码，同样非常简单：

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //
        smartRefreshLayout= (SmartRefreshLayout) findViewById(R.id.refreshLayout);

        /**
         * 可不设置，有默认样式
         * 设置 Header 为 Material风格
         * 这两段代码只有在布局里添加了上拉和下拉的代码才有效果
         */
        smartRefreshLayout.setRefreshHeader(new MaterialHeader(this).setShowBezierWave(true));
        smartRefreshLayout.setRefreshFooter(new BallPulseFooter(this).setSpinnerStyle(SpinnerStyle.Scale));
        //下拉刷新
        smartRefreshLayout.setOnRefreshListener(new OnRefreshListener() {
            @Override
            public void onRefresh(RefreshLayout refreshlayout) {
                smartRefreshLayout.finishRefresh(2000);
            }
        });
        //上拉加载
        smartRefreshLayout.setOnLoadmoreListener(new OnLoadmoreListener() {
            @Override
            public void onLoadmore(RefreshLayout refreshlayout) {
                smartRefreshLayout.finishLoadmore(2000);
            }
        });

    }
    
    
     
     1
     
     2
     
     3
     
     4
     
     5
     
     6
     
     7
     
     8
     
     9
     
     10
     
     11
     
     12
     
     13
     
     14
     
     15
     
     16
     
     17
     
     18
     
     19
     
     20
     
     21
     
     22
     
     23
     
     24
     
     25
     
     26
     
     27
     
     28
     
     29
     
     30

代码就这么点，很简单。

下载源码

        <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/markdown_views-ea0013b516.css">
            </div>