Android进阶之路 - 5分钟内快速实现下拉刷新与上拉加载的SmartRefreshLayout

Android内下拉，上拉，再加上列表，这样的搭配几乎没有一个app不用的，在平常开发中下拉最好实现，因为5.0有SwipeRefreshLayout，分分秒秒搞定，但是上拉加载更多，有时候相对麻烦。而我又是一个懒人…所以尽快掌握本文知识，让自己空出一点时间睡觉！hahaha !

本文为博友：”树朾“的切割版，目标是只为满足基本需求，如果说需要切换自己的headLayout与FootLayout或者更详细的使用，可跳转 http://blog.csdn.net/yunyu5120/article/details/74451961

原作者的GIthub地址：

https://github.com/scwang90/SmartRefreshLayout

Effect - 1：



Effect - 2：



Effect - 3 :



bulid：

compile 'com.scwang.smartrefresh:SmartRefreshLayout:1.0.3'
compile 'com.android.support:recyclerview-v7:24.0.0'
//如果头部有需要加载gif的话，需要导入下面的这个依赖
compile 'pl.droidsonroids.gif:android-gif-drawable:1.2.3'

Effect - 1实现方式：

导入成功之后，在Xml中引用“SmartRefreshLayout”，SmartRefreshLayout原作者默认展示的方式就是贝塞尔雷达动画，所以我们直接使用就可以达成我们的Effect - 1效果，具体代码如下。

MainActivity ：

package com.bakheet.car.smartrefresh;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.scwang.smartrefresh.layout.SmartRefreshLayout;
import com.scwang.smartrefresh.layout.api.RefreshLayout;
import com.scwang.smartrefresh.layout.listener.OnRefreshListener;
import com.scwang.smartrefresh.layout.listener.OnRefreshLoadmoreListener;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

private RecyclerView mRv;
private SmartRefreshLayout mRefresh;
private LayoutAdapter adapter;
private List lists;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//先存入数据
initData();

mRv = (RecyclerView) findViewById(R.id.recyclerview);
mRefresh = (SmartRefreshLayout) findViewById(R.id.refreshLayout);

mRv.setLayoutManager(new LinearLayoutManager(this));
adapter = new LayoutAdapter();
mRv.setAdapter(adapter);

//下拉刷新的监听
mRefresh.setOnRefreshListener(new OnRefreshListener() {
@Override
public void onRefresh(RefreshLayout refreshlayout) {
lists.add(" start ");

adapter.notifyDataSetChanged();
mRefresh.finishRefresh(2000);
}
});

//上拉加载更多的监听
mRefresh.setOnLoadmoreListener(new OnRefreshLoadmoreListener() {
@Override
public void onLoadmore(RefreshLayout refreshlayout) {
lists.add(" end ");

adapter.notifyDataSetChanged();
mRefresh.finishLoadmore(2000);
}

@Override
public void onRefresh(RefreshLayout refreshlayout) {

}
});

}

private void initData() {
lists = new ArrayList();
for (int i = 0; i < 30; i++) {
lists.add("Please go " + i);
}
}

class LayoutAdapter extends RecyclerView.Adapter<LayoutAdapter.myViewholder> {

@Override
public LayoutAdapter.myViewholder onCreateViewHolder(ViewGroup parent, int viewType) {
myViewholder myViewholder = new myViewholder(LayoutInflater.from(MainActivity.this).inflate(R.layout.item_layout, parent, false));
return myViewholder;
}

@Override
public void onBindViewHolder(LayoutAdapter.myViewholder holder, final int position) {
holder.mItemData.setText(lists.get(position) + "");
}

@Override
public int getItemCount() {
return lists == null ? 0 : lists.size();
}

class myViewholder extends RecyclerView.ViewHolder {

public TextView mItemData;
public myViewholder(View itemView) {
super(itemView);
mItemData = (TextView) itemView.findViewById(R.id.item_layout);
}
}
}

}

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

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

公共的 item_layout 样式：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/item_layout"
/>
</LinearLayout>

Effect - 2 实现方式（可自行设置喜欢的背景颜色）：

这是我们很常见的一种刷新方式，简单清新；每个App一般都会有自己的Application（如果你没有？那就创建一个，且继承Application），之后在其中加入以下代码：

static {//static 代码段可以防止内存泄露
//设置全局的Header构建器
SmartRefreshLayout.setDefaultRefreshHeaderCreater(new DefaultRefreshHeaderCreater() {
@Override
public RefreshHeader createRefreshHeader(Context context, RefreshLayout layout) {
layout.setPrimaryColorsId(R.color.colorAccent, android.R.color.white);//全局设置主题颜色
return new ClassicsHeader(context).setSpinnerStyle(SpinnerStyle.Translate);//指定为经典Header，默认是 贝塞尔雷达Header
}
});
//设置全局的Footer构建器
SmartRefreshLayout.setDefaultRefreshFooterCreater(new DefaultRefreshFooterCreater() {
@Override
public RefreshFooter createRefreshFooter(Context context, RefreshLayout layout) {
//指定为经典Footer，默认是 BallPulseFooter
return new ClassicsFooter(context).setSpinnerStyle(SpinnerStyle.Translate);
}
});
}

如我创建的Appication：

package com.bakheet.car.smartrefresh;

import android.app.Application;
import android.content.Context;

import com.scwang.smartrefresh.layout.SmartRefreshLayout;
import com.scwang.smartrefresh.layout.api.DefaultRefreshFooterCreater;
import com.scwang.smartrefresh.layout.api.DefaultRefreshHeaderCreater;
import com.scwang.smartrefresh.layout.api.RefreshFooter;
import com.scwang.smartrefresh.layout.api.RefreshHeader;
import com.scwang.smartrefresh.layout.api.RefreshLayout;
import com.scwang.smartrefresh.layout.constant.SpinnerStyle;
import com.scwang.smartrefresh.layout.footer.ClassicsFooter;
import com.scwang.smartrefresh.layout.header.ClassicsHeader;

/**
* Created by YongLiu on 2017/8/10.
*/

public class App extends Application {
static {//static 代码段可以防止内存泄露
//设置全局的Header构建器
SmartRefreshLayout.setDefaultRefreshHeaderCreater(new DefaultRefreshHeaderCreater() {
@Override
public RefreshHeader createRefreshHeader(Context context, RefreshLayout layout) {
layout.setPrimaryColorsId(R.color.colorAccent, android.R.color.white);//全局设置主题颜色
return new ClassicsHeader(context).setSpinnerStyle(SpinnerStyle.Translate);//指定为经典Header，默认是 贝塞尔雷达Header
}
});
//设置全局的Footer构建器
SmartRefreshLayout.setDefaultRefreshFooterCreater(new DefaultRefreshFooterCreater() {
@Override
public RefreshFooter createRefreshFooter(Context context, RefreshLayout layout) {
//指定为经典Footer，默认是 BallPulseFooter
return new ClassicsFooter(context).setSpinnerStyle(SpinnerStyle.Translate);
}
});
}
}

Effect - 3实现方式：

gif图地址，可以下载一张gif图用于此项效果使用

http://www.xueui.cn/appreciate/motion-design/gif-version-of-tokyo-travel-guide.html

下载好之后扔在mipmap文件夹下，之后在布局中引用，这里我们改变的之后对应的Xml。

加入的Xml：

<pl.droidsonroids.gif.GifImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="@mipmap/gif_fly"
/>

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

<pl.droidsonroids.gif.GifImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="@mipmap/gif_fly"
/>
<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>

部分时候我们觉得Head部位与Foot部位太大，可以使用框架内自带的俩个类在xml中实现自己的期望效果，如下代码：

<com.scwang.smartrefresh.layout.SmartRefreshLayout
android:id="@+id/sl_refresh_question"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.scwang.smartrefresh.layout.header.ClassicsHeader
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#6666"
app:srlTextSizeTime="3sp"
app:srlTextSizeTitle="5sp">

</com.scwang.smartrefresh.layout.header.ClassicsHeader>

<android.support.v7.widget.RecyclerView
android:id="@+id/rv_home_data"
android:layout_width="match_parent"
android:layout_height="match_parent" />

<com.scwang.smartrefresh.layout.footer.ClassicsFooter
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#6666"
app:srlT
d413
extSizeTime="3sp"
app:srlTextSizeTitle="5sp">

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

重要方法（当然可以通过三方代码查看）

属性 Attributes

名称-name 格式-format   描述-description
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

名称-name 格式-format   描述-description
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)   触发自动加载

可通过 此篇博客进行扩展学习