SwipeRefreshLayout+RcyclerView完成下拉刷新，上拉数据加载

关于RcycyclerView的介绍，推荐大家去看洪洋的博客，里面已经介绍的很详细了。

http://blog.csdn.net/lmj623565791/article/details/45059587

参考一下自己动手做了个demo，并加上了下拉刷新，和上拉加载的效果。

包括刷新状态的时候，改变标题栏的颜色，等等。

项目放在了github上，需要的可以去查看源码

https://github.com/wapchief/android-CollectionDemo

先来看下效果：



使用条件

在modle下的build.gardle注入依赖：

compile 'com.android.support:recyclerview-v7:23.1.0'

当然也可以在project Structure中选择model，直接搜索V7包导入即可。

布局文件

只需要两部分，swipeRefreshLayout负责控制刷新，RecyclerView负责数据展示：

<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/swipeRefreshLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:dividerHeight="10dp"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v4.widget.SwipeRefreshLayout>

item的布局

这里只用了一个textVIew，并在text顶部添加了一个图片效果：

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="@mipmap/ic_launcher"
android:text="测试"
android:id="@+id/tv_item"
android:gravity="center">
</TextView>

到这里基本完成了xml的编写，但是还少一个加载中的布局，现在很流行的一个简单样式，在上拉的时候会提示正在加载：

<?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="60dp"
android:gravity="center"
android:background="@android:color/white"
android:orientation="horizontal">

<ProgressBar
android:layout_marginRight="6dp"
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />

<TextView
android:id="@+id/tv_footview"
style="@style/SmallGreyTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="正在加载" />

</LinearLayout>

打造适配器

在RecyclerView中已经给我们定义好了Adapter，直接继承就行

但是他没有给我们提供监听的方法，需要我们自己写。这里可以在适配器中直接定义监听的接口。随后在Activity中调用。

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

private List data;
private Context context;
private static final int TYPE_ITEM = 0;
private static final int TYPE_FOOTER = 1;

public interface OnItemClickListener {
void onItemClick(View view, int position);

void onItemLongClick(View view, int position);
}

private OnItemClickListener onItemClickListener;

public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
this.onItemClickListener = onItemClickListener;
}

@Override
public int getItemCount() {
return data.size() == 0 ? 0 : data.size() + 1;
}

@Override
public int getItemViewType(int position) {
if (position + 1 == getItemCount()) {
return TYPE_FOOTER;
} else {
return TYPE_ITEM;
}
}

public RecyclerViewAdapter(Context context, List data) {
this.context = context;
this.data = data;
}

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//根据position判断要加载的界面，可以是多个页面的item
if (viewType == TYPE_ITEM) {
View view = LayoutInflater.from(context).inflate(R.layout.recycler_view_item, parent, false);
return new ItemViewHolder(view);
} else if (viewType == TYPE_FOOTER) {
View view = LayoutInflater.from(context).inflate(R.layout.item_foot, parent, false);
return new FootViewHolder(view);
}
return null;
}

@Override
public void onBindViewHolder(final RecyclerView.ViewHolder holder, int position) {
if (holder instanceof ItemViewHolder) {
if (onItemClickListener != null) {
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int position = holder.getLayoutPosition();
onItemClickListener.onItemClick(holder.itemView, position);
}
});
holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
int position = holder.getLayoutPosition();
onItemClickListener.onItemLongClick(holder.itemView, position);
return false;
}
});
}
}
}

//展示的item
class ItemViewHolder extends RecyclerView.ViewHolder {

TextView tv;
public ItemViewHolder(View view) {
super(view);
tv = (TextView) view.findViewById(R.id.tv_item);
}
}
//正在加载
static class FootViewHolder extends RecyclerView.ViewHolder {

public FootViewHolder(View view) {
super(view);
}
}
}

Activity

在主方法里，使用initview来初始化数据。所有的刷新动作都在这里完成

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.recycler_view);
ButterKnife.bind(this);
initview();
initData();
}

使用initData来完成首次进入加载小圆圈的效果

public void initData() {
handler.postDelayed(new Runnable() {
@Override
public void run() {
getdata();
}
}, 1500);
}

在getData方法里提供了加载时所需要的数据

private void getdata() {

for (int i = 0; i < 10; i++) {
data.add(i);
}

updateView();
}

为了便于理解，我把刷新的方法单独拿出来

在加载一次数据之后，调用adaper的

notifyDataSetChanged();

方法进行重绘，查看该方法的官方源码 会发现其实执行的是

mObservable.notifyChanged();

意为通知观察者数据发生改变，随后执行刷新的动作

private void updateView() {

adapter.notifyDataSetChanged();
//setRefreshing方法必须在view初始化完毕之后使用
swipeRefreshLayout.setRefreshing(false);
//获取到数据变化通知刷新
adapter.notifyItemRemoved(adapter.getItemCount());
}

到这一步我们仅仅只是做了一个数据变化的操作。

具体设置RecyclerView样式等，还需要我们回到initview一步步的进行。

设置刷新圆圈的颜色： (可以设置一个或多个)

swipeRefreshLayout.setColorSchemeResources(
R.color.blue
, R.color.oriange
, R.color.black
, R.color.red);

设置完swipeRefreshLayout后，开线程进行刷新操作。

使用

setOnRefreshListener

方法监听刷新状态

每刷新一次执行

clear

，清空一次数据。然后再重新调用

getdata

方法获取新数据。

swipeRefreshLayout.post(new Runnable() {
@Override
public void run() {
//开始
swipeRefreshLayout.setRefreshing(true);
}
});

swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
//设置延迟刷新时间1800
handler.postDelayed(new Runnable() {
@Override
public void run() {
//刷新数据
data.clear();
getdata();
}
}, 1800);
}
});

设置适配器

通过

setLayoutManager

设置RecyclerView样式。

RecyclerView提供了三种样式，分别是

1、LinearLayoutManager线性布局

2、GridLayoutManager网格布局

3、StaggeredGridLayoutManager瀑布流布局

常用的就是线性布局

监听RecyclerView滑动状态

有两种状态一般常用第二种，也就是刷新的时候进行的操作

在获取到可见的item个数之后，如果滑到了下一个，就进行判断是否等于实际一次加载的item个数。

layoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
recyclerView.setAdapter(adapter);

recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
//当RecyclerView的滑动状态改变时触发
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
Log.d("测试-----------test", "状态改变 = " + newState);

}

/**
* 当RecyclerView滑动时触发
* 类似点击事件的MotionEvent.ACTION_MOVE
*/
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
//获取可见item个数
int lastVisibleItemPosition = layoutManager.findLastVisibleItemPosition();
if (lastVisibleItemPosition + 1 == adapter.getItemCount()) {
//加载
boolean isRefreshing = swipeRefreshLayout.isRefreshing();
if (isRefreshing) {
tvTitle.setBackgroundColor(getResources().getColor(R.color.black_transparent));
adapter.notifyItemRemoved(adapter.getItemCount());
return;
}
if (!isLoading) {
isLoading = true;
handler.postDelayed(new Runnable() {
@Override
public void run() {
getdata();
Log.d("测试--------------test", "完成加载更多");

isLoading = false;
}
}, 1000);
}
}

}
});

到这里，就已经完成了整个加载，刷新的动作。

但是还缺一个监听事件。

就是我们在adapter里面设置过的接口，如果不用岂不是浪费了

adapter.setOnItemClickListener(new RecyclerViewAdapter.OnItemClickListener() {
@Override
public void onItemClick(View view, int position) {
UToasts.showShort(RecyclerViewActivity.this, "点击了item:" + position);
}

@Override
public void onItemLongClick(View view, int position) {

}
});

好了，所有功能基本都实现了。

如果对效果不满意可以根据需要修改。比如在头部放个标题栏，当滑动当一定距离的时候，可以设置颜色透明渐变，或者隐藏布局等，可以充分利用空间。

效果我已经做出来了。具体可以去查看我github的demo，后期我也会写一篇文章来介绍滑动事件。

如果您觉得该内容对您有所帮助，欢迎star，项目地址：https://github.com/wapchief/android-CollectionDemo

如有不妥，欢迎指正。