商城项目实战 | 4.2 RecyclerView 使用完全解析
本文为菜鸟窝作者刘婷的连载。”商城项目实战”系列来聊聊仿”京东淘宝的购物商城”如何实现。
在上文中已经对 RecyclerView 的基本属性和简单使用都做了详细的介绍了，可以查看文章《商城项目实战 | 4.1 RecyclerView 使用完全解析 体验艺术般的控件（一）》，而在这篇文章就是要更深入一层的讲解 RecyclerView 更加深层次的使用了。
这次的学习我们就跟着 Demo 的一步步实现来学习 RecyclerView 的扩展和更多使用，先来看下效果。
自定义 ItemDecoration
有效果图可以知道，这里有两种间隔线的效果，一种是线性布局时的水平垂直分隔线，还有一种就是网格布局时的网格形式的分隔线。
1. 线性分隔线
线性分隔线主要是用于线性列表布局，主要分为了水平和垂直两种，和上篇文章中所说到的一样，我们自定义的 ItemDecoration 必须继承于 RecyclerView.ItemDecoration ，然后重写主要的三个方法来自定义自己的分隔线样式。水平方向的分隔线是用于垂直排列控件的时候使用，而垂直分隔线则是水平排列控件的时候使用了，所以根据控件的排列方向来区分。首先是绘制水平方向的分隔线，主要代码如下。
//控件为垂直排列样式，分隔线为水平方向
public void drawVertical(Canvas c, RecyclerView parent)
{
final int left = parent.getPaddingLeft();
final int right = parent.getWidth() - parent.getPaddingRight();
final int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++)
{
final View child = parent.getChildAt(i);
android.support.v7.widget.RecyclerView v = new android.support.v7.widget.RecyclerView(
parent.getContext());
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
.getLayoutParams();
final int top = child.getBottom() + params.bottomMargin;
final int bottom = top + mDivider.getIntrinsicHeight();
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(c);
}
}
类似于水平方向上的分隔线绘制方法，可以写出垂直方向的分隔线样式。
//控件为水平排列样式，分隔线为垂直方向
public void drawHorizontal(Canvas c, RecyclerView parent) {
final int top = parent.getPaddingTop();
final int bottom = parent.getHeight() - parent.getPaddingBottom();
final int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
final View child = parent.getChildAt(i);
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
.getLayoutParams();
final int left = child.getRight() + params.rightMargin;
final int right = left + mDivider.getIntrinsicHeight();
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(c);
}
}
然后直接把上面绘制分隔线的方法在 onDraw() 方法中调用就可以了。
@Override
public void onDraw(Canvas c, RecyclerView parent) {
Log.v("recyclerview - itemdecoration", "onDraw()");
if (mOrientation == VERTICAL_LIST) {
drawVertical(c, parent);
} else {
drawHorizontal(c, parent);
}
}
2. 网格分隔线
网格分隔线主要是用于网格布局中使用，同时拥有垂直和水平方向的两条分隔线，相对于线性分隔线的自定义要复杂些，但是根据之前的线性分隔线的描述，对于网格分隔线的定义就会明白很多了。
首先同样的也需要绘制水平和垂直方向的分隔线，这次是要同时绘制了，需要在 onDraw() 方法中同时调用水平绘制和垂直绘制的两个方法了，但是网格中的水平绘制和垂直绘制又有所不同，下面看具体的代码。
//水平方向分隔线
public void drawHorizontal(Canvas c, RecyclerView parent) {
int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
final View child = parent.getChildAt(i);
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
.getLayoutParams();
final int left = child.getLeft() - params.leftMargin;
final int right = child.getRight() + params.rightMargin
+ mDivider.getIntrinsicWidth();
final int top = child.getBottom() + params.bottomMargin;
final int bottom = top + mDivider.getIntrinsicHeight();
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(c);
}
}
//垂直方向分隔线
public void drawVertical(Canvas c, RecyclerView parent) {
final int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
final View child = parent.getChildAt(i);
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
.getLayoutParams();
final int top = child.getTop() - params.topMargin;
final int bottom = child.getBottom() + params.bottomMargin;
final int left = child.getRight() + params.rightMargin;
final int right = left + mDivider.getIntrinsicWidth();
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(c);
}
}
自定义 Adapter
上文中我们已经了解了简单的自定义 Adapter 了，基本的使用就不多说了，根据效果图，我们可以知道的是列表首先可以有点击事件的监听，其次还要有数据的增删变化。和 ListView 和 GridView 有所不同，RecyclerView 中没有 OnItemClickListener 的 item 选项点击事件的监听，所以想要实现点击事件的监听，就只能自己定义了。
1. 定义事件监听接口
首先添加interface 事件监听接口。
public interface OnItemClickListener{
void onClick(View v,int position,String city);
}
2. 添加事件监听
接口定义好了，就可以调用了，那么我们要先声明一下 listener ，并且写个 set 方法可以对 listener 进行设置。
private OnItemClickListener listener;//事件监听
public void setOnItemClickListener(OnItemClickListener listener){
this.listener = listener;
}
这个点击事件是在 item 选项中起作用的，所以就要为选项的 View 添加监听事件了。
itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(listener !=null){
listener.onClick(v,getLayoutPosition(),mDatas.get(getLayoutPosition()));
}
}
});
3. 调用事件监听接口
在 Activity/Fragment 中可以直接调用事件监听接口，同时实现事件，我们就简单的实现事件了，弹出 Toast 提示。
mAdapter.setOnItemClickListener(new MyAdapter.OnItemClickListener() {
@Override
public void onClick(View v, int position, String city) {
Toast.makeText(MainActivity.this,"city:"+city+",position:"+position,Toast.LENGTH_LONG).show();
}
});
4. 添加数据增删操作
在 RecyclerView 中提供了非常方便的数据增删改查的方法，我们直接在 Adapter 写好自己的调用方法就可以了。
/**
* 添加数据
*
* @param position
* @param city
*/
public void addData(int position,String city){
mDatas.add(position,city);
notifyItemInserted(position);
}
/**
* 删除数据
*
* @param position
*/
public void removeData(int position){
mDatas.remove(position);
notifyItemRemoved(position);
}
写好了方法，然后直接在外部调用即可。
//添加数据
mAdapter.addData(0,mInsert);
//删除数据
mAdapter.removeData(0);
最终效果实现
1. RecyclerView 样式切换
在效果图中，可以根据 Menu 选项的切换来切换 RecyclerView 的布局和样式。Menu 的样式是最简单的，直接新建一个 menu_main.xml 文件，Menu 的布局文件如下。
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" tools:context=".activity.MainActivity">
<item
android:id="@+id/id_action_add"
android:icon="@mipmap/actionbar_add_icon"
android:orderInCategory="100"
android:title="add"
app:showAsAction="ifRoom">
</item>
<item
android:id="@+id/id_action_delete"
android:icon="@mipmap/ic_menu_delete"
android:orderInCategory="100"
android:title="delete"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/id_action_gridview"
android:orderInCategory="100"
android:title="GirdView"
app:showAsAction="never"/>
<item
android:id="@+id/id_action_listview"
android:orderInCategory="100"
android:title="ListView"
app:showAsAction="never"/>
<item
android:id="@+id/id_action_staggered_gridview"
android:orderInCategory="100"
android:title="StaggeredGridView"
app:showAsAction="never"/>
</menu>
定义好了布局文件，直接在 Activity/Fragment 中调用布局文件并且为 Menu 选项提供事件的监听处理。
@Override
public boolean onCreateOptionsMenu(Menu menu)
{
getMenuInflater().inflate(R.menu.menu_main, menu);
return super.onCreateOptionsMenu(menu);
}
@Override
public boolean onOptionsItemSelected(MenuItem item)
{
switch (item.getItemId())
{
case R.id.id_action_add://添加数据
mAdapter.addData(0,mInsert);
break;
case R.id.id_action_delete://删除数据
mAdapter.removeData(0);
break;
case R.id.id_action_gridview://网格布局
mRecyclerView.setLayoutManager(new GridLayoutManager(this, 4));
mRecyclerView.addItemDecoration(new DividerGridItemDecoration(MainActivity.this));
break;
case R.id.id_action_listview://线性布局
mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
mRecyclerView.addItemDecoration(new DividerItemDecoration(this,DividerItemDecoration.VERTICAL_LIST));
break;
case R.id.id_action_staggered_gridview://瀑布流布局
mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(4,
StaggeredGridLayoutManager.VERTICAL));
mRecyclerView.addItemDecoration(new DividerGridItemDecoration(MainActivity.this));
break;
}
return true;
}
2. 效果展示
运行代码获取到最终效果展示，如下图。
效果图
更多内容，请关注菜鸟窝（微信公众号ID: cniao5），程序猿的在线学习平台。 转载请注明出处，本文出自菜鸟窝，原文链接http://www.cniao5.com/forum/thread/861a59d6168511e794ea00163e0230fa
关注公众号免费领取“N套客户端实战项目教程”
