Android开发笔记（一百二十三）下拉刷新布局SwipeRefreshLayout
SwipeRefreshLayout
下拉刷新布局SwipeRefreshLayout是Android又一与时俱进的控件，顾名思义它随着用户手势向下滑动就会触发刷新操作。从实际的下拉效果来看，SwipeRefreshLayout秉承了Android一贯的简洁界面，可定制性并不太好，远不如开源的下拉刷新框架PullToRefresh，但毕竟是原生的控件，用起来比较方便，所以我们还是好好了解了解它。SwipeRefreshLayout最早在19.1的support-v4库中引入，所以要先确保sdk的“Android Support Library”版本不低于19.1。另外，SwipeRefreshLayout的源码多次升级，因此有新版与旧版之分，两版之间不但支持的方法有区别，而且界面效果也有差异。
下面是SwipeRefreshLayout的常用方法说明：
setColorScheme : 设置进度条/圆圈的颜色。（该方法在新版中已被废弃）
setOnRefreshListener : 设置刷新监听器。在下拉松开时触发该监听器，需要重写该监听器的onRefresh方法。
setRefreshing : 设置刷新的状态。true表示正在刷新，false表示结束刷新。
isRefreshing : 判断是否正在刷新。
下面是新版增加的方法说明：
setColorSchemeColors : 设置进度圆圈的圆环颜色。
setProgressBackgroundColorSchemeColor : 设置进度圆圈的背景颜色。
setProgressViewOffset : 设置进度圆圈的偏移量。第一个参数表示进度圈是否缩放，第二个参数表示进度圈开始出现时距顶端的偏移，第三个参数表示进度圈拉到最大时距顶端的偏移。
setDistanceToTriggerSync : 设置手势向下滑动多少距离才会触发刷新操作。
SwipeRefreshLayout的旧版与新版之间的界面区别主要有：
1、旧版的进度条是布局顶部的一条横线，而新版的布局顶部的一个圆圈。
2、旧版在下拉时，进度条不动，页面会随着向下滑动；而新版在下拉时，页面不再向下滑动，进度圆圈会向下滑动。
这两种显示效果各有千秋，开发者可按照个人喜好决定采用哪种效果。需要注意的是，想要旧版的效果，就得使用旧版的android-support-v4.jar；想要新版的效果，就得使用新版的android-support-v4.jar。新旧两版的v4包见本文末尾的代码工程。
下面是旧版SwipeRefreshLayout的下拉刷新效果截图：
下面是新版SwipeRefreshLayout的下拉刷新效果截图：
下面是简单下拉刷新的示例代码（新旧版通用，只需更换v4包即可）：
import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v4.widget.SwipeRefreshLayout.OnRefreshListener;
import android.widget.TextView;
public class SimpleActivity extends Activity implements OnRefreshListener {
private TextView tv_simple;
private SwipeRefreshLayout srl_simple;
private Handler mHandler = new Handler();
@SuppressLint("ResourceAsColor")
@SuppressWarnings("deprecation")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_simple);
tv_simple = (TextView) findViewById(R.id.tv_simple);
srl_simple = (SwipeRefreshLayout) findViewById(R.id.srl_simple);
srl_simple.setOnRefreshListener(this);
//旧版用下面的setColorScheme设置进度条颜色
srl_simple.setColorScheme(R.color.red, R.color.orange, R.color.green, R.color.blue);
//新版用下面的setColorSchemeResources设置进度圆圈颜色
// srl_simple.setColorSchemeResources(
// R.color.red, R.color.orange, R.color.green, R.color.blue );
//旧版v4包中无下面三个方法
// srl_simple.setProgressBackgroundColorSchemeResource(R.color.black);
// srl_simple.setProgressViewOffset(true, 0, 50);
// srl_simple.setDistanceToTriggerSync(100);
}
@Override
public void onRefresh() {
tv_simple.setText("正在刷新");
mHandler.postDelayed(mRefresh, 3000);
}
private Runnable mRefresh = new Runnable() {
@Override
public void run() {
tv_simple.setText("刷新完成");
srl_simple.setRefreshing(false);
}
};
}
SwipeRefreshLayout+ListView下拉刷新
SwipeRefreshLayout搭配ListView可实现简单的列表数据下拉刷新。首先要注意：在布局文件中，android.support.v4.widget.SwipeRefreshLayout下面只能有一个直接子视图，如果有多个子视图，那么将只展示第一个子视图，后面的子视图将不予展示。如下面这种写法，只会展示名为tv_listview的TextView数据，而不会展示名为lv_content的ListView数据。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="5dp" >
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/srl_listview"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="@+id/tv_listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingTop="10dp"
android:textColor="#000000"
android:textSize="17sp"
android:visibility="gone" />
<ListView
android:id="@+id/lv_content"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>
下面这个才是正确的写法：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="5dp" >
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/srl_listview"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/tv_listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingBottom="10dp"
android:textColor="#000000"
android:textSize="17sp"
android:visibility="gone" />
<ListView
android:id="@+id/lv_content"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>
SwipeRefreshLayout自带的刷新提示只有一个进度圆圈，显然不能满足多变的定制化需求，比如我们常常需要展示不同的提示文本和提示图片，这时就要在ListView控件上面增加一块提示区域，用来存放个性化的提示内容。这里我们先在提示区域放置一个TextView控件，用来展示最基本的提示文字，在刷新开始时显示该提示，刷新结束时移除该提示。
下面是SwipeRefreshLayout+ListView的下拉刷新效果截图：
下面是SwipeRefreshLayout+ListView的页面代码示例：
import com.example.exmswipe.adapter.TitleListAdapter;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v4.widget.SwipeRefreshLayout.OnRefreshListener;
import android.view.View;
import android.widget.ListView;
import android.widget.TextView;
public class ListviewActivity extends Activity implements OnRefreshListener {
private TextView tv_listview;
private SwipeRefreshLayout srl_listview;
private Handler mHandler = new Handler();
private ListView lv_content;
private String[] yearArray = {"鼠年", "牛年", "虎年", "兔年", "龙年", "蛇年",
"马年", "羊年", "猴年", "鸡年", "狗年", "猪年"};
private void refreshView() {
TitleListAdapter adapter = new TitleListAdapter(this, yearArray);
lv_content.setAdapter(adapter);
lv_content.setOnItemClickListener(adapter);
lv_content.setOnItemLongClickListener(adapter);
}
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_listview);
tv_listview = (TextView) findViewById(R.id.tv_listview);
srl_listview = (SwipeRefreshLayout) findViewById(R.id.srl_listview);
srl_listview.setOnRefreshListener(this);
//旧版用下面的setColorScheme设置进度条颜色
srl_listview.setColorScheme(R.color.red, R.color.orange, R.color.green, R.color.blue);
//新版用下面的setColorSchemeResources设置进度圆圈颜色
// srl_listview.setColorSchemeResources(
// R.color.red, R.color.orange, R.color.green, R.color.blue );
lv_content = (ListView) findViewById(R.id.lv_content);
refreshView();
}
@Override
public void onRefresh() {
tv_listview.setVisibility(View.VISIBLE);
tv_listview.setText("正在刷新");
mHandler.postDelayed(mRefresh, 3000);
}
private Runnable mRefresh = new Runnable() {
@Override
public void run() {
refreshView();
tv_listview.setText("刷新完成");
srl_listview.setRefreshing(false);
mHandler.postDelayed(mComplete, 500);
}
};
private Runnable mComplete = new Runnable() {
@Override
public void run() {
tv_listview.setVisibility(View.GONE);
}
};
}
SwipeRefreshLayout+RecyclerView下拉刷新
看过了搭配ListView的下拉刷新，再来看看搭配RecyclerView会是什么效果。上面我们看到搭配ListView的情况下，在刷新开始与刷新结束时，提示文字的展示与隐藏过程有点突兀，都是一下子展示和一下子隐藏，缺乏动画效果，使人觉得生硬呆板。那么搭配RecyclerView进行下拉刷新有没有办法改善这种情况呢？下面是SwipeRefreshLayout+RecyclerView的下拉刷新效果截图：
从上面截图可以发现，提示文字的出现和消失都伴随着动画，整体效果显得柔和许多，而这有赖于RecyclerView的局部更新特性。复习一下前篇博文《 Android开发笔记（一百二十二）循环器视图RecyclerView》，当时我们提到RecyclerView的几个方法，却没有实际运用的例子，现在正好派上用场了。它们是：
1、RecyclerView.Adapter的notify相关方法，如notifyItemInserted、notifyItemRemoved、notifyItemChanged，用于在个别项目发生变化时单独通知适配器调整。
2、GridLayoutManager的setSpanSizeLookup方法，对于第一个元素，可指定让它占满第一行作为头部区域，从而把提示区域纳入整个列表视图的统一管理。
3、GridLayoutManager的setLayoutManager方法，在布局管理信息发生变化时，随时调用该方法生效最新的布局配置，这样列表项的增删操作就能显示动画效果。
下面是SwipeRefreshLayout+RecyclerView的页面代码示例：
import java.util.LinkedList;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v4.widget.SwipeRefreshLayout.OnRefreshListener;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;
import com.example.exmswipe.adapter.RecyclerAdapter;
public class RecyclerActivity extends Activity implements OnRefreshListener {
private SwipeRefreshLayout srl_recycler;
private Handler mHandler = new Handler();
private int mColumnCount = 3;
private RecyclerView rv_content;
private GridLayoutManager mLayoutManager;
private RecyclerAdapter mAdapter;
private String[] yearArray = {"鼠年", "牛年", "虎年", "兔年", "龙年", "蛇年",
"马年", "羊年", "猴年", "鸡年", "狗年", "猪年"};
private LinkedList<String> mYearList = new LinkedList<String>();
private void refreshView() {
mAdapter = new RecyclerAdapter(this, 2, mYearList);
rv_content.setAdapter(mAdapter);
mAdapter.setOnItemClickListener(mAdapter);
mAdapter.setOnItemLongClickListener(mAdapter);
}
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_recycler);
srl_recycler = (SwipeRefreshLayout) findViewById(R.id.srl_recycler);
srl_recycler.setOnRefreshListener(this);
//旧版用下面的setColorScheme设置进度条颜色
srl_recycler.setColorScheme(R.color.red, R.color.orange, R.color.green, R.color.blue);
//新版用下面的setColorSchemeResources设置进度圆圈颜色
// srl_recycler.setColorSchemeResources(
// R.color.red, R.color.orange, R.color.green, R.color.blue );
rv_content = (RecyclerView) findViewById(R.id.rv_content);
mLayoutManager = new GridLayoutManager(this, mColumnCount);
mLayoutManager.setSpanSizeLookup(new MySpanRule(-1));
rv_content.setLayoutManager(mLayoutManager);
for (int i=0; i<yearArray.length; i++) {
mYearList.add(yearArray[i]);
}
refreshView();
}
@Override
public void onRefresh() {
mYearList.addFirst("正在刷新");
mAdapter.notifyItemInserted(0);
mLayoutManager.setSpanSizeLookup(new MySpanRule(0));
rv_content.setLayoutManager(mLayoutManager);
mHandler.postDelayed(mRefresh, 3000);
}
private Runnable mRefresh = new Runnable() {
@Override
public void run() {
mYearList.set(0, "刷新完成");
mAdapter.notifyItemChanged(0);
srl_recycler.setRefreshing(false);
mHandler.postDelayed(mComplete, 500);
}
};
private Runnable mComplete = new Runnable() {
@Override
public void run() {
mYearList.removeFirst();
mAdapter.notifyItemRemoved(0);
mLayoutManager.setSpanSizeLookup(new MySpanRule(-1));
rv_content.setLayoutManager(mLayoutManager);
}
};
private class MySpanRule extends GridLayoutManager.SpanSizeLookup {
private int mPosition;
public MySpanRule(int position) {
mPosition = position;
}
@Override
public int getSpanSize(int position) {
if (mPosition == -1) {
return 1;
} else if (position == mPosition) {
return mColumnCount;
} else {
return 1;
}
}
}
}
SwipeRefreshLayout实现上拉加载
SwipeRefreshLayout默认只实现下拉刷新功能，没有上拉加载功能；如果我们要用它来做上拉加载，就得想办法自定义控件了。从网上资料来看，大家给SwipeRefreshLayout添加上拉加载主要有两种思路：1、重写SwipeRefreshLayout，在dispatchTouchEvent方法中捕获上拉事件，并进行合理性校验之后，触发上拉加载操作。
2、调用RecyclerView的setOnTouchListener方法，并实现一个触摸监听器传给该方法，监听器中也是一样捕获上拉事件并进行后续处理。但是该方法不能与SwipeRefreshLayout直接共存，因为SwipeRefreshLayout与ScrollView一样，都会自动拦截上下滑动的手势，如此一来，上下滑动事件都被SwipeRefreshLayout先拦截了，哪里还会传给下面的RecyclerView呢？所以要么只用RecyclerView不用SwipeRefreshLayout，要么就是重写SwipeRefreshLayout让它放过上拉事件。
上面两种思路都有对应的实现代码，可是我觉得，SwipeRefreshLayout作为Android的原生控件，就应该让它去做它擅长的事情。如果要它实现上拉加载还得大动干戈的话，不如直接使用下拉刷新的开源框架PullToRefresh，因为PullToRefresh能够实现的功能更加强大，如果都要大费周章，为什么我们不用更好的呢？所以我以为上拉加载功能最好还是用PullToRefresh，有关PullToRefresh的详细介绍参见《 Android开发笔记（十二）测量尺寸与下拉刷新》。
点击下载本文用到的下拉刷新的工程代码
点此查看Android开发笔记的完整目录