什么是 RecyclerView
RecyclerView 到现在为止可以说是人人皆知了，到目前 RecyclerView 已经完全替代了以前的 ListView、GridView等控件，可以说 RecyclerView 使用起来更加的灵活，高度解耦，高度可定制化，能实现的效果也是非常之多
什么是 SwipeRefreshLayout
SwipeRefreshLayout 是 Google 官方推出的一款下拉刷新组件。使用起来也是非常的方便
什么是 CardView
CardView 继承自 FrameLayout 类，是一种卡片视图，主要是以卡片形式显示内容，可实现圆角和阴影效果的一个控件。大多时候作为 RecyclerView 等列表控件的 item 进行使用
简单使用
按照惯例，我们先看一下效果图：
RecyclerView.gif
从效果图来看，该效果是从上一篇 MaterialDesign（三），CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout使用 的基础上实现的，主要实现了 RecyclerView 提供的四种 LayoutManager，RecyclerView item 点击回调监听；SwipeRefreshLayout 下拉刷新操作；CardView 作为 item 的布局展示，下面看看具体实现
- 引入 com.android.support:cardview
由于 RecyclerView 是 v7 包的控件，v7 包之前已经引入过了，在此仅需单独引入 CardView 对应包
compile 'com.android.support:cardview-v7:26.1.0'
- xml 文件创建
activity 的 xml 布局
// ...这里省略了 CoordinatorLayout 相关，完整代码请查看文末的 demo
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.v4.widget.SwipeRefreshLayout>
item 的 xml 布局
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardBackgroundColor="#ffffdd"
app:cardCornerRadius="5dp"
app:cardElevation="5dp"
app:contentPadding="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="@+id/iv_item"
android:layout_width="60dp"
android:layout_height="50dp"
android:scaleType="centerCrop"
android:src="@drawable/android_bg"/>
<TextView
android:id="@+id/tv_item"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"/>
</LinearLayout>
</android.support.v7.widget.CardView>
SwipeRefreshLayout 和 RecyclerView 的 xml 使用非常简单，不作过多说明，这里主要看 item 中的 CardView 控件，CardView 作为 item 的根布局，里面可以包含任意控件，重点关注一下 CardView 的几个属性
-
app:cardBackgroundColor 设置卡片布局的背景色
-
app:cardCornerRadius 设置卡片布局的圆角大小
-
app:cardElevation 设置卡片布局的阴影大小
-
app:contentPadding 设置卡片布局内容于边距的间隔
这里只列举几个比较常用的属性值设置，更多属性值可查看 API 文档，这些属性也支持在代码中进行设置
- Activity 中获取并设置相关属性值，以及事件监听
@BindView(R.id.refresh_layout)
SwipeRefreshLayout mRefreshLayout;
@BindView(R.id.recycler_view)
RecyclerView mRecyclerView;
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_vertical_layout:
LinearLayoutManager verticalManager = new LinearLayoutManager(CoordinatorLayoutActivity.this, LinearLayoutManager.VERTICAL, false);
mRecyclerView.setLayoutManager(verticalManager);
break;
case R.id.action_horizontal_layout:
LinearLayoutManager horizontalManager = new LinearLayoutManager(CoordinatorLayoutActivity.this, LinearLayoutManager.HORIZONTAL, false);
mRecyclerView.setLayoutManager(horizontalManager);
break;
case R.id.action_grid_layout:
GridLayoutManager gridLayoutManager = new GridLayoutManager(CoordinatorLayoutActivity.this, 2);
mRecyclerView.setLayoutManager(gridLayoutManager);
break;
case R.id.action_staggered_grid_layout:
StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
// 空隙不作处理，防止item乱跳
staggeredGridLayoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);
mRecyclerView.setLayoutManager(staggeredGridLayoutManager);
break;
}
return false;
}
});
// 设置进度条颜色，支持多颜色，第一个颜色值会在手势下拉时作为显示
mRefreshLayout.setColorSchemeColors(Color.RED, Color.GREEN, Color.BLUE);
mRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
// 延时2秒执行，模拟网络访问
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
// 结束刷新
mRefreshLayout.setRefreshing(false);
Toast.makeText(CoordinatorLayoutActivity.this, "刷新完成", Toast.LENGTH_SHORT).show();
}
}, 2000);
}
});
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
mRecyclerView.setLayoutManager(linearLayoutManager);
final ArrayList<String> list = new ArrayList<>();
for (int i = 0; i < 20; i++) {
list.add(i + "");
}
MyRecyclerViewAdapter adapter = new MyRecyclerViewAdapter(list);
mRecyclerView.setAdapter(adapter);
adapter.setOnItemClickListener(new MyRecyclerViewAdapter.IOnItemClickListener() {
@Override
public void onItemClick(View view, int position) {
Toast.makeText(CoordinatorLayoutActivity.this, "点击了：" + list.get(position), Toast.LENGTH_SHORT).show();
}
});
public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.MyViewHolder> {
private ArrayList<String> mList;
private IOnItemClickListener mOnItemClickListener;
public MyRecyclerViewAdapter(ArrayList<String> list) {
this.mList = list;
}
@Override
public MyRecyclerViewAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_recycler_view_layout, parent, false);
return new MyViewHolder(view);
}
@Override
public void onBindViewHolder(final MyViewHolder holder, int position) {
holder.mTextView.setText(mList.get(position));
// 动态改变 ImageView 高度
ViewGroup.LayoutParams params = holder.mImageView.getLayoutParams();
params.height = (int) (100 + Math.random() * 200);
holder.mImageView.setLayoutParams(params);
// 设置item点击监听
if (null != mOnItemClickListener) {
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mOnItemClickListener.onItemClick(view, holder.getLayoutPosition());
}
});
}
}
@Override
public int getItemCount() {
return mList.size();
}
/**
* 设置item监听器
*
* @param onItemClickListener
*/
public void setOnItemClickListener(IOnItemClickListener onItemClickListener) {
mOnItemClickListener = onItemClickListener;
}
public class MyViewHolder extends RecyclerView.ViewHolder {
public ImageView mImageView;
public TextView mTextView;
public MyViewHolder(View itemView) {
super(itemView);
mImageView = itemView.findViewById(R.id.iv_item);
mTextView = itemView.findViewById(R.id.tv_item);
}
}
/**
* item 回调监听
* 由于 RecyclerView 没有提供item的点击监听，所以要自己提供接口进行回调
*/
public interface IOnItemClickListener {
void onItemClick(View view, int position);
}
}
首先看 SwipeRefreshLayout 设置了下拉时进度条的颜色值，并设置了刷新时的事件监听，在里面我们延时2秒（模拟网络访问）执行了 mRefreshLayout.setRefreshing(false) 方法来结束刷新，必须调用此方法后进度条才会消失
重点看一下 RecyclerView 的使用。首先要为 RecyclerView 设置 LayoutManager，然后和 ListView 用法类似，也是需呀设置 Adapter。比较麻烦的是如果你需要设置 item 的分割线，需要调用 mRecyclerView.addItemDecoration() 方法进行设置，该方法的参数是 RecyclerView.ItemDecoration，需要我们自己去实现，如果只是简单的分割线，我一般都会在 item 的 xml 布局里进行添加。还有 RecyclerView 并没有为我们提供 item 点击事件的设置，所以我们要在 Adapter 里提供一个接口回调，再进行设置，其他事件类似。
adapter 的代码和 ListView 的 adapter 用法区别不大，在 onBindViewHolder 方法里，我们动态改变 ImageView 的高度主要是为了在为 RecyclerView 设置 StaggeredGridLayoutManager（瀑布流） 的时候能较明显的看出其效果
最后在 Toolbar 菜单项点击的时候对 RecyclerView 的 LayoutManager 进行切换，展示系统提供的几种布局
- LinearLayoutManager 线性管理器，支持横向、纵向
- GridLayoutManager 网格布局管理器
- StaggeredGridLayoutManager 瀑布流式布局管理器
这里我们只是简单的介绍一下 RecyclerView，如果想要更详细的学习，可以参考鸿洋大神的文章 Android RecyclerView 使用完全解析 体验艺术般的控件
结语
本文主要简单介绍了 RecyclerView + SwipeRefreshLayout + CardView 的使用。RecyclerView 在实际开发中应用非常广泛，只有你想不到，没有他做不到的时候，所以 RecyclerView 还是非常值得学习使用的。本文 demo 已上传到 github
下面是几个控件的官方 API 地址（自备梯子）
网友评论