RecyclerView 用的不少，ItemDecoration 作为重要的一员也不陌生，为了恢复写博客的节奏，就再将这一块梳理一下。
最初使用 ItemDecoration 仅用来绘制分割线，后来用来做分组悬浮，可见这里面还是要琢磨一下、理解透彻。
顾名思义，ItemDecoration 专注于对 item 的修饰，getItemOffsets() 方法为 item 设置偏移，然后就可以在 onDraw() 和 onDrawOver() 通过 Canvas 绘制想要的东西，区别是前者绘制的内容会被 item 挡住，后者则悬浮于 item 上。
下面以分组悬浮标题的实例来解析各个方法。
getItemOffsets()
设置偏移，才有空间绘制间隔线等内容。
源码中可以看到：
/*
*
* @param outRect Rect to receive the output.
* @param view The child view to decorate
* @param parent RecyclerView this ItemDecoration is decorating
* @param state The current state of RecyclerView.
*/
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state) {
getItemOffsets(outRect, ((LayoutParams) view.getLayoutParams()).getViewLayoutPosition(),
parent);
}
outRect 用来接收设置的数据，view 是 item 的实例，parent 是 RecyclerView 的实例，state 保存有一些 rv 的状态。
所以我们在这个方法判断是否需要设置偏移及偏移的大小：
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
//获取到当前 item 的 index
int position = parent.getChildAdapterPosition(view);
if (isNeed(position)){
//通过 index 判断当前 item 是否需要偏移
outRect.set(0, mOffsetSize, 0, 0);
}
}
其中 outRect.set() 方法设置偏移的大小：
/*
* 注意这里的大小为 px
* @param left The X coordinate of the left side of the rectangle
* @param top The Y coordinate of the top of the rectangle
* @param right The X coordinate of the right side of the rectangle
* @param bottom The Y coordinate of the bottom of the rectangle
*/
public void set(int left, int top, int right, int bottom);
出自 https://blog.piasy.com/2016/03/26/Insight-Android-RecyclerView-ItemDecoration
如果是瀑布流布局或网格布局 ，还可以通过 layoutManager 获取到列数：
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
//列数
int spanCount = -1;
LayoutManager layoutManager = parent.getLayoutManager();
if (layoutManager instanceof GridLayoutManager){
spanCount = ((GridLayoutManager) layoutManager).getSpanCount();
} else if (layoutManager instanceof StaggeredGridLayoutManager){
spanCount = ((StaggeredGridLayoutManager) layoutManager)
.getSpanCount();
}
//然后通过列数和行数判断
......
}
onDraw()
绘制内容，包括分组的标题、分割线等。
/*
* @param c Canvas to draw into
* @param parent RecyclerView this ItemDecoration is drawing into
* @param state The current state of RecyclerView
*/
public void onDraw(Canvas c, RecyclerView parent, State state);
在 getItemOffsets() 中我们是针对单个 item 设置的偏移，而 onDraw() 中则需要我们自己去遍历 item：
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDraw(c, parent, state);
//获取子 View 个数
int itemSum = parent.getChildCount();
//获取 item 左右的 margin
int itemLeft = parent.getPaddingLeft();
int itemRight = parent.getWidth() - parent.getPaddingRight();
//设置 Paint
Paint titlePaint = new Paint();
titlePaint.setColor(Color.parseColor("#FFFFFFFF"));
Paint textPaint = new Paint();
textPaint.setColor(Color.parseColor("#43CD80"));
textPaint.setAntiAlias(true);
textPaint.setTextSize(DeviceUtils.dip2px(getActivity(),15));
Paint linePaint = new Paint();
linePaint.setColor(Color.parseColor("#dddddd"));
for (int i = 0; i < itemSum; i++) {
//获取子 View 实例
View childView = parent.getChildAt(i);
//获取子 View 的 Index
int position = parent.getChildAdapterPosition(childView);
//获取子 view 的布局参数,方便确定头部位置
RecyclerView.LayoutParams childParams = (RecyclerView.LayoutParams) childView.getLayoutParams();
int itemTop = childView.getTop() - childParams.topMargin - mOffsetSize;
int itemBottom = childView.getTop() - childParams.topMargin;
//判定当前子 view 是否需要绘制分组，注意位置
if (isNeed(position)) {
//绘制背景
c.drawRect(itemLeft, itemTop + mTitleMargin, itemRight, itemBottom, titlePaint);
//绘制文字
c.drawText(mList.get(position).getType(), itemLeft + mTitleMargin, itemBottom - mTitleMargin, textPaint);
//画线
c.drawLine(itemLeft,itemBottom - DeviceUtils.dip2px(getActivity(),1),itemRight,itemBottom,linePaint);
}
}
}
重点在于我们需要自己去判断 item 的位置，计算出绘制的 top、bottom、left 和 right；
这一部分比较多的是关于绘制 View 的一些基础知识，比如 Paint 和 Canvas 的一些方法，在这里不是重点就不赘述。
onDrawOver()
绘制的内容可以覆盖 item 的内容，看起来就是悬浮的效果。
如果我们需要在 rv 的顶端悬浮一个分组的标题，那么标题的 top 即是 rv 的顶部位置，bottom 则是顶部向下偏移需要的大小 mOffsetSize；
所以初步写出：
@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDrawOver(c, parent, state);
//获取 item 左右的 margin
int itemLeft = parent.getPaddingLeft();
int itemRight = parent.getWidth() - parent.getPaddingRight();
int itemTop = parent.getPaddingTop();
int itemBottom = itemTop + mOffsetSize;
Paint titlePaint = new Paint();
titlePaint.setColor(Color.parseColor("#FFFFFFFF"));
c.drawRect(itemLeft, itemTop + mTitleMargin, itemRight, itemBottom, titlePaint);
}
这样 rv 的顶端确实会悬浮有一个分组标题，但是当滑动至下一个分组的时候，不同的分组标题会瞬间切换而没有推动的效果。
如果想让分组标题出现被推动的效果就需要设置一个合理的 itemTop、itemBottom，一般情况下我们让标题随着同组的最后一个 item 离开屏幕：
@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDrawOver(c, parent, state);
//获取 item 左右的 margin
int itemLeft = parent.getPaddingLeft();
int itemRight = parent.getWidth() - parent.getPaddingRight();
int itemTop = parent.getPaddingTop();
int itemBottom = itemTop + mOffsetSize;
Paint titlePaint = new Paint();
titlePaint.setColor(Color.parseColor("#FFFFFFFF"));
//获取当前屏幕上，最顶部的 item 的 index
int position = ((LinearLayoutManager)(parent.getLayoutManager())).findFirstVisibleItemPosition();
View childView = parent.findViewHolderForLayoutPosition(position).itemView;
//如果当前 item 是同组的最后一个
if (beforeAndLater(position + 1) && position != 0){
//意味着当前悬浮的分组标题需要被移走
itemBottom = Math.min(childView.getBottom(),itemBottom);
//itemTop = itemBottom - mOffsetSize;
}
c.drawRect(itemLeft, itemTop + mTitleMargin, itemRight, itemBottom, titlePaint);
}
网友评论