SwipeRefreshLayout+RcyclerView完成
2017-01-18 本文已影响1347人
八怪不姓丑
关于RcycyclerView的介绍，推荐大家去看洪洋的博客，里面已经介绍的很详细了。
http://blog.csdn.net/lmj623565791/article/details/45059587
官方文档：
https://developer.android.google.cn/reference/android/support/v7/widget/RecyclerView.html
参考一下自己动手做了个demo，并加上了下拉刷新，和上拉加载的效果。
包括刷新状态的时候，改变标题栏的颜色，等等。
项目放在了github上，需要的可以去查看源码
https://github.com/wapchief/android-CollectionDemo
先来看下效果：
wapchief.com
使用条件
在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
如有不妥，欢迎指正。
