前言
最近项目中需要实现列表按组分隔的效果：根据接收到的推送消息日期进行分组显示，具体分组有“今日”、“昨天”、“更早”。先来看下效果图：
RecyclerView日期按组分隔.gif
思路
- 列表的实现采用RecyclerView
- 添加列表项分隔线DividerItemDecoration
- 列表项日期按组分隔GroupItemDecoration
实现
RecyclerView显示数据集的方法这里就不再赘述了，分隔线直接用的是Android官方的android.support.v7.widget.DividerItemDecoration。下面重点讨论列表项按日期分组显示的效果：
- 创建一个类GroupItemDecoration继承自RecyclerView.ItemDecoration
- 覆盖getItemOffsets方法，根据ItemDecoration绘制的区域确定列表项绘制的偏移量：
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
int position = parent.getChildAdapterPosition(view);
if (position == 0) {
// 列表第一项，顶部绘制分隔
outRect.set(0, mDividerHeight, 0, 0);
} else if (position > 0) {
// 列表项属于新的组，顶部绘制分隔
outRect.set(0, mGroupCallback.getGroupName(position).equals(mGroupCallback.getGroupName(position - 1)) ?
0 : mDividerHeight, 0, 0);
} else {
// 列表项被删除，不绘制分隔
outRect.set(0, 0, 0, 0);
}
}
列表第一项默认属于一个分组，故需要绘制分隔；其他列表项，如果属于新的分组即与前一项的分组不一样，也需要绘制分隔。由于分隔绘制在列表项顶部，故调用outRect.set(int left, int top, int right, int bottom)时，将第二个参数top设置成分隔的高度即列表项绘制时顶部的偏移量。
注：列表项被删除时，此方法中position可能为-1，此时不绘制分隔。
- 覆盖onDrawOver方法，在列表项视图上面绘制分隔：
@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
if (parent.getLayoutManager() == null) {
return;
}
c.save();
final int left = parent.getPaddingLeft();
final int right = parent.getWidth() - parent.getPaddingRight();
c.clipRect(left, parent.getPaddingTop(), right, parent.getHeight() - parent.getPaddingBottom());
final int childCount = parent.getChildCount();
View child;
int position;
for (int i = 0; i < childCount; i++) {
child = parent.getChildAt(i);
position = parent.getChildAdapterPosition(child);
if (position == 0) {
// 列表第一项，顶部绘制分隔
drawGroup(c, parent, child, position);
} else if (position > 0) {
// 第一个可视的列表项或列表项属于新的组，顶部绘制分隔
if (i == 0 || !mGroupCallback.getGroupName(position).equals(mGroupCallback.getGroupName(position - 1)
)) {
drawGroup(c, parent, child, position);
}
}
}
c.restore();
}
由于我们需要实现滑动列表时，分组分隔在顶部悬停的效果，故覆盖onDrawOver方法；此方法是在列表项视图绘制完之后调用，因而能实现分隔在列表项上面的效果。同样的：列表第一项默认属于一个分组，故需要绘制分隔；其他列表项，如果属于新的分组即与前一项的分组不一样，也需要绘制分隔。不一样的是：当滑动列表时，分组分隔需要顶部悬浮，故第一个可视的列表项也需要绘制分隔。下面具体看一下绘制分组的方法：
/**
* 绘制分组
*
* @param c 用于绘制分组信息
* @param parent 需要绘制分组的列表
* @param child 需要绘制分组的列表项
* @param position 列表项位置
*/
private void drawGroup(Canvas c, RecyclerView parent, View child, int position) {
parent.getDecoratedBoundsWithMargins(child, mBounds);
// 头部悬停
int top = Math.max(mBounds.top + Math.round(ViewCompat.getTranslationY(child)), parent.getPaddingTop());
int bottom = top + mDividerHeight;
int itemCount = parent.getAdapter().getItemCount();
if (bottom > mBounds.bottom && position + 1 < itemCount && !mGroupCallback.getGroupName(position +
1).equals(mGroupCallback.getGroupName(position))) {
// 新分组即将滑动到头部的粘性效果
bottom = mBounds.bottom;
top = bottom - mDividerHeight;
}
// 绘制分组背景
mPaint.setColor(mBackgroundColor);
c.drawRect(mBounds.left, top, mBounds.right, bottom, mPaint);
// 绘制分组名称
String groupName = mGroupCallback.getGroupName(position);
mPaint.getTextBounds(groupName, 0, groupName.length(), mBounds);
mPaint.setColor(mTextColor);
c.drawText(groupName, mTextPaddingLeft, bottom - (mDividerHeight - mBounds.height()) / 2, mPaint);
}
要想实现头部悬停的效果，分隔绘制的顶部不能小于列表顶部，否则将移出屏幕。同时要实现粘性效果，则当分组中最后一项即将移出屏幕时，需要调整分隔绘制的区域，使其与列表项一起移出屏幕。
- 初始化RecyclerView之后，添加分组分隔：
mRecyclerView.addItemDecoration(new GroupItemDecoration(this, new GroupItemDecoration.GroupCallback() {
@Override
public String getGroupName(int position) {
// TODO: 返回列表项对应的分组名称
}
}));
初始化GroupItemDecoration时需要传递GroupItemDecoration.GroupCallback参数，此回调接口定义如下：
/**
* 分组回调
*/
public interface GroupCallback {
/**
* 获取分组名称
*
* @param position 列表项位置
* @return 分组名称
*/
String getGroupName(int position);
}
小结
利用RecyclerView.ItemDecoration实现分组的效果比较简洁，且能够复用，推荐大家使用！
本人是第一次写技术文章，希望能帮到大家。如果有错误或疑问的地方，欢迎指出，谢谢！
网友评论