SwipeRefreshLayout、RecyclerView和CardView组合使用

　　RecyclerView是Android5.0之后推出的一个新的控件，这是一个强大的滑动组件，比ListView拥有更多的功能。官方介绍RecyclerView是ListView的升级版，RecyclerView有如下的优点：

• RecylerView封装了viewholder的回收复用，也就是说是RecyclerView是面向ViewHolder编程而不是View

• RecyclerView高度解耦，非常灵活。RecyclerView不仅可以像ListView一样显示列表视图，还可以显示网格视图等。只要你传入不同的LayoutManager就可以控制显示不同的样式，RecyclerView提供的LayoutManager有：LinearLayoutManager横向或者纵向滑动；GridLayoutManager网格布局显示；StaggeredGridLayoutManager瀑布流显示效果。

• RecyclerView可以通过ItemDecoration控制Item之间的间隔

• RecyclerView可以通过ItemAnimator控制Item的增删动画

关于具体的RecyclerView的介绍推荐两篇博客，Android RecyclerView 使用完全解析 体验艺术般的控件 Android开发之RecyclerView的使用全解 这里就不在做过多的描述了。后面我们会通过几个例子体会一下RecyclerView的用法。

附上RecyclerView的国内镜像API

CardView

　　CardView也是Android5.0推出的一个全新控件，CardView类似于FrameLayout，但是添加了圆角和阴影效果，常用于ListView和RecyclerView中，是一种容器，可以在CardView之上添加其它控件。下面我们了解一下CardView的常用属性：

• card_view:cardElevation:阴影的大小
• card_view:cardMaxElevation:阴影最大高度
• card_view:cardBackgroundColor:卡片的背景色
• card_view:cardCornerRadius:卡片的圆角大小
• card_view:contentPadding:卡片内容的内边距
• card_view:contentPaddingBottom:卡片内容的底部内边距
• card_view:contentPaddingTop:卡片内容的上内边距
• card_view:contentPaddingLeft：卡片内容的左内边距
• card_view:contentPaddingRight：卡片内容的右内边距
• card_view:contentPaddingStart：卡片内容的左内边距
• card_view:contentPaddingEnd：卡片内容的右内边距
• card_view:cardUseCompatPadding：设置内边距，V21+的版本和之前的版本仍旧具有一样的计算方式
• card_view:cardPreventConrerOverlap：在V20和之前的版本中添加内边距，这个属性为了防止内容和边角的重叠

附上CardView的国内镜像API

关于SwiperefreshLayout、RecyclerView和CardView就简单介绍到这里，下面我们用几个例子体会一下这三个控件组合的效果：

使用RecyclerView需要在Gradle中添加：

compile &＃39;com.android.support:recyclerview-v7:24.0.0&＃39;


使用CardView需要在Gradle中添加：

compile &＃39;com.android.support:cardview-v7:24.0.0&＃39;


SwiperefreshLayout、RecyclerView和CardView组合实现普通的列表视图，有下拉刷新功能：

首先是布局文件的代码：


android:id="@+id/sl"
android:layout_
android:layout_>android:id="@+id/recycler"
android:layout_
android:layout_
android:cacheColorHint="@null"
android:scrollbars="vertical" />


Item布局文件代码：


xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/cv_rvlist"
android:layout_
android:layout_
android:layout_margin="5dp"
card_view:cardCornerRadius="5dp">


接着是适配器的代码：

package com.example.newapidemo.adapter;import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;import com.example.newapidemo.OnItemClickListener;
import com.example.newapidemo.R;
import com.example.newapidemo.domain.RVTest;import java.util.List;/*** Created by Devin on 2016/7/14.* 自定义RecyclerView的适配器*/
public class RVListAdapter extends RecyclerView.Adapter {private Context mContext;
private List datas;
private OnItemClickListener mListener;/*** 暴露出去的设置item点击事件** @param mListener*/
public void setOnItemClickListener(OnItemClickListener mListener) {this.mListener = mListener;
}public RVListAdapter(Context mContext, List datas) {this.mCOntext= mContext;this.datas = datas;
}/*** 为每一个Item inflate一个View，返回一个ViewHolder，将View封装在ViewHolder中，省略掉setTag和getTag的步骤** @param parent* @param viewType* @return*/@Override
public RVListViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {View view = LayoutInflater.from(mContext).inflate(R.layout.item_rvlist, parent, false);//给每一个item设置点击监听view.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {if (mListener != null) {//调用getTag取出数据mListener.onItemClick(view, (String) view.getTag());}}});return new RVListViewHolder(view);
}/*** 将数据渲染到View中** @param holder* @param position*/
@Override
public void onBindViewHolder(RVListViewHolder holder, int position) {//将数据通过调用setTag方法保存在ItemView里面，然后可以调用getTag取出数据holder.itemView.setTag(datas.get(position).getContent());holder.iv_rvlist_icon.setImageResource(R.mipmap.ic_launcher);holder.tv_rvlist_text.setText(datas.get(position).getContent());
}/*** 获取到Item的数量** @return*/
@Override
public int getItemCount() {return datas.size();
}/*** 批量添加数据** @param testList*/
public void addItems(List testList) {if (testList != null) {datas.addAll(0, testList);notifyItemRangeChanged(0, testList.size());}
}/*** ViewHolder，需要继承RecyclerView.ViewHolder*/
public static class RVListViewHolder extends RecyclerView.ViewHolder {private ImageView iv_rvlist_icon;private TextView tv_rvlist_text;public RVListViewHolder(View itemView) {super(itemView);iv_rvlist_icon = (ImageView) itemView.findViewById(R.id.iv_rvlist_icon);tv_rvlist_text = (TextView) itemView.findViewById(R.id.tv_rvlist_text);}
}
}


由于RecyclerView不像ListView一样提供Item点击事件，所以我们需要自己去实现，Item点击和长按事件，按自己需求去实现，这里的话就实现Item点击事件。

最后是Activity代码：

package com.example.newapidemo;import android.os.AsyncTask;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.OrientationHelper;
import android.support.v7.widget.RecyclerView;
import android.view.View;import com.example.newapidemo.adapter.RVListAdapter;
import com.example.newapidemo.domain.RVTest;import java.util.ArrayList;
import java.util.List;/*** Created by Devin on 2016/7/14.*/
public class RVListActivity extends AppCompatActivity {
private SwipeRefreshLayout swipeRefreshLayout;
private RecyclerView recyclerView;
private LinearLayoutManager linearLayoutManager;
private RVListAdapter adapter;
private List datas;
public static String TAG = "RVListActivity";@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_rvlist);swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.sl);recyclerView = (RecyclerView) findViewById(R.id.recycler);linearLayoutManager = new LinearLayoutManager(this);//设置为垂直布局，这也是默认的linearLayoutManager.setOrientation(OrientationHelper.VERTICAL);//设置布局管理器recyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext()));//设置增加或删除条目的动画recyclerView.setItemAnimator(new DefaultItemAnimator());datas = new ArrayList<>();initData();adapter = new RVListAdapter(this, datas);//设置适配器recyclerView.setAdapter(adapter);//设置Item点击监听adapter.setOnItemClickListener(new OnItemClickListener() {@Overridepublic void onItemClick(View view, String data) {ToastUtils.showToast(RVListActivity.this, data);}});//设置刷新时动画的背景颜色swipeRefreshLayout.setProgressBackgroundColorSchemeResource(android.R.color.white);//设置下拉刷新时候动画的颜色，可以一次设置四个swipeRefreshLayout.setColorSchemeResources(android.R.color.holo_blue_light,+android.R.color.holo_red_light, android.R.color.holo_orange_light,+android.R.color.holo_green_light);//设置刷新监听swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {@Overridepublic void onRefresh() {new UpdateTask().execute();}});}/*** 初始化数据*/
private void initData() {for (int i = 0; i <20; i++) {datas.add(new RVTest(i, "这是第 " + (i + 1) + " 条测试数据"));}
}/*** 模拟加载数据*/
private class UpdateTask extends AsyncTask> {@Overrideprotected List doInBackground(Void... voids) {try {//休眠3秒钟Thread.sleep(3000);} catch (InterruptedException e) {e.printStackTrace();}List data = new ArrayList<>();data.add(new RVTest(0, "下拉刷新出来的数据1"));data.add(new RVTest(1, "下拉刷新出来的数据2"));data.add(new RVTest(2, "下拉刷新出来的数据3"));return data;}@Overrideprotected void onPostExecute(List testList) {adapter.addItems(testList);//停止刷新swipeRefreshLayout.setRefreshing(false);//RecyclerView滑动到第一个recyclerView.scrollToPosition(0);ToastUtils.showToast(RVListActivity.this, "刷新了3条数据");}
}
}


在这里通过用SwiperefreshLayout实现下拉刷新功能，非常简单，下拉刷新加载数据在这里只是模拟网络请求数据，然后实现的效果图如下：

这里是实现类似于ListView的效果，不过用这种组合比较符合google的MD设计效果，在实际的开发中我们可以按需求扩展。下面是SwiperefreshLayout、RecyclerView和CardView实现网格效果

SwiperefreshLayout、RecyclerView和CardView实现网格效果：

首先依然是布局文件代码：


android:id="@+id/sl_grid"
android:layout_
android:layout_
android:orientation="vertical">


Item布局代码：


xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_
android:layout_
android:layout_margin="3dp"
android:orientation="vertical"
android:padding="5dp"
card_view:cardCornerRadius="5dp">



接着是适配器代码，跟上面一个例子的适配器代码基本一样，就没有写那么多注释了：

package com.example.newapidemo.adapter;import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;import com.example.newapidemo.OnItemClickListener;
import com.example.newapidemo.R;
import com.example.newapidemo.domain.RVTest;import java.util.List;/*** Created by Devin on 2016/7/14.*/
public class RVGridAdapter extends RecyclerView.Adapter {private Context mContext;
private List datas;
private OnItemClickListener onItemClickListener;public void setOnItemClickListener(OnItemClickListener listener) {this.OnItemClickListener= listener;
}public RVGridAdapter(Context mContext, List datas) {this.mCOntext= mContext;this.datas = datas;
}@Override
public RVGridViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {View view = LayoutInflater.from(mContext).inflate(R.layout.item_rvgrid, parent, false);view.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {if (onItemClickListener != null) {onItemClickListener.onItemClick(view, (String) view.getTag());}}});return new RVGridViewHolder(view);
}@Override
public void onBindViewHolder(RVGridViewHolder holder, int position) {holder.itemView.setTag(datas.get(position).getContent());holder.tv_rvgrid.setText(datas.get(position).getContent());
}@Override
public int getItemCount() {return datas.size();
}
/*** 批量添加数据** @param testList*/
public void addItems(List testList) {if (testList != null) {datas.addAll(0, testList);notifyItemRangeChanged(0, testList.size());}
}
public static class RVGridViewHolder extends RecyclerView.ViewHolder {TextView tv_rvgrid;public RVGridViewHolder(View itemView) {super(itemView);tv_rvgrid = (TextView) itemView.findViewById(R.id.tv_rvgrid);}
}
}


最后是Activity代码：

package com.example.newapidemo;import android.os.AsyncTask;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;import com.example.newapidemo.adapter.RVGridAdapter;
import com.example.newapidemo.domain.RVTest;import java.util.ArrayList;
import java.util.List;/*** Created by Devin on 2016/7/14.*/
public class RVGridActivity extends AppCompatActivity {
private SwipeRefreshLayout sl_grid;
private RecyclerView rv_grid;
private GridLayoutManager gridLayoutManager;
private RVGridAdapter adapter;
private List datas;
private String[] names = {"浏览器", "工具", "图库", "设置", "微信", "安全", "电话", "短信", "QQ","联系人", "起点", "云音乐", "游戏", "爱消除", "系统","笔记", "随手记", "计算器", "文件", "天气"};@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_rvgrid);rv_grid = (RecyclerView) findViewById(R.id.rv_grid);sl_grid = (SwipeRefreshLayout) findViewById(R.id.sl_grid);gridLayoutManager = new GridLayoutManager(this, 4);rv_grid.setLayoutManager(gridLayoutManager);rv_grid.setItemAnimator(new DefaultItemAnimator());//设置刷新时动画的背景颜色sl_grid.setProgressBackgroundColorSchemeResource(android.R.color.white);//设置下拉刷新时候动画的颜色，可以一次设置四个sl_grid.setColorSchemeResources(android.R.color.holo_blue_light,+android.R.color.holo_red_light, android.R.color.holo_orange_light,+android.R.color.holo_green_light);initData();adapter = new RVGridAdapter(this, datas);rv_grid.setAdapter(adapter);adapter.setOnItemClickListener(new OnItemClickListener() {@Overridepublic void onItemClick(View view, String data) {ToastUtils.showToast(RVGridActivity.this, "点击的是：" + data);}});sl_grid.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {@Overridepublic void onRefresh() {new UpdateTask().execute();}});
}private void initData() {datas = new ArrayList<>();for (int i = 0; i <20; i++) {datas.add(new RVTest(i, names[i]));}
}/*** 模拟加载数据*/
private class UpdateTask extends AsyncTask> {@Overrideprotected List doInBackground(Void... voids) {try {//休眠3秒钟Thread.sleep(3000);} catch (InterruptedException e) {e.printStackTrace();}List data = new ArrayList<>();data.add(new RVTest(0, "数据1"));data.add(new RVTest(1, "数据2"));data.add(new RVTest(2, "数据3"));data.add(new RVTest(2, "数据4"));return data;}@Overrideprotected void onPostExecute(List testList) {adapter.addItems(testList);//停止刷新sl_grid.setRefreshing(false);//RecyclerView滑动到第一个rv_grid.scrollToPosition(0);ToastUtils.showToast(RVGridActivity.this, "刷新了4条数据");}
}
}


其实这个例子跟上一个比较类似，只是在RecyclerView中传入不同的布局管理器而已，这样我们在实现网格效果就比较简单了，然后是效果图：

这里简单实现类似网格视图的效果，跟上一个例子比较相似，就不再做很多介绍了，下面是实现瀑布流的效果：

首先是布局文件代码：


android:id="@+id/sl_stagger"
android:layout_
android:layout_
android:orientation="vertical">



Item布局代码：


xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_
android:layout_
android:layout_margin="5dp"
android:orientation="vertical"
card_view:cardBackgroundColor="#FFFF33"
android:padding="5dp"
card_view:cardCornerRadius="5dp">


适配器代码：

package com.example.newapidemo.adapter;import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;import com.example.newapidemo.OnItemClickListener;
import com.example.newapidemo.R;
import com.example.newapidemo.domain.RVTest;import java.util.ArrayList;
import java.util.List;/*** Created by Devin on 2016/7/14.*/
public class RVStaggerAdapter extends RecyclerView.Adapter {
private Context mContext;
private List datas;
private OnItemClickListener onItemClickListener;
private List heights;public RVStaggerAdapter(Context mContext, List datas) {this.mCOntext= mContext;this.datas = datas;getRandomHeight(this.datas);
}public void setOnItemClickListener(OnItemClickListener listener) {this.OnItemClickListener= listener;
}@Override
public RVStaggerViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {View view = LayoutInflater.from(mContext).inflate(R.layout.item_rvstagger, parent, false);view.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {if (onItemClickListener != null) {onItemClickListener.onItemClick(view, (String) view.getTag());}}});return new RVStaggerViewHolder(view);
}@Override
public void onBindViewHolder(RVStaggerViewHolder holder, int position) {//得到item的LayoutParams布局参数ViewGroup.LayoutParams params = holder.itemView.getLayoutParams();//把随机的高度赋予item布局params.height = heights.get(position);//把params设置给item布局holder.itemView.setLayoutParams(params);holder.itemView.setTag(datas.get(position).getContent());holder.tv_rvstagger.setText(datas.get(position).getContent());
}@Override
public int getItemCount() {return datas.size();
}/*** 批量添加数据** @param testList*/
public void addItems(List testList) {if (testList != null) {datas.addAll(0, testList);notifyItemRangeChanged(0, testList.size());}
}/*** 随机得到Item的高度** @param lists*/
private void getRandomHeight(List lists) {heights = new ArrayList<>();for (int i = 0; i }public static class RVStaggerViewHolder extends RecyclerView.ViewHolder {TextView tv_rvstagger;public RVStaggerViewHolder(View itemView) {super(itemView);tv_rvstagger = (TextView) itemView.findViewById(R.id.tv_rvstagger);}
}}


最后是Activity代码：

package com.example.newapidemo;import android.os.AsyncTask;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.view.View;import com.example.newapidemo.adapter.RVStaggerAdapter;
import com.example.newapidemo.domain.RVTest;import java.util.ArrayList;
import java.util.List;/*** Created by Devin on 2016/7/14.*/
public class RVStaggeredActivity extends AppCompatActivity {
private SwipeRefreshLayout sl_stagger;
private RecyclerView rv_stagger;
private StaggeredGridLayoutManager layoutManager;
private List datas;
private String[] names = {"浏览器", "工具", "图库", "设置", "微信", "安全", "电话", "短信", "QQ", "汽车"};
private int[] icOns= {R.drawable.icon0, R.drawable.icon1,R.drawable.icon2, R.drawable.icon3,R.drawable.icon4, R.drawable.icon5,R.drawable.icon6, R.drawable.icon7,R.drawable.icon8, R.drawable.icon9};
private RVStaggerAdapter adapter;@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_rvstagger);sl_stagger = (SwipeRefreshLayout) findViewById(R.id.sl_stagger);rv_stagger = (RecyclerView) findViewById(R.id.rv_stagger);layoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);rv_stagger.setLayoutManager(layoutManager);initData();adapter = new RVStaggerAdapter(this, datas);rv_stagger.setAdapter(adapter);//设置刷新时动画的背景颜色sl_stagger.setProgressBackgroundColorSchemeResource(android.R.color.white);//设置下拉刷新时候动画的颜色，可以一次设置四个sl_stagger.setColorSchemeResources(android.R.color.holo_blue_light,+android.R.color.holo_red_light, android.R.color.holo_orange_light,+android.R.color.holo_green_light);adapter.setOnItemClickListener(new OnItemClickListener() {@Overridepublic void onItemClick(View view, String data) {ToastUtils.showToast(RVStaggeredActivity.this, "点击的是：" + data);}});sl_stagger.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {@Overridepublic void onRefresh() {new UpdateTask().execute();}});}private void initData() {datas = new ArrayList<>();for (int i = 0; i <30; i++) {datas.add(new RVTest(i, "原始数据" + i));}
}/*** 模拟加载数据*/
private class UpdateTask extends AsyncTask> {@Overrideprotected List doInBackground(Void... voids) {try {//休眠3秒钟Thread.sleep(3000);} catch (InterruptedException e) {e.printStackTrace();}List data = new ArrayList<>();data.add(new RVTest(0, "数据1"));data.add(new RVTest(0, "数据2"));data.add(new RVTest(0, "数据3"));data.add(new RVTest(0, "数据4"));return data;}@Overrideprotected void onPostExecute(List testList) {adapter.addItems(testList);//停止刷新sl_stagger.setRefreshing(false);//RecyclerView滑动到第一个rv_stagger.scrollToPosition(0);ToastUtils.showToast(RVStaggeredActivity.this, "刷新了4条数据");}
}
}


实现效果图如下：

这样就可以实现瀑布流效果了，关于这三个控件的组合就简单介绍到这里，下一节，我们继续用这三个控件实现拖拽和滑动效果。